:root{
    --bg:#0a0b0c;
    --bg-alt:#0d0f10;
    --panel:#111314;
    --border:#22262a;
    --border-soft:#1b1e20;
    --cyan:#2fe0e8;
    --cyan-dim:#1aa9b0;
    --text:#f3f5f6;
    --muted:#8b9296;
    --muted-2:#5f6669;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Arial, sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer;}
  input,select,textarea{font-family:inherit;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
  @media (max-width:760px){ .wrap{padding:0 24px;} }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:200;
    background:rgba(10,11,12,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 40px;
    max-width:1180px; margin:0 auto;
  }
  @media (max-width:760px){ .header-inner{padding:18px 24px;} }
  .logo-block{line-height:1.1;}
  .logo-block .logo{
    font-weight:800; font-size:20px; letter-spacing:0.5px;
  }
  .logo-block .logo-sub{
    font-size:10px; letter-spacing:3px; color:var(--muted-2); font-weight:600;
  }
  nav.desktop-nav{display:flex; gap:34px; align-items:center;}
  nav.desktop-nav a{
    font-size:14.5px; color:var(--muted); font-weight:500;
    padding-bottom:4px; border-bottom:2px solid transparent;
    transition:color .2s ease;
  }
  nav.desktop-nav a:hover{color:var(--text);}
  nav.desktop-nav a.active{color:var(--text); border-bottom-color:var(--cyan);}

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700; font-size:14.5px;
    padding:12px 20px; border-radius:8px;
    border:1px solid transparent;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .btn-cyan{ background:var(--cyan); color:#04181a; }
  .btn-cyan:hover{ box-shadow:0 0 24px rgba(47,224,232,0.35); transform:translateY(-1px); }
  .btn-outline{ background:transparent; color:var(--text); border-color:var(--border); }
  .btn-outline:hover{ border-color:var(--muted); }
  .btn svg{width:15px; height:15px;}

  .header-cta{display:none;}
  @media (min-width:761px){ .header-cta{display:inline-flex;} }

  /* ---------- MOBILE HAMBURGER ---------- */

  .burger{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:8px;
    margin-left:auto;
    background:transparent;
    border:1px solid transparent;
    border-radius:8px;
    cursor:pointer;
    position:relative;
    z-index:400;
    -webkit-tap-highlight-color:transparent;
  }

  .burger span{
    display:block;
    width:24px;
    height:2px;
    background:var(--text);
    border-radius:2px;
    transform-origin:center;
    transition:
      transform .25s ease,
      opacity .2s ease,
      width .25s ease;
  }

  /* Hamburger becomes X */
  .burger.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .burger.active span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
  }

  .burger.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .burger:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
  }

  /* ---------- MOBILE MENU ---------- */

  .mobile-menu{
    position:fixed;
    inset:0;
    z-index:300;
    background:#0a0b0c;
    padding:26px 28px;
    transform:translateX(100%);
    opacity:0;
    visibility:hidden;
    transition:
      transform .32s cubic-bezier(.4,0,.2,1),
      opacity .25s ease,
      visibility 0s linear .32s;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
  }

  .mobile-menu.open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    transition:
      transform .32s cubic-bezier(.4,0,.2,1),
      opacity .25s ease,
      visibility 0s linear 0s;
  }

  .mobile-menu-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }

  .mobile-menu .close-btn{
    background:none;
    border:none;
    color:var(--text);
    font-size:22px;
    padding:4px;
    cursor:pointer;
  }

  .mobile-menu nav{
    margin-top:56px;
    display:flex;
    flex-direction:column;
    gap:30px;
  }

  .mobile-menu nav a{
    font-size:26px;
    font-weight:600;
    color:var(--text);
    transition:
      color .2s ease,
      transform .2s ease;
  }

  .mobile-menu nav a:hover{
    color:var(--cyan);
    transform:translateX(5px);
  }

  .mobile-menu nav a.active{
    color:var(--cyan);
  }

  .mobile-menu .btn{
    margin-top:44px;
    width:max-content;
  }

  /* Mobile only */
  @media (max-width:760px){

    .header-inner{
      padding:14px 20px;
      min-height:64px;
    }

    nav.desktop-nav{
      display:none !important;
    }

    .header-cta{
      display:none !important;
    }

    .burger{
      display:flex !important;
    }

    body.menu-open{
      overflow:hidden;
    }
  }

  /* Never show hamburger on desktop */
  @media (min-width:761px){
    .burger{
      display:none !important;
    }
  }

  /* ---------- SECTION SHELL ---------- */
  section{padding:96px 0;}
  @media (max-width:760px){ section{padding:56px 0;} }
  .eyebrow{
    display:flex; align-items:center; gap:12px;
    color:var(--cyan); font-weight:700; font-size:12.5px;
    letter-spacing:2.5px; margin-bottom:20px;
  }
  .eyebrow .line{width:26px; height:1px; background:var(--cyan);}
  h2.title{
    font-size:44px; font-weight:800; letter-spacing:-1px; line-height:1.08;
  }
  @media (max-width:760px){ h2.title{font-size:32px;} }
  .accent{color:var(--cyan);}
  .lede{
    color:var(--muted); font-size:16.5px; max-width:620px; margin-top:22px; line-height:1.65;
  }

  /* ---------- HERO ---------- */
  .hero{position:relative; padding-top:120px; padding-bottom:120px; overflow:hidden;}
  .hero-bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(47,224,232,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(47,224,232,0.06) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black 10%, transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black 10%, transparent 75%);
  }
  .hero-grid{
    position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;
  }
  @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{
    font-size:58px; font-weight:800; letter-spacing:-1.5px; line-height:1.05; margin-top:18px;
  }
  @media (max-width:980px){ .hero h1{font-size:40px;} }
  @media (max-width:480px){ .hero h1{font-size:33px;} }
  .hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .hero-tags{
    margin-top:44px; color:var(--muted-2); font-size:12.5px; letter-spacing:3px; font-weight:600;
  }
  .hero-visual{
    position:relative; height:420px; display:none;
  }
  @media (min-width:981px){ .hero-visual{display:block;} }
  .node{
    position:absolute; width:16px; height:16px; border:2px solid var(--cyan); border-radius:50%;
    background:#06181a; box-shadow:0 0 18px rgba(47,224,232,0.5);
    animation:node-pulse 2.6s ease-in-out infinite;
    opacity:0; animation-fill-mode:forwards, forwards;
  }
  .node.reveal{ animation:node-appear .5s ease forwards, node-pulse 2.6s ease-in-out 0.5s infinite; }
  @keyframes node-appear{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
  @keyframes node-pulse{
    0%,100%{ box-shadow:0 0 12px rgba(47,224,232,0.4); }
    50%{ box-shadow:0 0 26px rgba(47,224,232,0.85); }
  }
  .node-label{
    position:absolute; font-size:11px; letter-spacing:2px; color:var(--muted); font-weight:700;
    opacity:0; transition:opacity .5s ease;
  }
  .node-label.reveal{opacity:1;}
  .flow-line{position:absolute; background:linear-gradient(180deg, transparent, var(--cyan)); }
  .flow-path{
    fill:none; stroke:#2fe0e8; stroke-width:2; stroke-linecap:round;
    stroke-dasharray:6 460; stroke-dashoffset:460;
  }
  .flow-path.reveal{ animation:draw-line 1.8s ease forwards; }
  @keyframes draw-line{ to{ stroke-dashoffset:0; } }
  .float-card{
    position:absolute; background:var(--panel); border:1px solid var(--border);
    border-radius:10px; padding:12px 16px; font-size:12.5px; min-width:180px;
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
    opacity:0; transform:translateY(10px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .float-card.reveal{
    opacity:1; transform:translateY(0);
    animation:card-drift 5s ease-in-out 0.6s infinite;
  }
  @keyframes card-drift{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
  .float-card .t1{font-weight:700; color:var(--text);}
  .float-card .t2{color:var(--muted-2); font-size:11px; margin-top:2px;}
  .float-card.branch{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600;}

  /* ---------- TICKER ---------- */
  .ticker-wrap{
    border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
    overflow:hidden; padding:26px 0; background:var(--bg-alt);
  }
  .ticker-track{display:flex; gap:40px; width:max-content; animation:scroll-left 28s linear infinite;}
  .ticker-track span{
    font-size:28px; font-weight:800; color:transparent; -webkit-text-stroke:1px #2b2f31;
    white-space:nowrap; display:flex; align-items:center; gap:40px;
  }
  .ticker-track span.star{color:var(--cyan); -webkit-text-stroke:0; font-size:16px;}
  @keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- CARD GRIDS ---------- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px;}
  .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:52px;}
  @media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
  @media (max-width:640px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

  .card{
    background:var(--panel); border:1px solid var(--border); border-radius:14px;
    padding:30px; transition:border-color .2s ease;
  }
  .card:hover{border-color:#33393c;}
  .card-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .icon-box{
    width:46px; height:46px; border-radius:10px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--cyan);
    background:radial-gradient(circle at 30% 20%, rgba(47,224,232,0.12), transparent 70%);
  }
  .icon-box svg{width:22px; height:22px;}
  .card-num{font-size:26px; font-weight:800; color:#242829;}
  .card h3{font-size:20px; font-weight:700; margin-top:20px;}
  .card p.desc{color:var(--muted); font-size:14.5px; margin-top:10px; line-height:1.6;}
  .card ul.bullets{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
  .card ul.bullets li{display:flex; align-items:center; gap:9px; font-size:14px; color:#d7dadb;}
  .card ul.bullets li svg{width:14px; height:14px; color:var(--cyan); flex-shrink:0;}
  .explore{
    margin-top:22px; display:inline-flex; align-items:center; gap:6px;
    color:var(--cyan); font-size:14px; font-weight:600;
  }
  .explore svg{width:14px; height:14px; transition:transform .2s ease;}
  .card:hover .explore svg{transform:translateX(3px);}

  .label-sm{font-size:11px; letter-spacing:2px; color:var(--muted-2); font-weight:700; text-transform:uppercase;}
  .solution-label{font-size:11.5px; letter-spacing:1.5px; color:var(--cyan); font-weight:700; margin-top:16px;}

  /* ---------- OUR WORK ---------- */
  .case-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px;
    display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; margin-top:52px;
  }
  @media (max-width:860px){ .case-card{grid-template-columns:1fr;} }
  .case-media{
    background:linear-gradient(135deg, #0d1b2a, #1b1035);
    position:relative; min-height:280px; padding:24px;
    display:flex; flex-direction:column; gap:10px; justify-content:center;
  }
  .case-media .row{
    background:rgba(20,22,30,0.75); border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; padding:10px 14px; font-size:12px; color:#c9d6e3;
  }
  .case-body{padding:40px;}
  @media (max-width:760px){ .case-body{padding:28px;} }
  .case-body h3{font-size:26px; font-weight:800; margin-bottom:12px;}
  .case-body p{color:var(--muted); font-size:15px; line-height:1.65;}
  .tag-group{margin-top:22px;}
  .tag-group .label-sm{margin-bottom:12px; display:block;}
  .pill{
    display:inline-block; padding:8px 14px; border-radius:100px; font-size:13px;
    border:1px solid var(--border); color:#dfe2e3; margin:0 8px 8px 0;
  }
  .pill.tech{color:var(--cyan); border-color:rgba(47,224,232,0.35);}
  .mini-cards{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px;}
  @media (max-width:640px){ .mini-cards{grid-template-columns:1fr;} }
  .mini-card{
    border:1px dashed var(--border); border-radius:14px; padding:26px 28px;
    display:flex; align-items:center; justify-content:space-between; color:var(--muted);
    font-size:16px; font-weight:600;
  }
  .mini-card .arrow-circle{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0;
  }
  .mini-card .arrow-circle svg{width:15px; height:15px;}
  .runs-block{margin-top:70px;}
  .runs-block h3{font-size:26px; font-weight:800; margin-bottom:14px;}
  .runs-block p{color:var(--muted); font-size:15.5px; max-width:640px; line-height:1.7;}

  /* ---------- TECHNOLOGIES ---------- */
  .tech-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px;}
  @media (max-width:860px){ .tech-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .tech-grid{grid-template-columns:1fr;} }
  .tech-card{
    background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:26px;
  }
  .tech-card .label-sm{color:var(--cyan); margin-bottom:18px;}
  .tech-pills{display:flex; flex-wrap:wrap; gap:10px;}
  .tech-pill{
    padding:9px 14px; border-radius:8px; border:1px solid var(--border); font-size:13.5px; color:#dfe2e3;
  }

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  @media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:36px;} }
  .about-grid h2.title{margin-top:18px;}
  .about-loc{
    margin-top:26px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px;
  }
  .about-loc svg{width:15px; height:15px; color:var(--cyan); flex-shrink:0;}
  .about-media{
    position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
    height:340px;
    background:
      radial-gradient(circle at 30% 20%, rgba(30,200,140,0.35), transparent 55%),
      radial-gradient(circle at 70% 60%, rgba(47,224,232,0.25), transparent 50%),
      #05070a;
  }
  .about-media .cap{
    position:absolute; left:22px; bottom:20px; font-size:11px; letter-spacing:2.5px;
    color:#cfe9e6; font-weight:700;
  }
  .principles{margin-top:90px;}
  .principle-row{
    display:grid; grid-template-columns:60px 1fr 1fr; gap:26px; align-items:center;
    padding:26px 0; border-bottom:1px solid var(--border-soft);
  }
  @media (max-width:760px){ .principle-row{grid-template-columns:1fr; gap:10px;} }
  .principle-num{font-size:30px; font-weight:800; color:#26292b;}
  .principle-head{display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700;}
  .principle-head svg{width:20px; height:20px; color:var(--cyan);}
  .principle-desc{color:var(--muted); font-size:15px;}
  .stats-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px;
    background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  }
  @media (max-width:640px){ .stats-row{grid-template-columns:1fr 1fr;} }
  .stat{background:var(--panel); padding:30px 26px;}
  .stat .num{font-size:30px; font-weight:800;}
  .stat .lbl{font-size:11.5px; letter-spacing:1.5px; color:var(--muted-2); margin-top:8px; text-transform:uppercase; font-weight:600;}
  .about-cta{margin-top:44px;}

  /* ---------- CONTACT ---------- */
  .contact-grid{display:grid; grid-template-columns:0.85fr 1.3fr; gap:26px; margin-top:52px; align-items:start;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
  .info-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:34px;}
  .info-card h3{font-size:20px; font-weight:700;}
  .info-card p.tag{color:var(--muted); font-size:14.5px; margin-top:8px;}
  .info-list{margin-top:26px; display:flex; flex-direction:column; gap:18px;}
  .info-list li{display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:#dfe2e3;}
  .info-list li svg{width:17px; height:17px; color:var(--cyan); margin-top:2px; flex-shrink:0;}
  .hours-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:30px 34px; margin-top:22px;}
  .hours-card .label-sm{color:var(--cyan); margin-bottom:12px;}
  .hours-card p{color:var(--muted); font-size:14.5px; line-height:1.6;}

  .form-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:36px;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }
  .field{display:flex; flex-direction:column; gap:9px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:11px; letter-spacing:1.5px; color:var(--muted-2); font-weight:700;}
  .field input, .field select, .field textarea{
    background:#0c0e0f; border:1px solid var(--border); border-radius:8px; padding:13px 14px;
    color:var(--text); font-size:14.5px; outline:none; transition:border-color .2s ease;
  }
  .field input::placeholder, .field textarea::placeholder{color:#565b5e;}
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--cyan);}
  .field textarea{resize:vertical; min-height:110px;}
  .form-card .btn{margin-top:26px; width:100%; justify-content:center;}

  .success-state{
    display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center;
    min-height:340px; padding:20px;
  }
  .success-icon{
    width:64px; height:64px; border-radius:50%; border:1px solid var(--cyan);
    display:flex; align-items:center; justify-content:center; color:var(--cyan);
    box-shadow:0 0 30px rgba(47,224,232,0.25); margin-bottom:22px;
  }
  .success-icon svg{width:28px; height:28px;}
  .success-state h3{font-size:24px; font-weight:800;}
  .success-state p{color:var(--muted); font-size:14.5px; margin-top:12px; max-width:360px;}
  .success-state a{color:var(--cyan); font-weight:600; margin-top:18px; font-size:14.5px;}

  .toast{
    position:fixed; bottom:26px; right:26px; z-index:400;
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:14px 18px; display:flex; align-items:center; gap:10px; font-size:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.5);
    transform:translateY(20px); opacity:0; pointer-events:none; transition:all .3s ease;
  }
  .toast.show{transform:translateY(0); opacity:1;}
  .toast svg{width:17px; height:17px; color:var(--cyan);}

  /* ---------- FOOTER CTA ---------- */
  .cta-section{padding-bottom:0;}
  .cta-inner{
    position:relative; padding:100px 0 70px;
    background:radial-gradient(ellipse 60% 100% at 20% 0%, rgba(47,224,232,0.09), transparent 70%);
  }
  .cta-inner h2.title{font-size:52px;}
  @media (max-width:760px){ .cta-inner h2.title{font-size:34px;} }
  .cta-inner .lede{margin-top:20px;}
  .cta-actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}

  footer{border-top:1px solid var(--border-soft); padding:60px 0 40px; background:var(--bg-alt);}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  @media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }
  .footer-grid .logo{font-weight:800; font-size:19px;}
  .footer-grid .logo-sub{font-size:10px; letter-spacing:3px; color:var(--muted-2); font-weight:600;}
  .footer-tag{color:var(--muted); font-size:14px; margin-top:16px; max-width:220px;}
  .footer-addr{color:var(--muted-2); font-size:13px; margin-top:14px; max-width:230px; line-height:1.6;}
  .footer-col h4{font-size:11.5px; letter-spacing:1.5px; color:var(--muted-2); font-weight:700; text-transform:uppercase; margin-bottom:18px;}
  .footer-col a, .footer-col li{display:block; color:#c7cbcd; font-size:14.5px; margin-bottom:14px;}
  .footer-col a:hover{color:var(--cyan);}
  .connect-item{display:flex; align-items:center; gap:9px;}
  .connect-item svg{width:15px; height:15px; color:var(--cyan); flex-shrink:0;}

  
/* ---------- ENHANCED TOOLS WE TRUST ---------- */
.tech-grid .tech-card{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;animation:techIn .7s cubic-bezier(.2,.8,.2,1) both}
.tech-grid .tech-card:nth-child(1){animation-delay:.05s}.tech-grid .tech-card:nth-child(2){animation-delay:.12s}.tech-grid .tech-card:nth-child(3){animation-delay:.19s}.tech-grid .tech-card:nth-child(4){animation-delay:.26s}.tech-grid .tech-card:nth-child(5){animation-delay:.33s}.tech-grid .tech-card:nth-child(6){animation-delay:.40s}
@keyframes techIn{from{opacity:0;transform:translateY(25px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tech-grid .tech-card::before{content:"";position:absolute;width:180px;height:180px;right:-95px;top:-95px;border:1px solid rgba(47,224,232,.18);border-radius:50%;box-shadow:0 0 0 24px rgba(47,224,232,.025),0 0 0 48px rgba(47,224,232,.015);transition:transform .5s ease}
.tech-grid .tech-card::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(47,224,232,.09),transparent);transform:skewX(-18deg);transition:left .8s ease;pointer-events:none}
.tech-grid .tech-card:hover{transform:translateY(-8px);border-color:rgba(47,224,232,.45);box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 30px rgba(47,224,232,.06)}
.tech-grid .tech-card:hover::before{transform:scale(1.12)}.tech-grid .tech-card:hover::after{left:145%}
.tech-grid .tech-pills{position:relative;z-index:2}
.tech-grid .tech-pill{opacity:0;animation:techPill .5s ease forwards;transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.tech-grid .tech-pill:nth-child(1){animation-delay:.15s}.tech-grid .tech-pill:nth-child(2){animation-delay:.22s}.tech-grid .tech-pill:nth-child(3){animation-delay:.29s}.tech-grid .tech-pill:nth-child(4){animation-delay:.36s}.tech-grid .tech-pill:nth-child(5){animation-delay:.43s}.tech-grid .tech-pill:nth-child(6){animation-delay:.50s}.tech-grid .tech-pill:nth-child(7){animation-delay:.57s}.tech-grid .tech-pill:nth-child(8){animation-delay:.64s}
@keyframes techPill{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tech-grid .tech-pill:hover{transform:translateY(-3px);color:var(--cyan);border-color:rgba(47,224,232,.45);box-shadow:0 5px 18px rgba(47,224,232,.08)}
@media(prefers-reduced-motion:reduce){.tech-grid .tech-card,.tech-grid .tech-pill{animation:none!important;opacity:1;transform:none}}

/* ---------- SCROLL REVEAL ---------- */
  .reveal-init{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal-in{ opacity:1; transform:translateY(0); }
  .grid-3 .card.reveal-init:nth-child(2), .grid-2 .card.reveal-init:nth-child(2),
  .tech-grid .tech-card.reveal-init:nth-child(2), .mini-cards .mini-card.reveal-init:nth-child(2),
  .stats-row .stat.reveal-init:nth-child(2){ transition-delay:.08s; }
  .grid-3 .card.reveal-init:nth-child(3), .tech-grid .tech-card.reveal-init:nth-child(3),
  .stats-row .stat.reveal-init:nth-child(3){ transition-delay:.16s; }
  .grid-2 .card.reveal-init:nth-child(3), .tech-grid .tech-card.reveal-init:nth-child(4){ transition-delay:.16s; }
  .grid-3 .card.reveal-init:nth-child(4), .tech-grid .tech-card.reveal-init:nth-child(4),
  .stats-row .stat.reveal-init:nth-child(4){ transition-delay:.24s; }
  .grid-2 .card.reveal-init:nth-child(4), .tech-grid .tech-card.reveal-init:nth-child(5){ transition-delay:.24s; }
  .grid-3 .card.reveal-init:nth-child(5), .tech-grid .tech-card.reveal-init:nth-child(6){ transition-delay:.32s; }
  .grid-3 .card.reveal-init:nth-child(6){ transition-delay:.4s; }
  @media (prefers-reduced-motion: reduce){
    .reveal-init{ opacity:1; transform:none; transition:none; }
    .node, .float-card.reveal, .flow-path{ animation:none !important; }
  }
/* ---------- HERO: ADVANCED ANIMATIONS ---------- */

/* 1. Staggered word-reveal headline */
.hero h1 .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(45px);
    filter: blur(10px);
    animation: wordIn 1.4s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes wordIn {
    from {
        opacity: 0;
        transform: translateY(45px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes wordIn{
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

/* 2. Cursor-reactive spotlight + ambient drift on hero grid */
.hero{ --mx:50%; --my:40%; }
.hero-bg{
  background-image:
    linear-gradient(rgba(47,224,232,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,224,232,0.06) 1px, transparent 1px),
    radial-gradient(circle at var(--mx) var(--my), rgba(47,224,232,0.10), transparent 45%);
  background-size:64px 64px, 64px 64px, 100% 100%;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black 10%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black 10%, transparent 75%);
  transition:background .1s ease-out;
  animation:gridDrift 26s ease-in-out infinite;
}
@keyframes gridDrift{
  0%,100%{ background-position:0 0, 0 0, 0 0; }
  50%{ background-position:20px 14px, 20px 14px, 0 0; }
}

/* 3. Magnetic buttons */
.hero-actions .btn, .header-cta{
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s ease, background .2s ease;
}

/* 4. Eyebrow typewriter caret */
.hero .eyebrow .type-text{
  border-right:2px solid var(--cyan);
  padding-right:4px;
  white-space:nowrap;
  overflow:hidden;
  animation:caretBlink .8s step-end infinite;
}
@keyframes caretBlink{
  0%,100%{ border-color:var(--cyan); }
  50%{ border-color:transparent; }
}

/* 5. Lede + hero-actions + hero-tags gentle entrance (staggered after headline) */
.hero .lede, .hero .hero-actions, .hero .hero-tags{
  opacity:0;
  transform:translateY(16px);
  animation:heroFadeUp .8s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .lede{ animation-delay:.55s; }
.hero .hero-actions{ animation-delay:.7s; }
.hero .hero-tags{ animation-delay:.85s; }
@keyframes heroFadeUp{
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero h1 .word, .hero .lede, .hero .hero-actions, .hero .hero-tags{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
  .hero-bg{ animation:none !important; }
  .hero .eyebrow .type-text{ animation:none !important; border-right:none; white-space:normal; }
}
  ::selection{background:rgba(47,224,232,0.3);}

  /* =====================================================
   CUSTOM SOFTWARE PAGE
===================================================== */

.custom-hero {
    min-height: 650px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.custom-hero-inner {
    position: relative;
    z-index: 2;
}

.custom-title {
    max-width: 900px;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.custom-wide-text {
    max-width: 850px;
}

.custom-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.custom-hero-tags span {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.025);
    transition: .3s ease;
}

.custom-hero-tags span:hover {
    transform: translateY(-3px);
    border-color: rgba(0,229,255,.5);
    color: #00e5ff;
}

.custom-section {
    padding: 110px 0;
}

.custom-dark-section {
    background: rgba(255,255,255,.015);
}

.custom-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 55px;
}

.custom-highlight-card {
    padding: 32px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    transition: transform .4s ease, border-color .4s ease;
}

.custom-highlight-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,229,255,.35);
}

.custom-number,
.custom-problem-number {
    display: block;
    margin-bottom: 22px;
    font-size: 12px;
    letter-spacing: 2px;
    color: #00e5ff;
}

.custom-highlight-card h3 {
    margin-bottom: 12px;
}

.custom-highlight-card p {
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.custom-problem-card {
    position: relative;
    overflow: hidden;
    transition: transform .4s ease, border-color .4s ease;
}

.custom-problem-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,229,255,.35);
}

.custom-build-grid {
    margin-top: 55px;
}

.custom-build-card {
    transition: transform .4s ease, border-color .4s ease;
}

.custom-build-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,229,255,.35);
}

.custom-feature-list {
    margin-top: 50px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.custom-feature {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.custom-feature > span {
    color: #00e5ff;
    font-size: 13px;
    letter-spacing: 2px;
}

.custom-feature h3 {
    margin-bottom: 8px;
}

.custom-feature p {
    max-width: 700px;
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.custom-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
    margin-top: 70px;
}

.custom-process-line {
    position: absolute;
    top: 28px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: rgba(0,229,255,.25);
}

.custom-process-step {
    position: relative;
    z-index: 2;
}

.custom-process-number {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border: 1px solid rgba(0,229,255,.5);
    border-radius: 50%;
    background: #071019;
    color: #00e5ff;
    font-size: 13px;
}

.custom-process-step h3 {
    margin-bottom: 10px;
}

.custom-process-step p {
    color: rgba(255,255,255,.55);
    line-height: 1.7;
}

.custom-tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 50px;
}

.custom-tech {
    padding: 18px 28px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    transition: .35s ease;
}

.custom-tech:hover {
    transform: translateY(-5px);
    border-color: rgba(0,229,255,.5);
    color: #00e5ff;
}

.custom-work-section {
    scroll-margin-top: 80px;
}

.custom-portfolio-grid {
    margin-top: 50px;
}

.custom-portfolio-card {
    position: relative;
    padding: 34px;
    min-height: 240px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    transition: .4s ease;
}

.custom-portfolio-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,229,255,.4);
}

.portfolio-type {
    font-size: 11px;
    letter-spacing: 2px;
    color: #00e5ff;
}

.custom-portfolio-card h3 {
    margin: 18px 0 12px;
}

.custom-portfolio-card p {
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.portfolio-arrow {
    position: absolute;
    right: 28px;
    bottom: 25px;
    font-size: 25px;
    color: #00e5ff;
}

.custom-pricing-grid {
    margin-top: 50px;
}

.custom-price-card {
    position: relative;
    padding: 36px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    transition: .4s ease;
}

.custom-price-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,229,255,.4);
}

.custom-price-card.featured {
    border-color: rgba(0,229,255,.5);
}

.price-featured {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0,229,255,.12);
    color: #00e5ff;
    font-size: 9px;
    letter-spacing: 1px;
}

.price-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #00e5ff;
}

.custom-price-card h3 {
    margin: 16px 0 12px;
}

.custom-price-card p {
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.custom-price-card ul {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.custom-price-card li {
    padding: 8px 0;
    color: rgba(255,255,255,.65);
}

.custom-price-card li::before {
    content: "✓";
    margin-right: 10px;
    color: #00e5ff;
}

.custom-price-card a {
    display: inline-block;
    margin-top: 10px;
    color: #00e5ff;
    text-decoration: none;
    font-size: 13px;
}

.custom-benefit-card {
    transition: transform .4s ease;
}

.custom-benefit-card:hover {
    transform: translateY(-5px);
}

.custom-faq {
    max-width: 900px;
    margin-top: 50px;
}

.custom-faq-item {
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.custom-faq-question {
    width: 100%;
    padding: 24px 0;
    border: 0;
    background: transparent;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
}

.custom-faq-question span {
    color: #00e5ff;
    font-size: 24px;
    transition: transform .3s ease;
}

.custom-faq-item.active .custom-faq-question span {
    transform: rotate(45deg);
}

.custom-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

.custom-faq-answer p {
    padding: 0 0 24px;
    max-width: 750px;
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.custom-cta-section {
    padding: 100px 0;
}

.custom-cta {
    padding: 70px;
    text-align: center;
    border: 1px solid rgba(0,229,255,.2);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0%,
        rgba(0,229,255,.08),
        transparent 55%),
        rgba(255,255,255,.02);
}

.custom-cta h2 {
    max-width: 800px;
    margin: 20px auto;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
}

.custom-cta p {
    max-width: 650px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
}


/* =====================================================
   REVEAL ANIMATION
===================================================== */

.reveal-custom {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}

.reveal-custom.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 800px) {

    .custom-highlight-grid,
    .custom-process {
        grid-template-columns: 1fr 1fr;
    }

    .custom-process-line {
        display: none;
    }

    .custom-cta {
        padding: 45px 25px;
    }
}

@media (max-width: 640px) {

    .custom-section {
        padding: 80px 0;
    }

    .custom-title {
        font-size: 42px;
    }

    .custom-highlight-grid,
    .custom-process {
        grid-template-columns: 1fr;
    }

    .custom-feature {
        grid-template-columns: 50px 1fr;
        gap: 15px;
    }

    .custom-cta {
        padding: 40px 20px;
    }
}