:root{
    --bg: #050816;
    --card: #0F172A;
    --primary: #4F46E5;
    --secondary: #00D4FF;
    --accent: #A855F7;
    --text: #FFFFFF;
    --muted: #94A3B8;
    --success: #10B981;
    --border: rgba(148,163,184,0.14);
    --glass: rgba(15,23,42,0.55);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  h1,h2,h3,h4,.font-head{font-family:'Plus Jakarta Sans', sans-serif;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--primary); color:#fff;}

  /* background grid / meridian texture */
  .meridian-field{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(79,70,229,0.25), transparent 60%),
      radial-gradient(ellipse 60% 40% at 90% 10%, rgba(0,212,255,0.12), transparent 60%);
  }
  canvas#meridianCanvas{position:fixed; inset:0; z-index:0; opacity:0.35; pointer-events:none;}

  .container{max-width:1280px; margin:0 auto; padding:0 24px;}
  .muted{color:var(--muted);}
  .grad-text{
    background:linear-gradient(90deg, var(--secondary), var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--secondary); margin-bottom:16px;
  }
  .eyebrow::before{content:''; width:16px; height:1px; background:var(--secondary);}

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 28px; border-radius:999px; font-weight:600; font-size:14.5px;
    cursor:pointer; border:1px solid transparent; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, border-color .35s;
    position:relative; overflow:hidden; white-space:nowrap;
  }
  .btn-primary{background:linear-gradient(90deg, var(--primary), var(--accent)); color:#fff; box-shadow:0 8px 30px -8px rgba(79,70,229,0.6);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(168,85,247,0.55);}
  .btn-ghost{background:rgba(255,255,255,0.03); border-color:var(--border); color:var(--text); backdrop-filter:blur(6px);}
  .btn-ghost:hover{border-color:rgba(148,163,184,0.4); background:rgba(255,255,255,0.06);}
  .btn .ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,0.35); transform:scale(0); animation:rip .6s linear; pointer-events:none;}
  @keyframes rip{to{transform:scale(3); opacity:0;}}

  /* NAVBAR */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0; transition:padding .4s, background .4s, border-color .4s;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    padding:12px 0; background:rgba(5,8,22,0.72); backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--border);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px;}
  .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-0.01em;}
  .logo-mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg, var(--secondary), var(--primary) 55%, var(--accent)); position:relative; flex:none;}
  .logo-mark::after{content:''; position:absolute; inset:7px; border-radius:5px; background:var(--bg);}
  .logo-mark::before{content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--secondary); box-shadow:0 0 12px 2px var(--secondary);}
  .nav-links{display:flex; align-items:center; gap:2px;}
  .nav-links > li{position:relative;}
  .nav-links a.nav-link{
    display:flex; align-items:center; gap:4px; padding:10px 16px; font-size:14.5px; font-weight:500; color:var(--muted);
    border-radius:8px; transition:color .25s, background .25s;
  }
  .nav-links a.nav-link:hover{color:var(--text); background:rgba(255,255,255,0.04);}
  .caret{width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s; opacity:.7;}
  li:hover .caret{transform:rotate(225deg) translateY(2px);}

  .mega{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
    width:560px; background:var(--glass); backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:18px; padding:22px;
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    opacity:0; visibility:hidden; transition:opacity .25s, transform .25s;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
  li:hover .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
  .mega a{display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:10px; transition:background .2s;}
  .mega a:hover{background:rgba(255,255,255,0.05);}
  .mega a span.t{font-size:14px; font-weight:600;}
  .mega a span.d{font-size:12.5px; color:var(--muted);}

  .nav-cta{display:flex; align-items:center; gap:14px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;}
  .burger span{width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s;}

  /* HERO */
  .hero{
    min-height:100vh; display:flex; align-items:center; position:relative; padding:150px 0 90px;
  }
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
  .hero h1{font-size:clamp(38px, 5vw, 66px); line-height:1.06; font-weight:800; letter-spacing:-0.02em; margin-bottom:22px;}
  .hero p.lead{font-size:18px; color:var(--muted); max-width:520px; line-height:1.65; margin-bottom:34px;}
  .hero-btns{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
  .stat-row{display:grid; grid-template-columns:repeat(4,auto); gap:36px;}
  .stat-num{font-size:30px; font-weight:800; font-family:'Plus Jakarta Sans';}
  .stat-label{font-size:12.5px; color:var(--muted); margin-top:2px;}

  .hero-orb-wrap{position:relative; height:520px; display:flex; align-items:center; justify-content:center;}
  .orb{width:380px; height:380px; border-radius:50%; position:relative;
    background:radial-gradient(circle at 32% 28%, rgba(0,212,255,0.35), rgba(79,70,229,0.28) 45%, rgba(5,8,22,0) 72%);
    border:1px solid var(--border); animation:spin 26s linear infinite;
  }
  .orb::before,.orb::after{content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(148,163,184,0.18);}
  .orb::before{inset:36px; animation:spin 18s linear infinite reverse;}
  .orb::after{inset:76px; border-style:dashed; animation:spin 40s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .orb-core{position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px;
    border-radius:32px; background:linear-gradient(135deg, var(--primary), var(--accent)); 
    box-shadow:0 0 90px 10px rgba(168,85,247,0.45); display:flex; align-items:center; justify-content:center;
    animation:float 5s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
  .node{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--secondary); box-shadow:0 0 14px 3px rgba(0,212,255,0.7);}
  .n1{top:8%; left:12%; animation:float 4s ease-in-out infinite;}
  .n2{bottom:14%; right:6%; animation:float 4.5s ease-in-out infinite .5s;}
  .n3{top:52%; right:-2%; animation:float 5s ease-in-out infinite 1s;}
  .n4{bottom:4%; left:30%; animation:float 4s ease-in-out infinite 1.4s;}

  section{position:relative; z-index:1; padding:120px 0;}
  .section-head{max-width:640px; margin:0 auto 60px; text-align:center;}
  .section-head h2{font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.015em; line-height:1.15;}
  .section-head p{color:var(--muted); margin-top:14px; font-size:16px; line-height:1.65;}
  .section-head.left{margin:0 0 50px; text-align:left;}

  /* TRUSTED BY */
  .marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
  .marquee-track{display:flex; gap:64px; width:max-content; animation:scroll 32s linear infinite;}
  .marquee-track span{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:20px; color:var(--muted); opacity:.55; white-space:nowrap; letter-spacing:0.02em;}
  @keyframes scroll{to{transform:translateX(-50%);}}

  /* CARDS */
  .card{
    background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px;
    position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
  }
  .card::before{content:''; position:absolute; inset:0; border-radius:20px; padding:1px;
    background:linear-gradient(135deg, transparent, transparent); opacity:0; transition:opacity .4s;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  }
  .card:hover{transform:translateY(-6px); border-color:rgba(148,163,184,0.3); box-shadow:0 26px 50px -22px rgba(79,70,229,0.35);}
  .card:hover::before{opacity:1; background:linear-gradient(135deg, var(--secondary), var(--accent));}
  .icon-box{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(79,70,229,0.25), rgba(0,212,255,0.15)); margin-bottom:22px; font-size:22px;
  }

  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}

  /* WHY CHOOSE */
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
  .why-visual{aspect-ratio:1/1; border-radius:28px; background:linear-gradient(155deg, rgba(79,70,229,0.25), rgba(15,23,42,0.4) 60%); border:1px solid var(--border); position:relative; overflow:hidden;}
  .why-visual .grid-lines{position:absolute; inset:0; background-image:linear-gradient(rgba(148,163,184,0.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.12) 1px,transparent 1px); background-size:38px 38px;}
  .check-list li{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); font-size:16px; font-weight:500;}
  .check-list li:last-child{border-bottom:none;}
  .check-mark{width:26px; height:26px; border-radius:50%; background:rgba(16,185,129,0.15); color:var(--success); display:flex; align-items:center; justify-content:center; flex:none; font-size:13px;}

  /* CASE STUDIES */
  .case-slider{position:relative;}
  .case-track{display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .case-slide{min-width:100%; padding:2px;}
  .case-card{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--card); border:1px solid var(--border); border-radius:24px; overflow:hidden;}
  .case-visual{background:linear-gradient(160deg, rgba(0,212,255,0.18), rgba(168,85,247,0.18)); position:relative; min-height:340px; display:flex; align-items:center; justify-content:center;}
  .case-body{padding:48px;}
  .case-tag{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); margin-bottom:14px;}
  .case-metrics{display:flex; gap:32px; margin-top:28px;}
  .case-metrics div b{display:block; font-size:26px; font-family:'Plus Jakarta Sans'; font-weight:800; color:var(--success);}
  .case-metrics div span{font-size:12.5px; color:var(--muted);}
  .slider-nav{display:flex; gap:12px; margin-top:30px; justify-content:center;}
  .slider-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s;}
  .slider-btn:hover{background:rgba(255,255,255,0.08); border-color:var(--secondary);}
  .dots{display:flex; gap:8px; align-items:center; margin:0 8px;}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--border); transition:.3s; cursor:pointer;}
  .dot.active{background:var(--secondary); width:22px; border-radius:4px;}

  /* PROCESS */
  .process-line{position:relative; margin-top:70px;}
  .process-line::before{content:''; position:absolute; top:26px; left:0; right:0; height:2px; background:var(--border);}
  .process-line .fill{position:absolute; top:26px; left:0; height:2px; background:linear-gradient(90deg, var(--secondary), var(--accent)); width:0%; transition:width 1.6s cubic-bezier(.2,.8,.2,1);}
  .process-steps{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; position:relative;}
  .p-step{display:flex; flex-direction:column; align-items:flex-start;}
  .p-dot{width:54px; height:54px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Plus Jakarta Sans'; margin-bottom:20px; transition:.4s; font-size:15px;}
  .p-step.active .p-dot{background:linear-gradient(135deg,var(--primary),var(--accent)); border-color:transparent; box-shadow:0 0 24px -2px rgba(168,85,247,0.6);}
  .p-step h4{font-size:15px; margin-bottom:6px;}
  .p-step p{font-size:13px; color:var(--muted); line-height:1.5;}

  /* TECH GRID */
  .tech-item{display:flex; align-items:center; justify-content:center; height:88px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.02); font-weight:600; font-size:13.5px; color:var(--muted); transition:.3s; text-align:center; padding:8px;}
  .tech-item:hover{color:#fff; border-color:var(--secondary); background:rgba(0,212,255,0.06); transform:translateY(-3px);}

  /* TESTIMONIALS */
  .test-track{display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .test-slide{min-width:100%; display:flex; justify-content:center;}
  .test-card{max-width:720px; text-align:center; padding:56px;}
  .stars{color:var(--secondary); font-size:18px; letter-spacing:3px; margin-bottom:24px;}
  .test-quote{font-size:22px; font-family:'Plus Jakarta Sans'; font-weight:500; line-height:1.5; margin-bottom:30px;}
  .test-person{display:flex; align-items:center; justify-content:center; gap:14px;}
  .avatar{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary));}

  /* AWARDS */
  .award-item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px 16px; border:1px solid var(--border); border-radius:16px; text-align:center;}
  .award-item .badge{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--secondary); display:flex; align-items:center; justify-content:center; color:var(--secondary); font-weight:800;}
  .award-item span{font-size:13px; color:var(--muted); font-weight:600;}

  /* GLOBAL PRESENCE */
  .globe-wrap{position:relative; border:1px solid var(--border); border-radius:28px; background:radial-gradient(circle at 50% 40%, rgba(79,70,229,0.18), transparent 65%); height:480px; overflow:hidden;}
  .globe-wrap .grid-lines{position:absolute; inset:0; background-image:linear-gradient(rgba(148,163,184,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.1) 1px,transparent 1px); background-size:44px 44px; mask:radial-gradient(circle at 50% 50%, #000 60%, transparent 90%);}
  .pin{position:absolute; width:12px; height:12px; margin:-6px; border-radius:50%; background:var(--secondary); box-shadow:0 0 0 0 rgba(0,212,255,0.6);}
  .pin::after{content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--secondary); animation:ping 2.4s ease-out infinite;}
  .pin-label{position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; white-space:nowrap; color:var(--text); background:var(--glass); padding:3px 9px; border-radius:6px; border:1px solid var(--border);}
  @keyframes ping{0%{transform:scale(0.6); opacity:.9;}100%{transform:scale(2.4); opacity:0;}}

  /* BLOG */
  .blog-card{overflow:hidden; padding:0;}
  .blog-img{height:190px; background:linear-gradient(150deg, rgba(0,212,255,0.22), rgba(79,70,229,0.28)); position:relative;}
  .blog-cat{position:absolute; top:16px; left:16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:var(--glass); padding:5px 11px; border-radius:6px; border:1px solid var(--border);}
  .blog-body{padding:26px;}

  /* CTA BANNER */
  .cta-banner{border-radius:32px; padding:76px 60px; text-align:center; position:relative; overflow:hidden;
    background:linear-gradient(120deg, rgba(79,70,229,0.35), rgba(168,85,247,0.35));
    border:1px solid var(--border);
  }
  .cta-banner::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(0,212,255,0.25), transparent 55%);}
  .cta-banner h2{font-size:clamp(28px,3.6vw,44px); font-weight:800; margin-bottom:18px; position:relative;}
  .cta-banner p{color:rgba(255,255,255,0.85); max-width:520px; margin:0 auto 34px; position:relative;}
  .cta-btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative;}

  footer{border-top:1px solid var(--border); padding:80px 0 30px; position:relative; z-index:1;}
  .foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; padding-bottom:56px;}
  .foot-col h5{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:18px;}
  .foot-col a{display:block; font-size:14.5px; color:var(--muted); padding:6px 0; transition:.2s;}
  .foot-col a:hover{color:var(--text);}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:30px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); flex-wrap:wrap; gap:16px;}
  .social{display:flex; gap:10px;}
  .social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:.25s;}
  .social a:hover{border-color:var(--secondary); color:var(--secondary); transform:translateY(-2px);}
  .newsletter-row{display:flex; gap:10px; margin-top:14px;}
  .newsletter-row input{flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:#fff; font-size:13.5px;}
  .newsletter-row input:focus{outline:none; border-color:var(--secondary);}

  /* reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* MODAL */
  .modal-overlay{position:fixed; inset:0; background:rgba(2,4,12,0.75); backdrop-filter:blur(6px); z-index:200; display:none; align-items:center; justify-content:center; padding:24px;}
  .modal-overlay.open{display:flex;}
  .modal{width:100%; max-width:520px; background:var(--card); border:1px solid var(--border); border-radius:22px; padding:36px; max-height:88vh; overflow-y:auto;}
  .modal h3{font-size:22px; margin-bottom:6px;}
  .modal p.sub{color:var(--muted); font-size:14px; margin-bottom:24px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px; font-weight:600;}
  .field input, .field select, .field textarea{
    width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:10px;
    padding:11px 13px; color:#fff; font-size:14px; font-family:inherit;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--secondary);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .modal-close{position:absolute; top:20px; right:20px; cursor:pointer; opacity:.6; width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s;}
  .modal-close:hover{opacity:1; background:rgba(255,255,255,0.06);}
  .modal-inner{position:relative;}
  .success-box{display:none; text-align:center; padding:30px 0;}
  .success-box.show{display:block;}
  .success-check{width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:rgba(16,185,129,0.15); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:28px;}

  /* RESPONSIVE */
  @media (max-width:1024px){
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:1fr; gap:40px;}
    .hero-grid{grid-template-columns:1fr; gap:40px;}
    .hero-orb-wrap{height:340px; order:-1;}
    .process-steps{grid-template-columns:repeat(3,1fr); row-gap:36px;}
    .process-line::before,.process-line .fill{display:none;}
    .case-card{grid-template-columns:1fr;}
    .case-visual{min-height:220px;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:720px){
    .nav-links, .nav-cta .btn-ghost{display:none;}
    .burger{display:flex;}
    .grid-3,.grid-4{grid-template-columns:1fr 1fr;}
    .stat-row{grid-template-columns:repeat(2,1fr); gap:24px;}
    .case-body{padding:28px;}
    .cta-banner{padding:50px 26px;}
    .foot-grid{grid-template-columns:1fr;}
    .field-row{grid-template-columns:1fr;}
    .test-card{padding:30px 16px;}
    .case-metrics{gap:20px; flex-wrap:wrap;}
  }

  /* mobile drawer */
  .drawer{position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px; background:#080B1A; border-left:1px solid var(--border);
    z-index:150; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1); padding:100px 28px 28px; overflow-y:auto;}
  .drawer.open{transform:translateX(0);}
  .drawer a{display:block; padding:14px 0; font-size:16px; font-weight:600; border-bottom:1px solid var(--border);}
  .drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:140; display:none;}
  .drawer-overlay.open{display:block;}