:root{
    --bg:#08090D;
    --bg-2:#0E1017;
    --card:#12141C;
    --card-border:rgba(255,255,255,0.08);
    --ink:#F3F4F7;
    --ink-soft:#9AA0B4;
    --violet:#C81E3A;
    --cyan:#FF6B45;
    --pink:#FF3B4E;
    --grad: linear-gradient(90deg,var(--violet),var(--cyan));
    --grad-2: linear-gradient(135deg,var(--pink),var(--violet));
    --mono:'IBM Plex Mono', monospace;
    --sans:'Manrope', sans-serif;
    --radius:16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
  h1,h2,h3{font-family:var(--sans); font-weight:800; letter-spacing:-0.02em; line-height:1.08;}
  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--cyan); display:inline-flex; align-items:center; gap:8px;
    background:rgba(124,92,252,0.1); border:1px solid rgba(124,92,252,0.25);
    padding:7px 14px; border-radius:999px;
  }
  .eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}

  /* background blobs */
  .blobs{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .blob{position:absolute; border-radius:50%; filter:blur(120px); opacity:.35; animation: moveBlob 20s ease-in-out infinite;}
  .b1{width:520px; height:520px; background:var(--violet); top:-160px; left:-120px;}
  .b2{width:460px; height:460px; background:var(--cyan); top:180px; right:-160px; opacity:.22; animation-duration: 25s; animation-delay: -5s;}
  .b3{width:420px; height:420px; background:var(--pink); bottom:-140px; left:30%; opacity:.18; animation-duration: 30s; animation-delay: -10s;}
  @keyframes moveBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -30px) scale(1.05); }
    50% { transform: translate(-10px, 15px) scale(0.95); }
    75% { transform: translate(15px, 25px) scale(1.02); }
  }

  .btn{
    font-family:var(--sans); font-weight:700; font-size:14.5px;
    padding:14px 26px; border-radius:12px;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  }
  .btn-grad{background:var(--grad); color:#06070A; box-shadow:0 8px 30px -8px rgba(124,92,252,0.6);}
  .btn-grad:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(124,92,252,0.75);}
  .btn-ghost{border:1px solid var(--card-border); color:var(--ink); background:rgba(255,255,255,0.02);}
  .btn-small{padding:10px 20px; font-size:13.5px;}
  .btn-ghost:hover{border-color:rgba(255,255,255,0.25); transform:translateY(-2px);}

  /* NAV */
  header{position:sticky; top:0; z-index:50;}
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px; margin-top:14px;
    background:rgba(18,20,28,0.6); backdrop-filter:blur(14px);
    border:1px solid var(--card-border); border-radius:16px;
  }
  .logo{font-weight:800; font-size:18px; letter-spacing:-0.02em;}
  .logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .nav-links{display:flex; gap:30px; font-size:14px; color:var(--ink-soft);}
  .nav-links a:hover{color:var(--ink);}
  .nav-links a.active{color:var(--ink); font-weight:600;}
  .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
  .nav-actions{display:flex; align-items:center; gap:16px;}
  .nav-toggle span{width:20px; height:2px; background:var(--ink);}

  /* HERO */
  .hero{padding:96px 0 60px; text-align:center;}
  .hero h1{font-size:clamp(36px,5.4vw,64px); max-width:820px; margin:22px auto 20px;}
  .hero p.lead{color:var(--ink-soft); font-size:17px; max-width:560px; margin:0 auto 34px;}
  .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px;}

  /* Split Hero Layout */
  .hero--split .wrap{display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; text-align: left;}
  .hero--split h1{margin: 22px 0 20px; max-width: none;}
  .hero--split p.lead{margin: 0 auto 34px 0; max-width: 480px;}
  .hero--split .hero-actions{justify-content: flex-start;}
  .hero-visual{min-height: 300px; display: flex; align-items: center; justify-content: center;}
  .hero-visual--hosting .server-stack{display: flex; flex-direction: column; gap: 10px; width: 100%;}
  .server-stack .server-layer{background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); border-radius: 10px; padding: 16px 22px; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); transition: all .2s ease;}
  .server-stack .server-layer:hover{transform: translateX(8px); border-color: var(--cyan);}
  .server-stack .server-layer span::before{content: '▶'; margin-right: 10px; color: var(--cyan);}
  
  .hero-visual--support .support-flow{
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 24px; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px;
    text-align: center;
  }
  .support-flow .flow-item{font-family: var(--mono); font-size: 13px; color: var(--ink-soft); background: var(--bg-2); padding: 10px; border-radius: 8px;}
  .support-flow .flow-center{grid-column: 1 / -1; margin: 10px 0; background: var(--grad); color: var(--bg); font-weight: 700; padding: 14px;}
  .support-flow .flow-arrow{color: var(--ink-soft); font-size: 20px;}

  /* School Hero Visual */
  .hero-visual--school{position: relative;}
  .module-hub{position: relative; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center;}
  .hub-center{
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--grad); color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-weight: 700; font-size: 14px;
    box-shadow: 0 0 20px rgba(124,92,252,0.4);
  }
  .hub-spoke{
    position: absolute; top: 50%; left: 50%;
    --angle: calc(var(--i) * 60deg);
    transform: rotate(var(--angle)) translate(130px) rotate(calc(-1 * var(--angle)));
    background: var(--card); border: 1px solid var(--card-border);
    padding: 8px 14px; border-radius: 8px;
    font-family: var(--mono); font-size: 12px;
  }

  /* Design Hero Visual */
  .hero-visual--design{perspective: 1000px;}
  .design-process-visual{position: relative; width: 100%; height: 250px; transform-style: preserve-3d; animation: rotateDesign 12s infinite linear;}
  .design-layer{
    position: absolute; inset: 0;
    border: 1px solid var(--card-border); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 14px;
  }
  .design-layer.wireframe{background: var(--card); transform: rotateY(0deg) translateZ(120px);}
  .design-layer.design{background: var(--bg-2); transform: rotateY(120deg) translateZ(120px); background-image: linear-gradient(45deg, rgba(124,92,252,0.1) 0%, rgba(34,211,238,0.1) 100%);}
  .design-layer.code{background: var(--card); transform: rotateY(240deg) translateZ(120px); color: var(--ink-soft);}
  @keyframes rotateDesign { from {transform: rotateY(0deg);} to {transform: rotateY(-360deg);} }
  @keyframes rotate-2d { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Pillar Grid */
  .pillar-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px;}
  .pillar-card{border-top: 2px solid var(--card-border); padding-top: 24px; transition: border-color .2s ease;}
  .pillar-card:hover{border-color: var(--cyan);}
  .pillar-card .icon{font-size: 28px; line-height: 1; margin-bottom: 16px; display: block;}
  .pillar-card h3{font-size: 18px; margin-bottom: 10px;}
  .pillar-card p{font-size: 14px; color: var(--ink-soft); max-width: 300px;}

  /* Horizontal Process */
  .h-process{display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 20px; align-items: start;}
  .h-process-item{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px;}
  .h-process-item .num{font-family:var(--mono); font-size:22px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom: 12px;}
  .h-process-item h3{font-size: 17px; margin-bottom: 8px;}
  .h-process-item p{font-size: 13.5px; color: var(--ink-soft);}
  .h-process-arrow{color: var(--ink-soft); font-size: 24px; margin-top: 50px;}

  /* AI Agent Dev Hero */
  .hero-visual--agent-dev{position: relative;}
  .agent-brain{position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;}
  .brain-core{width: 50px; height: 50px; background: var(--grad); border-radius: 50%; box-shadow: 0 0 25px rgba(124,92,252,0.5);}
  .brain-node{
    position: absolute; width: 12px; height: 12px; background: var(--cyan); border-radius: 50%;
    top: 50%; left: 50%; transform-origin: 0 0;
    animation: brain-orbit 8s infinite linear;
    --angle: calc(var(--i) * 60deg);
    animation-delay: calc(var(--i) * -1.33s);
  }
  @keyframes brain-orbit {
    from { transform: rotate(var(--angle)) translateX(90px); }
    to { transform: rotate(calc(var(--angle) + 360deg)) translateX(90px); }
  }

  /* Agent Type Grid */
  .agent-type-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 50px;}
  .agent-type-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:26px 28px; transition: all .2s ease;}
  .agent-type-card:hover{transform: translateY(-4px); border-color: var(--violet);}
  .agent-type-card h3{font-size: 18px; margin-bottom: 10px;}
  .agent-type-card p{font-size: 14px; color: var(--ink-soft);}

  /* Integration Flow */
  .integration-flow{display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: center; gap: 20px; margin-top: 50px;}
  .flow-system{display: flex; flex-direction: column; gap: 14px; text-align: center;}
  .flow-system div{background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; font-family: var(--mono); font-size: 13px;}
  .flow-ai-layer{background: var(--bg-2); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 30px; text-align: center;}
  .flow-ai-layer .icon{width:38px; height:38px; border-radius:10px; background:var(--grad); margin: 0 auto 16px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#06070A; font-size:15px;}
  .flow-ai-layer h3{font-size: 18px; margin-bottom: 4px;}
  .flow-ai-layer p{font-size: 13px; color: var(--ink-soft);}
  .flow-connector{width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--card-border), var(--card-border) 6px, transparent 6px, transparent 12px);}

  /* App Dev Hero */
  .hero-visual--app-dev{position: relative; height: 320px;}
  .app-screen{
    position: absolute; width: 220px; height: 420px;
    border-radius: 30px; border: 8px solid var(--card);
    background-color: var(--bg-2);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.3);
  }
  .app-screen.ios{transform: rotate(-8deg) translateX(-30px); z-index: 2; background-image: linear-gradient(135deg, rgba(124,92,252,0.1) 0%, rgba(34,211,238,0.1) 100%);}
  .app-screen.android{transform: rotate(6deg) translateX(40px); top: 40px;}

  /* Tech Grid */
  .tech-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-top: 50px;}
  .tech-card{
    background: var(--card); border: 1px solid var(--card-border); border-radius: 10px;
    padding: 20px; text-align: center; font-family: var(--mono); font-size: 14px;
    transition: all .2s ease;
  }
  .tech-card:hover{transform: translateY(-3px); background: var(--bg-2); color: var(--cyan);}

  /* Automation Hero */
  .hero-visual--automation{display: flex; align-items: center; justify-content: center;}
  .automation-flow{display: flex; align-items: center; gap: 15px;}
  .flow-node{
    font-family: var(--mono); font-size: 13px; padding: 14px 20px;
    border: 1px solid var(--card-border); border-radius: 12px;
    background: var(--card);
  }
  .flow-node.ai{background: var(--grad); color: var(--bg); font-weight: 700; border: none;}
  .flow-arrow-anim{
    width: 50px; height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    position: relative;
  }
  .flow-arrow-anim::after{
    content: ''; position: absolute; right: -4px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--cyan);
  }

  /* Problem Grid */
  .problem-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px;}
  .problem-card{background-color: transparent; height: 120px; perspective: 1000px; cursor: pointer;}
  .problem-front, .problem-back{position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: transform 0.6s ease; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; border-radius: var(--radius); border: 1px solid var(--card-border);}
  .problem-front{background: var(--card); font-weight: 600;}
  .problem-back{background: var(--bg-2); transform: rotateY(180deg);}
  .problem-card:hover .problem-front{transform: rotateY(180deg);}
  .problem-card:hover .problem-back{transform: rotateY(360deg);}
  .problem-back h4{font-size: 16px; margin-bottom: 8px;}
  .problem-back p{font-size: 13px; color: var(--ink-soft);}

  /* Data Automation Page Styles */
  .hero-visual--dashboard{position: relative; height: 280px;}
  .dashboard-widget{position: absolute; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2);}
  .dashboard-widget.chart{width: 70%; height: 60%; top: 0; left: 0; transform: rotate(-6deg); background-image: linear-gradient(45deg, rgba(124,92,252,0.05) 0%, rgba(34,211,238,0.05) 100%);}
  .dashboard-widget.table{width: 60%; height: 50%; bottom: 0; right: 0; transform: rotate(4deg);}
  .dashboard-widget.kpi{width: 40%; height: 40%; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(2deg); background: var(--bg-2); text-align: center; padding: 20px;}
  .dashboard-widget.kpi h3{font-size: 14px; color: var(--ink-soft);}
  .dashboard-widget.kpi p{font-size: 28px; font-weight: 700; color: var(--cyan);}
  .h-process--data .h-process-item{text-align: center;}
  .h-process--data .h-process-item .num{margin: 0 auto 12px;}

  /* Customer Assistance Page Styles */
  .chat-demo-window{max-width: 600px; margin: 0 auto; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.2);}
  .chat-header{padding: 12px 20px; border-bottom: 1px solid var(--card-border); font-weight: 600;}
  .chat-body{padding: 20px; display: flex; flex-direction: column; gap: 12px;}
  .chat-bubble{padding: 12px 18px; border-radius: 20px; max-width: 75%; line-height: 1.5;}
  .chat-bubble.agent{background: var(--bg-2); border-top-left-radius: 4px; align-self: flex-start;}
  .chat-bubble.user{background: var(--grad); color: var(--bg); border-top-right-radius: 4px; align-self: flex-end;}
  .chat-bubble.typing{display: flex; gap: 4px; align-items: center; padding: 16px 18px;}
  .chat-bubble.typing span{width: 8px; height: 8px; background: #9aa0b4; border-radius: 50%; animation: typing-bounce 1s infinite;}
  .chat-bubble.typing span:nth-child(2){animation-delay: 0.15s;}
  .chat-bubble.typing span:nth-child(3){animation-delay: 0.3s;}
  @keyframes typing-bounce { 0%, 60%, 100% {transform: translateY(0);} 30% {transform: translateY(-5px);} }
  .platform-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 50px;}
  .platform-card{background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 20px; text-align: center; font-family: var(--mono); font-size: 14px; transition: all .2s ease;}
  .platform-card:hover{transform: translateY(-3px); background: var(--bg-2); color: var(--cyan);}
  .services-grid--3-col{grid-template-columns: repeat(3, 1fr);}
  .services-grid--3-col .svc-card p{font-size: 14px; color: var(--ink-soft);}

  /* Helpdesk Integration Page Styles */
  .hero-visual--integration{display: flex; align-items: center; justify-content: center;}
  .integration-hub{position: relative; width: 250px; height: 250px;}
  .hub-core-ai{width: 80px; height: 80px; border-radius: 50%; background: var(--grad); color: var(--bg); font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
  .hub-logo{
    position: absolute; width: 50px; height: 50px;
    background-color: var(--card); background-size: 60%; background-repeat: no-repeat; background-position: center;
    border: 1px solid var(--card-border); border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    animation: hub-orbit 10s infinite linear;
  }
  .hub-logo.zendesk{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F3F4F7"><path d="M21.12,6.47a2.5,2.5,0,0,0-4.24-2.58L16,4.5l.88.61a2.5,2.5,0,0,0,4.24-2.58ZM12.39,12,16,14.5l.88.61a2.5,2.5,0,0,0,3.36-3.46l-8-5.53a2.5,2.5,0,0,0-3.36,3.46ZM2.88,17.53a2.5,2.5,0,0,0,4.24,2.58L8,19.5l-.88-.61a2.5,2.5,0,0,0-4.24,2.58ZM11.61,12,8,9.5,7.12,8.89a2.5,2.5,0,0,0-3.36,3.46l8,5.53a2.5,2.5,0,0,0,3.36-3.46Z"/></svg>'); animation-delay: -2.5s;}
  .hub-logo.freshdesk{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F3F4F7"><path d="M12,2A10,10,0,0,0,2,12a9.89,9.89,0,0,0,2.22,6.33V22l3.78-3.78A9.9,9.9,0,0,0,12,20a10,10,0,0,0,0-20Zm-2,9.5a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,10,11.5Zm4,0a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,14,11.5Z"/></svg>'); animation-delay: -5s;}
  .hub-logo.hubspot{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F3F4F7"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,15.75a5.75,5.75,0,1,1,5.75-5.75A5.75,5.75,0,0,1,12,17.75Z"/></svg>'); animation-delay: -7.5s;}
  .hub-logo.salesforce{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F3F4F7"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,15a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z"/></svg>');}
  @keyframes hub-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(110px) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(110px) rotate(-360deg); }
  }

  /* Triage Workflow Visual */
  .triage-workflow{display: grid; grid-template-columns: 1fr auto 1fr auto 1.5fr; align-items: center; gap: 20px; margin-top: 50px; background: var(--card); padding: 30px; border-radius: var(--radius); border: 1px solid var(--card-border);}
  .triage-input h3, .triage-output h3{font-size: 16px; margin-bottom: 14px; text-align: center;}
  .ticket-stream{display: flex; flex-direction: column; gap: 10px;}
  .ticket{font-family: var(--mono); font-size: 12px; background: var(--bg-2); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--card-border);}
  .triage-arrow{width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--card-border), var(--card-border) 6px, transparent 6px, transparent 12px);}
  .triage-ai-core{text-align: center;}
  .triage-ai-core .icon{width:50px; height:50px; border-radius:50%; background:var(--grad); margin: 0 auto 12px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#06070A; font-size:18px; box-shadow: 0 0 20px rgba(124,92,252,0.4);}
  .triage-ai-core h4{font-size: 16px;}
  .triage-ai-core p{font-size: 12px; color: var(--ink-soft);}
  .triage-output{display: flex; flex-direction: column; gap: 18px;}
  .output-path{border-left: 3px solid; padding-left: 18px;}
  .output-path:first-child{border-color: var(--cyan);}
  .output-path:last-child{border-color: var(--violet);}
  .output-path h3{text-align: left; font-size: 15px; margin-bottom: 4px;}
  .output-path p{font-size: 13px; color: var(--ink-soft);}

  @media (max-width: 1024px) {
    .triage-workflow{grid-template-columns: 1fr; gap: 30px;}
    .triage-arrow{transform: rotate(90deg); margin: 0 auto;}
    .triage-input, .triage-output{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%;}
    .triage-input h3{grid-column: 1 / -1;}
    .triage-output{display: flex; flex-direction: column;}
  }

  /* Icon Grid */
  .icon-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px;}
  .icon-grid-item{text-align: center;}
  .icon-grid-item .icon{font-size: 36px; line-height: 1; margin-bottom: 16px;}
  .icon-grid-item h3{font-size: 18px; margin-bottom: 8px;}
  .icon-grid-item p{font-size: 14px; color: var(--ink-soft); max-width: 220px; margin: 0 auto;}

  /* Stakeholder Grid */
  .stakeholder-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px;}
  .stakeholder-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:26px 24px; text-align: center;}
  .stakeholder-card .icon{font-size: 32px; line-height: 1; margin-bottom: 16px; display: block;}
  .stakeholder-card h3{font-size: 18px; margin-bottom: 10px;}
  .stakeholder-card p{font-size: 14px; color: var(--ink-soft); max-width: 220px; margin: 0 auto;}


  /* BG Section */
  .bg-section{
    background: var(--bg-2);
    border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border);
  }

  /* marquee ticker */
  .ticker-wrap{
    border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);
    padding:16px 0; overflow:hidden; background:rgba(255,255,255,0.015);
  }
  .ticker{display:flex; gap:40px; width:max-content; animation:scroll 26s linear infinite;}
  .ticker span{font-family:var(--mono); font-size:13px; color:var(--ink-soft); white-space:nowrap; display:flex; align-items:center; gap:10px;}
  .ticker span::before{content:'◆'; color:var(--violet); font-size:9px;}
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){ .ticker{animation:none;} }

  /* STATS */
  .stats{padding:70px 0 20px;}
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--card-border); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden;}
  .stat{background:var(--card); padding:30px 24px;}
  .stat .num{font-size:30px; font-weight:800;}
  .stat .lab{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:6px;}

  section{padding:90px 0;}
  .no-pad-top{padding-top:0;}
  .sec-head{max-width:620px; margin:0 auto 54px; text-align:center;}
  .sec-head h2{font-size:clamp(28px,3.4vw,42px); margin-top:16px;}
  .sec-head p{color:var(--ink-soft); margin-top:14px; font-size:15.5px;}
  .sec-head--left{max-width:none; text-align:left; margin-bottom:36px;}
  .sec-head--left h2{margin-top:0;}
  .sec-head--more-margin{margin-top:70px;}


  /* COMPARE */
  .compare{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  .cmp-card{border-radius:var(--radius); padding:32px 28px; border:1px solid var(--card-border);}
  .cmp-bad{background:rgba(255,79,163,0.05);}
  .cmp-good{background:rgba(34,211,238,0.06); border-color:rgba(34,211,238,0.3); position:relative;}
  .cmp-good::before{content:'RECOMMENDED'; position:absolute; top:-11px; left:28px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; background:var(--grad); color:#06070A; padding:4px 10px; border-radius:6px; font-weight:700;}
  .cmp-card h3{font-size:19px; margin-bottom:18px;}
  .cmp-card p{color:var(--ink-soft); font-size:15.5px;}
  .cmp-card ul{list-style:none;}
  .cmp-card li{padding:10px 0; border-top:1px solid var(--card-border); font-size:14.5px; color:var(--ink-soft); display:flex; gap:10px;}
  .cmp-card li:first-child{border-top:none;}
  .cmp-bad li::before{content:'✕'; color:#FF6B7A;}
  .cmp-good li::before{content:'✓'; color:var(--cyan);}

  /* SERVICES */
  .services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  .services-grid--more-margin{margin-top:18px;}
  .svc-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:30px 28px; transition:border-color .2s ease, transform .2s ease;
    position:relative; overflow:hidden;
  }
  .svc-card:hover{border-color:rgba(124,92,252,0.4); transform:translateY(-3px);}
  .svc-card .icon{width:38px; height:38px; border-radius:10px; background:var(--grad); margin-bottom:18px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#06070A; font-size:15px;}
  .svc-card h3{font-size:19px; margin-bottom:14px;}
  .svc-card ul{list-style:none;}
  .svc-card li{font-size:14px; color:var(--ink-soft); padding:8px 0; border-top:1px solid var(--card-border);}
  .services-grid--interactive li{cursor:pointer; transition: color .2s ease;}
  .services-grid--interactive li:hover{color:var(--ink);}
  .svc-card li:first-child{border-top:none;}

  /* Unique Feature Layout for CMS Page */
  .feature-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;}
  .feature-text h2{font-size:clamp(28px,3.2vw,40px); margin:16px 0 20px;}
  .feature-text p{color:var(--ink-soft); font-size:15.5px; max-width: 500px; margin-bottom: 24px;}
  .feature-list{list-style:none; display:flex; flex-direction:column; gap:16px; font-size:14.5px;}
  .feature-list li{display:flex; align-items:flex-start; gap:12px;}
  .feature-list li::before{content:'✓'; color:var(--cyan); font-weight: 600; margin-top: 2px;}
  .feature-visual{display:flex; flex-direction:column; gap:18px;}
  .visual-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:24px 28px;}
  .visual-card .icon{margin-bottom:14px;}
  .visual-card h3{font-size:18px; margin-bottom:8px;}
  .visual-card p{font-size:14px; color:var(--ink-soft);}

  .feature-card-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}
  .feature-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:26px 28px;
  }
  .feature-card h3{font-size:18px; margin-bottom:12px;}
  .feature-card p{font-size:14px; color:var(--ink-soft); max-width: 380px;}

  /* Unique Timeline Layout for Affiliate Page */
  .timeline{position:relative; max-width: 700px; margin: 0 auto;}
  .timeline::before{content:''; position:absolute; left:24px; top:10px; bottom:10px; width:2px; background: linear-gradient(to bottom, var(--violet), var(--cyan)); opacity: 0.3;}
  .timeline-item{position:relative; padding-left: 70px; padding-bottom: 50px;}
  .timeline-item:last-child{padding-bottom: 0;}
  .timeline-num{font-size: 24px; font-weight: 700; position:absolute; left:0; top:-2px; width: 50px; height: 50px; display:flex; align-items:center; justify-content:center;}
  .timeline-content h3{font-size: 19px; margin-bottom: 10px;}
  .timeline-content p{color:var(--ink-soft); font-size:15px;}
  .alt-layout .lead{max-width: 100%;}

  /* Unique Tabs Layout for Consulting Page */
  .tabs-container{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden;}
  .tab-nav{display:flex; border-bottom: 1px solid var(--card-border);}
  .tab-link{
    flex:1; background:none; border:none; color:var(--ink-soft);
    padding: 18px 20px; font-family: var(--sans); font-size: 15px; font-weight: 600;
    cursor:pointer; transition: color .2s ease, background .2s ease;
    border-bottom: 2px solid transparent;
  }
  .tab-link:hover{color:var(--ink);}
  .tab-link.active{
    color:var(--ink);
    background: rgba(255,255,255,0.03);
    border-bottom-color: var(--cyan);
  }
  .tab-content-wrapper{padding: 32px 36px;}
  .tab-content{display:none;}
  .tab-content.active{display:block;}
  .tab-content h3{font-size: 20px; margin-bottom: 14px;}
  .tab-content p{color:var(--ink-soft); font-size:15.5px; max-width: 600px;}

  @media (max-width: 600px) {
    .tab-nav{flex-direction: column;}
    .tab-link{border-bottom: 1px solid var(--card-border);}
    .tab-link:last-child{border-bottom: none;}
    .tab-link.active{border-bottom-color: var(--card-border); border-left: 2px solid var(--cyan);}
  }
  @media (max-width: 900px) {
    /* Hero Split */
    .hero--split .wrap{grid-template-columns: 1fr;}
    .hero-text{text-align: center;}
    .hero--split p.lead{margin: 0 auto 34px auto;}
    .hero-visual--school{margin-top: 40px;}
    .hero--split .hero-actions{justify-content: center; margin-bottom: 0;}
    .hero-visual--school .module-hub{transform: scale(0.9);}

    /* Grids */
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .compare{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns: 1fr;}
    .feature-card-grid{grid-template-columns: 1fr;}
    .timeline::before{left: 50%; transform: translateX(-50%);}
    .timeline-item{padding-left: 0; text-align: center;}
    .timeline-num{position:static; margin: 0 auto 20px;}
    .services-grid{grid-template-columns:1fr;}
    .icon-grid{grid-template-columns: repeat(2, 1fr); gap: 30px;}
    .stakeholder-grid{grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .steps{grid-template-columns:repeat(2,1fr);}
    .services-grid--3-col{grid-template-columns: 1fr;}
    .agent-type-grid{grid-template-columns: 1fr;}
    .problem-grid{grid-template-columns: repeat(2, 1fr);}
    .integration-flow{grid-template-columns: 1fr; gap: 30px;}
    .flow-connector{transform: rotate(90deg); margin: -10px auto;}
    .pillar-grid{grid-template-columns: 1fr;}
    .h-process{grid-template-columns: 1fr; text-align: center;}
    .h-process-arrow{transform: rotate(90deg); margin: 0 auto;}
    .test-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .nav-links{position:fixed; top:78px; left:14px; right:14px; background:var(--bg-2); flex-direction:column; padding:20px; gap:16px; border-radius:16px; border:1px solid var(--card-border); transform:translateY(-160%); transition:transform .2s ease;}
    .nav-links.open{transform:translateY(0);}
    .nav-toggle{display:flex;}
  }

  /* PROCESS */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .step{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:26px 22px;}
  .step .num{font-family:var(--mono); font-size:22px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .step h3{font-size:17px; margin:12px 0 8px;}
  .step p{font-size:13.5px; color:var(--ink-soft);}

  /* STACK marquee */
  .stack-ticker-wrap{overflow:hidden; padding:20px 0;}
  .stack-ticker{display:flex; gap:50px; width:max-content; animation:scroll 20s linear infinite;}
  .stack-ticker span{font-family:var(--mono); font-size:16px; color:var(--ink-soft); font-weight:500;}

  /* TESTIMONIALS */
  .test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .test-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:26px 24px; animation: float 6s ease-in-out infinite;}
  .test-grid .test-card:nth-child(2) { animation-delay: -2s; }
  .test-grid .test-card:nth-child(3) { animation-delay: -4s; }
  .test-card .stars{color:var(--cyan); font-size:13px; margin-bottom:14px; letter-spacing:2px;}
  .test-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:16px;}
  .test-card .who{font-family:var(--mono); font-size:12.5px; color:var(--ink);}
  .note-box{margin-top:24px; padding:16px 20px; border:1px dashed rgba(255,255,255,0.18); border-radius:12px; font-family:var(--mono); font-size:13px; color:var(--ink-soft);}
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
    0% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-8px) translateX(4px); }
    50% { transform: translateY(0px) translateX(0px); }
    75% { transform: translateY(8px) translateX(-4px); }
    100% { transform: translateY(0px) translateX(0px); }
  }
  @keyframes dashboard-intro {
    from { transform: rotateX(60deg) rotateZ(-15deg) translateY(40px); opacity: 0; }
    to { transform: rotateX(45deg) rotateZ(-15deg) translateY(0); opacity: 1; }
  }

  /* FAQ */
  .faq{max-width:760px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--card-border);}
  .faq-q{
    /* Reset button styles */
    background: none; border: none; font: inherit; color: inherit; text-align: left;
    width: 100%;
    padding:22px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15.5px;
  }
  .faq-q .plus{color:var(--cyan); font-family:var(--mono); transition:transform .2s ease;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }
  .faq-item.open .faq-a {
    grid-template-rows: 1fr;
  }
  .faq-a > div, .faq-a > p {
    overflow: hidden;
  }
  .faq-a p{
    padding:0 4px 22px; color:var(--ink-soft); font-size:14.5px; max-width:640px;
    margin-top: -10px; /* Adjust for smoother visual transition */
  }

  /* CTA BANNER */
  .cta-banner{
    border-radius:24px; padding:64px 40px; text-align:center;
    background:linear-gradient(135deg, rgba(124,92,252,0.16), rgba(34,211,238,0.12));
    border:1px solid rgba(124,92,252,0.3);
  }
  .cta-banner h2{font-size:clamp(26px,3.6vw,40px); margin-bottom:16px;}
  .cta-banner p{color:var(--ink-soft); margin-bottom:30px;}

  /* CONTACT */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
  .contact-grid h2{font-size:clamp(28px,3.2vw,40px); margin:16px 0 18px;}
  .contact-grid p{color:var(--ink-soft); max-width:420px; font-size:15.5px;}
  .contact-grid .form button{align-self:flex-start;}
  .contact-detail{margin-top:26px; font-family:var(--mono); font-size:14px;}
  .contact-detail div{padding:12px 0; border-top:1px solid var(--card-border);}
  .contact-detail div:first-child{border-top:none;}
  .contact-detail b{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:4px;}
  .map-container{border-radius: 16px; overflow: hidden; border: 1px solid var(--card-border); line-height: 0;}
  .map-container iframe{border:0;}
  .form{display:flex; flex-direction:column; gap:14px;}
  .form input, .form textarea{
    background:var(--card); border:1px solid var(--card-border); color:var(--ink);
    padding:14px 16px; font-family:var(--sans); font-size:14.5px; border-radius:10px;
  }
  .form input::placeholder, .form textarea::placeholder{color:#5B617A;}
  .form input:focus, .form textarea:focus{outline:none; border-color:var(--violet);}

  /* MODAL */
  .modal-overlay{position:fixed; inset:0; background:rgba(8,9,13,0.7); backdrop-filter:blur(8px); z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s ease;}
  .modal-overlay.open{opacity:1; pointer-events:auto;}
  .modal-content{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:32px 36px; max-width:520px; width:100%; position:relative;
    transform:scale(0.95); transition:transform .3s ease;
  }
  .modal-overlay.open .modal-content{transform:scale(1);}
  .modal-content h3{font-size:22px; margin-bottom:16px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .modal-content p{color:var(--ink-soft); line-height:1.6;}
  .modal-close{
    position:absolute; top:12px; right:12px;
    background:none; border:none; color:var(--ink-soft);
    font-size:28px; line-height:1; cursor:pointer;
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition: background .2s ease, color .2s ease;
  }
  .modal-close:hover{background:rgba(255,255,255,0.05); color:var(--ink);}


  footer{padding:30px 0; border-top:1px solid var(--card-border); color:var(--ink-soft); font-family:var(--mono); font-size:12px;}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
  .reveal.in{opacity:1; transform:none;}
  
  /* Staggered reveal animations */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .reveal-stagger.in > * { opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.15s; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.2s; }

  @media (max-width: 500px) {
    .stakeholder-grid{grid-template-columns: 1fr;}
    .icon-grid{grid-template-columns: 1fr;}
    .steps{grid-template-columns: 1fr;}
    .hero-visual--dashboard{margin-top: 50px;}
    .hero-visual--automation{margin-top: 50px;}
    .problem-grid{grid-template-columns: 1fr;}
    .hero-visual--app-dev{margin-top: 60px; transform: scale(0.8);}
    .hero-visual--design{margin-top: 40px;}
    .hero-visual--school .module-hub{transform: scale(0.75);}
    .triage-input, .triage-output{grid-template-columns: 1fr;}
    .triage-input h3, .triage-output h3{text-align: center;}
  }

  /* GEO Page Styles */
  .search-evolution-visual{display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: flex-start; margin-top: 50px;}
  .search-era{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px;}
  .search-era h3{margin-bottom: 20px; text-align: center;}
  .search-era > p{font-family: var(--mono); font-size: 12px; text-align: center; color: var(--ink-soft); margin-top: 20px;}
  .seo-results{display: flex; flex-direction: column; gap: 12px;}
  .result-link{height: 40px; background: var(--bg-2); border-radius: 8px;}
  .geo-results .ai-snapshot{background: var(--bg-2); border-radius: 8px; padding: 16px;}
  .ai-snapshot p{font-size: 14px; color: var(--ink-soft); margin-bottom: 12px;}
  .source-chip{display: inline-block; font-family: var(--mono); font-size: 11px; background: var(--grad); color: var(--bg); padding: 4px 10px; border-radius: 6px; font-weight: 700;}
  .evolution-arrow{font-size: 30px; color: var(--ink-soft); margin-top: 80px;}

  @media (max-width: 768px) {
    .search-evolution-visual{grid-template-columns: 1fr;}
    .evolution-arrow{transform: rotate(90deg); margin: 0 auto;}
  }

  /* AEO Page Styles */
  .bento-grid{display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 18px; margin-top: 50px;}
  .bento-card{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden;}
  .bento-card h3{font-size: 17px; margin-bottom: 8px;}
  .bento-card p{font-size: 13.5px; color: var(--ink-soft);}
  .bento-card.col-span-2{grid-column: span 2;}
  .bento-card.row-span-2{grid-row: span 2;}

  @media (max-width: 900px) {
    .bento-grid{grid-template-columns: repeat(2, 1fr);}
  }
  @media (max-width: 600px) {
    .bento-grid{grid-template-columns: 1fr; grid-auto-rows: auto;}
    .bento-card.col-span-2, .bento-card.row-span-2{grid-column: span 1; grid-row: span 1;}
  }

  /* WhatsApp Page Styles */
  .hero-visual--whatsapp{display: flex; align-items: center; justify-content: center;}
  .whatsapp-phone{width: 280px; height: 560px; background: #181A20; border-radius: 40px; border: 10px solid var(--card); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3); padding: 10px;}
  .whatsapp-screen{background: #0E1816; height: 100%; border-radius: 30px; display: flex; flex-direction: column;}
  .wa-header{background: #202C33; padding: 12px 20px; font-weight: 600; border-top-left-radius: 30px; border-top-right-radius: 30px;}
  .wa-chat{padding: 15px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1;}
  .wa-bubble{padding: 8px 14px; border-radius: 12px; max-width: 80%; line-height: 1.4; font-size: 14px;}
  .wa-bubble.received{background: #202C33; border-top-left-radius: 4px; align-self: flex-start;}
  .wa-bubble.sent{background: #005C4B; border-top-right-radius: 4px; align-self: flex-end;}

  @media (max-width: 900px) {
    .hero-visual--whatsapp{margin-top: 50px;}
  }
  @media (max-width: 500px) {
    .hero-visual--whatsapp{transform: scale(0.9);}
  }

  /* LLM Fine-Tuning Page Styles */
  .hero-visual--tuning{display: flex; align-items: center; justify-content: space-between; width: 100%;}
  .model-before, .model-after{width: 120px; height: 120px; border: 1px solid var(--card-border); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; text-align: center; padding: 10px;}
  .model-before{background: var(--card);}
  .model-after{background: var(--bg-2); border-color: var(--violet); font-weight: 700;}
  .tuning-process{flex-grow: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--card-border), var(--card-border) 6px, transparent 6px, transparent 12px); margin: 0 20px; position: relative; text-align: center;}
  .tuning-process span{position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; color: var(--ink-soft); background: var(--bg); padding: 0 8px;}

  @media (max-width: 900px) {
    .hero-visual--tuning{flex-direction: column; gap: 20px; margin-top: 40px;}
    .tuning-process{width: 2px; height: 50px; margin: 0;}
    .tuning-process span{top: 50%; left: -10px; transform: translateY(-50%) rotate(-90deg); transform-origin: center; width: max-content;}
  }
  
  /* Sticky Feature Section */
  .sticky-feature-section{background: var(--bg-2); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border);}
  .sticky-feature-wrapper{display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start;}
  .sticky-feature-content{display: flex; flex-direction: column; gap: 120px; padding: 40px 0;}
  .feature-step h3{font-size: 22px; margin-bottom: 14px;}
  .feature-step p{color: var(--ink-soft);}
  .sticky-feature-visuals{position: sticky; top: 120px; height: 400px;}
  .sticky-visual-item{position: absolute; inset: 0; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 18px; opacity: 0; transition: opacity .4s ease; padding: 30px; text-align: center;}
  .sticky-visual-item.active{opacity: 1;}

  @media (max-width: 900px) {
    .sticky-feature-wrapper{grid-template-columns: 1fr;}
    .sticky-feature-visuals{position: static; height: 250px; margin-top: 30px;}
    .sticky-feature-content{gap: 60px;}
    .h-process--5-step{grid-template-columns: 1fr;}
  }

  /* LLM Tuning Hero */
  .hero-visual--llm-tuning{position: relative; width: 100%; height: 200px;}
  .llm-node{position: absolute; top: 50%; transform: translateY(-50%); width: 120px; height: 120px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; text-align: center; padding: 10px;}
  .llm-node.base{left: 0; background: var(--card); border: 1px solid var(--card-border);}
  .llm-node.fine-tuned{right: 0; background: var(--bg-2); border: 1px solid var(--violet); font-weight: 700;}
  .llm-data-stream{position: absolute; top: 50%; left: 130px; right: 130px; height: 2px; background: repeating-linear-gradient(90deg, var(--card-border), var(--card-border) 4px, transparent 4px, transparent 8px); animation: data-flow 1s linear infinite;}
  @keyframes data-flow { from { background-position-x: 0; } to { background-position-x: -8px; } }

  .h-process--5-step{grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;}

  .compare .cmp-card ul {
    margin-top: 18px;
  }
  .compare .cmp-card.cmp-bad {
    background: rgba(255, 59, 78, 0.05);
  }
  .compare .cmp-card.cmp-good {
    background: rgba(255, 107, 69, 0.06);
    border-color: rgba(255, 107, 69, 0.3);
  }

  #ai-integration-grid.services-grid--3-col {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 900px) { #ai-integration-grid.services-grid--3-col { grid-template-columns: 1fr; } }

  /* Legacy Modernization Page */
  .hero-visual--legacy{position: relative; display: flex; align-items: center; justify-content: space-between;}
  .legacy-box{width: 140px; height: 140px; border: 1px solid var(--card-border); background: var(--card); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; text-align: center; padding: 10px; color: var(--ink-soft);}
  .modernization-path{flex-grow: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--card-border), var(--card-border) 4px, transparent 4px, transparent 8px); margin: 0 20px; animation: data-flow 1s linear infinite;}
  .modern-stack{display: flex; flex-direction: column; gap: 10px;}
  .stack-item{background: var(--bg-2); border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 16px; font-family: var(--mono); font-size: 13px; border-left-width: 3px;}
  .stack-item:nth-child(1){border-left-color: var(--violet);}
  .stack-item:nth-child(2){border-left-color: var(--cyan);}
  .stack-item:nth-child(3){border-left-color: var(--pink);}

  .v-timeline{position: relative; max-width: 700px; margin: 0 auto;}
  .v-timeline::before{content: ''; position: absolute; left: 24px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(to bottom, var(--violet), var(--cyan)); opacity: 0.3;}
  .v-timeline-item{position: relative; padding-left: 80px; padding-bottom: 40px;}
  .v-timeline-item:last-child{padding-bottom: 0;}
  .v-timeline-num{position: absolute; left: 0; top: 0; width: 50px; height: 50px; border: 2px solid var(--card-border); background: var(--bg-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-family: var(--mono); color: var(--cyan);}
  .v-timeline-content h3{font-size: 19px; margin-bottom: 10px;}
  .v-timeline-content p{color:var(--ink-soft); font-size: 15px;}

  @media (max-width: 900px) {
    .v-timeline::before{left: 15px;}
    .v-timeline-item{padding-left: 50px;}
    .v-timeline-num{transform: none;}
    .hero-visual--legacy{margin-top: 60px;}
  }
  @media (max-width: 500px) {
    .hero-visual--legacy{flex-direction: column; height: auto; gap: 20px;}
    .modernization-path{width: 2px; height: 40px; margin: 0;}
  }

  /* AI-Powered Business Applications Page */
  .hero-visual--ai-dashboard{position: relative; perspective: 1500px; min-height: 350px;}
  .dashboard-base{width: 100%; height: 280px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); transform: rotateX(45deg) rotateZ(-15deg); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.3); display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 40px 1fr; padding: 10px; gap: 10px;}
  .dashboard-base{width: 100%; height: 280px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); transform: rotateX(45deg) rotateZ(-15deg); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.3); display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 40px 1fr; padding: 10px; gap: 10px; animation: dashboard-intro 1s ease-out .2s backwards;}
  .db-header{grid-column: 1 / -1; background: rgba(0,0,0,0.15); border-radius: 8px;}
  .db-sidebar{background: rgba(0,0,0,0.15); border-radius: 8px;}
  .db-chart{background: linear-gradient(45deg, rgba(124,92,252,0.1), rgba(255,107,69,0.1)); border-radius: 8px;}
  .dashboard-ai-card{position: absolute; background: var(--bg-2); border: 1px solid var(--card-border); padding: 14px 18px; border-radius: 12px; font-family: var(--mono); font-size: 13px; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.3); animation: float 8s ease-in-out infinite;}
  #ai-card-1{top: 20px; right: 0; animation-delay: -4s;}
  #ai-card-2{bottom: 60px; left: 0;}
  
  .architecture-stack{display: flex; flex-direction: column; gap: 4px; perspective: 1000px; max-width: 700px; margin: 50px auto 0;}
  .arch-layer{background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px 28px; transition: transform .3s ease; transform-origin: bottom;}
  .arch-layer:hover{transform: rotateX(-10deg) translateY(-10px);}
  .arch-layer .layer-label{font-weight: 700; margin-bottom: 6px;}
  .arch-layer p{font-size: 14px; color: var(--ink-soft);}
  #ai-layer{background: var(--bg-2); border-color: var(--violet); position: relative; z-index: 2;}
  #ai-layer .layer-label{color: var(--violet);}

  .feature-spotlight-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 50px;}
  .spotlight-card{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 28px; position: relative; overflow: hidden;}
  .spotlight-card::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 0, rgba(124,92,252,0.15), transparent 70%); opacity: 0; transition: opacity .3s ease;}
  .spotlight-card:hover::before{opacity: 1;}
  .spotlight-card h3{font-size: 18px; margin-bottom: 10px;}
  .spotlight-card p{font-size: 14px; color: var(--ink-soft);}
  @media (max-width: 768px) { .feature-spotlight-grid{grid-template-columns: 1fr;} }

  /* AI Personalization Page */
  .hero-visual--personalization{position: relative; perspective: 1200px; min-height: 300px;}
  .p13n-base-site{width: 80%; height: 200px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); transform: rotateX(50deg) rotateZ(-10deg) translateY(40px);}
  .p13n-user-profile{position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; animation: float 10s ease-in-out infinite;}
  #user-1{top: 0; left: 20%; animation-delay: -5s;}
  #user-2{top: 30%; right: 10%;}
  .p13n-personalized-view{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--grad); color: var(--bg); padding: 14px 20px; border-radius: 12px; font-family: var(--mono); font-weight: 700; font-size: 13px; box-shadow: 0 0 30px rgba(124,92,252,0.4);}

  .capability-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 50px;}
  .capability-card{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 28px; border-bottom-width: 3px; transition: transform .2s ease, border-color .2s ease;}
  .capability-card:hover{transform: translateY(-4px); border-bottom-color: var(--cyan);}
  .capability-card h3{font-size: 18px; margin-bottom: 10px;}
  .capability-card p{font-size: 14px; color: var(--ink-soft);}
  @media (max-width: 768px) { .capability-grid{grid-template-columns: 1fr;} }

  .h-process--3-step{grid-template-columns: 1fr auto 1fr auto 1fr;}
  @media (max-width: 900px) { .h-process--3-step{grid-template-columns: 1fr;} }

  /* Speed Optimization Page */
  .hero-visual--perf-dashboard{position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px;}
  .perf-gauge{position: relative; width: 200px; height: 200px;}
  .gauge-circle{width: 100%; height: 100%; transform: rotate(-90deg);}
  .gauge-bg{fill: none; stroke: var(--card); stroke-width: 12;}
  .gauge-fg{fill: none; stroke: var(--cyan); stroke-width: 12; stroke-dasharray: 339.292; stroke-dashoffset: 339.292; animation: fill-gauge 2s ease-out forwards 0.5s; stroke-linecap: round;}
  @keyframes fill-gauge { to { stroke-dashoffset: calc(339.292 * (1 - 0.96)); } }
  .gauge-data{position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
  .gauge-score{font-size: 48px; font-weight: 800;}
  .gauge-label{font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: -4px;}
  .perf-card{position: absolute; background: var(--bg-2); border: 1px solid var(--card-border); padding: 12px 16px; border-radius: 10px; font-family: var(--mono); font-size: 13px; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.2); animation: float 8s ease-in-out infinite;}
  #lcp-card{top: 20px; left: 0; animation-delay: -2s;}
  #cls-card{bottom: 20px; right: 0;}

  .vitals-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px;}
  .vital-card{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 28px;}
  .vital-card h3{font-size: 24px; font-family: var(--mono); font-weight: 700; margin-bottom: 4px;}
  .vital-card h4{font-size: 14px; margin-bottom: 12px;}
  .vital-card p{font-size: 13.5px; color: var(--ink-soft);}
  @media (max-width: 768px) { .vitals-grid{grid-template-columns: 1fr;} }

  .h-process--4-step{grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;}
  @media (max-width: 900px) { .h-process--4-step{grid-template-columns: 1fr;} }

  .comparison-slider{position: relative; width: 100%; height: 400px; border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; background: var(--card);}
  .comparison-item{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;}
  #after-view{clip-path: inset(0 0 0 50%);}
  .slider-handle{position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--cyan); transform: translateX(-50%); cursor: ew-resize;}
  .slider-handle::before{content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: var(--cyan); color: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;}
  .comparison-label{position: absolute; top: 20px; font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 8px;}
  #before-view .comparison-label{left: 20px; background: rgba(255,59,78,0.1); color: var(--pink);}
  #after-view .comparison-label{right: 20px; background: rgba(34,211,238,0.1); color: var(--cyan);}
  .loader-anim{width: 50px; height: 50px; border: 5px solid var(--card-border); border-top-color: var(--pink); border-radius: 50%; animation: spin 3s linear infinite;}
  .content-anim{width: 80%; height: 80%; background: var(--bg-2); border-radius: 12px;}

  /* Website Maintenance Page */
  .hero-visual--maintenance{position: relative; height: 300px;}
  .maintenance-dashboard{position: relative; width: 100%; height: 100%; transform-style: preserve-3d; perspective: 1200px;}
  .dash-widget{position: absolute; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2); text-align: center;}
  .dash-widget h4{font-size: 13px; font-family: var(--mono); color: var(--ink-soft); margin-bottom: 8px;}

  /* Custom Web Dev Page */
  .hero-visual--browser-mockup{display: flex; align-items: center; justify-content: center;}
  .browser-window-dev{width: 100%; max-width: 500px; height: 300px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.2);}
  .browser-header-dev{height: 36px; background: var(--bg-2); border-bottom: 1px solid var(--card-border);}
  .browser-content-dev{height: calc(100% - 36px); background: linear-gradient(135deg, rgba(124,92,252,0.05), rgba(34,211,238,0.05));}
  .bento-grid--web-dev{grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto;}
  .bento-grid--web-dev .bento-card{padding: 26px 28px;}

  /* Game Dev Page */
  .game-dev-page .eyebrow{background: rgba(255,107,69,0.1); border-color: rgba(255,107,69,0.25); color: var(--cyan);}
  .game-dev-page .eyebrow::before{background: var(--cyan); box-shadow: 0 0 8px var(--cyan);}
  .hero-visual--game-dev{display: flex; align-items: center; justify-content: center;}
  .game-character{width: 150px; height: 150px; background: var(--grad-2); border-radius: 50%; animation: float 6s ease-in-out infinite; box-shadow: 0 0 40px rgba(255,59,78,0.4);}
  
  .game-stats-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;}
  .game-stat{background: var(--card); padding: 30px 24px; text-align: center;}
  .stat-value{font-size: 36px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;}
  .stat-label{font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: 6px;}
  @media (max-width: 768px) { .game-stats-grid{grid-template-columns: 1fr;} }

  .bento-grid--game-dev .bento-card{text-align: center;}
  .bento-grid--game-dev .bento-card:hover{border-color: var(--pink);}

  .level-progress-timeline{position: relative; max-width: 700px; margin: 50px auto 0;}
  .level-progress-timeline::before{content: ''; position: absolute; left: 24px; top: 10px; bottom: 10px; width: 2px; background: var(--card-border);}
  .level-step{position: relative; padding-left: 80px; padding-bottom: 40px;}
  .level-step:last-child{padding-bottom: 0;}
  .level-num{position: absolute; left: 0; top: 0; width: 50px; height: 50px; border: 2px solid var(--card-border); background: var(--bg-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-family: var(--mono); color: var(--cyan); transition: all .3s ease;}
  .level-step.in .level-num{border-color: var(--cyan); box-shadow: 0 0 15px rgba(255,107,69,0.4);}
  .level-content h3{font-size: 19px; margin-bottom: 10px;}
  .level-content p{color: var(--ink-soft); font-size: 15px;}
  @media (max-width: 900px) { .level-progress-timeline::before{left: 15px;} .level-step{padding-left: 50px;} }

  /* ORM Page */
  .orm-page .eyebrow{background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.25); color: var(--cyan);}
  .orm-page .eyebrow::before{background: var(--cyan); box-shadow: 0 0 8px var(--cyan);}
  .hero-visual--orm{display: flex; align-items: center; justify-content: center;}
  .reputation-dashboard{width: 100%; max-width: 450px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; position: relative; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.2);}
  .rep-score-widget{text-align: center; background: var(--bg-2); padding: 20px; border-radius: 12px; margin-bottom: 20px;}
  .rep-score-label{font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 4px;}
  .rep-score-value{font-size: 48px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;}
  .sentiment-widget{display: flex; gap: 4px; height: 24px; border-radius: 6px; overflow: hidden;}
  .sentiment-bar{font-family: var(--mono); font-size: 11px; color: var(--bg); font-weight: 700; display: flex; align-items: center; padding: 0 10px; animation: grow-bar 1.5s ease-out forwards;}
  .sentiment-bar.positive{background: var(--cyan); width: var(--value);}
  .sentiment-bar.negative{background: var(--pink); width: var(--value); justify-content: flex-end;}
  @keyframes grow-bar { from { width: 0; } }
  .orm-notification{position: absolute; background: var(--bg-2); border: 1px solid var(--card-border); padding: 10px 14px; border-radius: 10px; font-family: var(--mono); font-size: 12px; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.2); animation: float 10s ease-in-out infinite;}
  #notif-1{top: -20px; left: 20px; animation-delay: -5s;}
  #notif-2{bottom: -20px; right: 20px;}

  .benefit-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 50px;}
  .benefit-card{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 28px;}
  .benefit-card h3{font-size: 18px; margin-bottom: 10px;}
  .benefit-card p{font-size: 14px; color: var(--ink-soft);}
  @media (max-width: 768px) { .benefit-grid{grid-template-columns: 1fr;} }

  .orm-workflow{display: flex; flex-direction: column; gap: 18px; max-width: 700px; margin: 50px auto 0;}
  .orm-step{display: flex; align-items: center; gap: 20px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px 24px;}
  .step-num{width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--card-border); font-family: var(--mono); font-weight: 700; color: var(--cyan);}
  .step-content h3{font-size: 17px; margin-bottom: 4px;}
  .step-content p{font-size: 13.5px; color: var(--ink-soft);}
  .dash-widget p{font-size: 28px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;}
  .dash-widget.speed{top: 20px; left: 0; transform: rotateZ(-8deg);}
  .dash-widget.security{top: 0; right: 10%; transform: rotateZ(10deg);}
  .dash-widget.uptime{bottom: 40px; left: 25%; transform: rotateZ(5deg);}
  .dash-notification{position: absolute; bottom: 0; right: 0; background: var(--bg-2); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 18px; font-family: var(--mono); font-size: 13px; transform: rotateZ(-5deg); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.2);}
  .problem-grid--3-col{grid-template-columns: repeat(3, 1fr);}
  @media (max-width: 900px) { .problem-grid--3-col{grid-template-columns: 1fr;} }

  .checklist-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 50px;}
  .check-item{background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 18px 22px; font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 12px;}
  .check-item::before{content: '✓'; color: var(--cyan); font-weight: 700;}

  .pricing-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: flex-start;}
  .plan-card{background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 30px; text-align: center;}
  .plan-card.popular{border-color: var(--violet); transform: scale(1.05); position: relative;}
  .popular-badge{position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--grad); color: var(--bg); font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 6px;}
  .plan-card h3{font-size: 20px; margin-bottom: 14px;}
  .plan-card .price{font-size: 36px; font-weight: 800; margin-bottom: 20px;}
  .plan-card .price span{font-size: 14px; color: var(--ink-soft); font-weight: 500;}
  .plan-card ul{list-style: none; margin-bottom: 30px; border-top: 1px solid var(--card-border);}
  .plan-card li{font-size: 14px; color: var(--ink-soft); padding: 10px 0; border-bottom: 1px solid var(--card-border);}
  .plan-card .btn{width: 100%; justify-content: center;}
  @media (max-width: 900px) { .pricing-grid{grid-template-columns: 1fr;} .plan-card.popular{transform: none;} }