:root{
      --primary:#0B1220;
      --primary-2:#07101F;
      --secondary:#2563EB;
      --secondary-2:#1D4ED8;
      --accent:#22C55E;
      --bg:#F1F5F9;
      --text:#111827;
      --muted:#64748B;
      --white:#FFFFFF;
      --line:rgba(148,163,184,.22);
      --glass:rgba(255,255,255,.08);
      --shadow:0 28px 80px rgba(2,8,23,.22);
      --radius:26px;
      --max:1180px;
    }

    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--text);
      background:var(--white);
      line-height:1.6;
      overflow-x:hidden;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    button,input,textarea,select{
      font:inherit;
    }

    .container{
      width:min(100% - 32px, var(--max));
      margin-inline:auto;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:0;
      cursor:pointer;
      padding:14px 22px;
      border-radius:14px;
      font-weight:900;
      transition:.25s ease;
      white-space:nowrap;
    }

    .btn-primary{
      color:var(--white);
      background:linear-gradient(135deg,var(--secondary),var(--secondary-2));
      box-shadow:0 16px 36px rgba(37,99,235,.32);
    }

    .btn-primary:hover{
      transform:translateY(-3px);
      box-shadow:0 20px 48px rgba(37,99,235,.42);
    }

    .btn-outline{
      color:var(--white);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.18);
    }

    .btn-outline:hover{
      transform:translateY(-3px);
      border-color:rgba(34,197,94,.55);
      color:var(--accent);
    }

    .btn-green{
      color:#04110B;
      background:var(--accent);
      box-shadow:0 16px 34px rgba(34,197,94,.25);
    }

    .btn-green:hover{
      transform:translateY(-3px);
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(37,99,235,.08);
      color:var(--secondary);
      border:1px solid rgba(37,99,235,.15);
      font-size:13px;
      font-weight:900;
      letter-spacing:.02em;
      margin-bottom:18px;
    }

    .eyebrow.dark{
      color:var(--accent);
      background:rgba(34,197,94,.1);
      border-color:rgba(34,197,94,.22);
    }

    .section{
      padding:92px 0;
    }

    .section-light{
      background:var(--bg);
    }

    .section-head{
      max-width:770px;
      margin:0 auto 46px;
      text-align:center;
    }

    .section-head h2{
      font-size:clamp(32px,5vw,52px);
      line-height:1.08;
      letter-spacing:-.05em;
      color:var(--primary);
      margin-bottom:16px;
    }

    .section-head p{
      color:var(--muted);
      font-size:17px;
    }

    .blue-text{
      color:var(--secondary);
    }

    .green-text{
      color:var(--accent);
    }

    /* Header */
    .site-header{
      position:fixed;
      inset:0 0 auto 0;
      z-index:50;
      transition:.25s ease;
    }

    .site-header.scrolled{
      background:rgba(7,16,31,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav{
      height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--white);
      font-weight:1000;
      letter-spacing:-.04em;
      font-size:24px;
    }

    .brand-logo-img{
      display:block;
      height:var(--brand-logo-height, 46px);
      max-height:var(--brand-logo-height, 46px);
      max-width:220px;
      width:auto;
      object-fit:contain;
    }

    .logo-mark{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:linear-gradient(140deg,var(--secondary) 0%, var(--secondary) 48%, var(--accent) 49%, var(--accent) 100%);
      color:var(--white);
      font-weight:1000;
      font-size:24px;
      box-shadow:0 16px 34px rgba(37,99,235,.28);
      position:relative;
      overflow:hidden;
    }

    .logo-mark::after{
      content:"";
      position:absolute;
      width:34px;
      height:34px;
      right:-12px;
      top:-12px;
      background:rgba(255,255,255,.22);
      border-radius:10px;
      transform:rotate(18deg);
    }

    .brand small{
      display:block;
      color:var(--accent);
      font-size:10px;
      letter-spacing:.38em;
      margin-top:-5px;
      font-weight:900;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      color:rgba(255,255,255,.78);
      font-weight:800;
      font-size:14px;
    }

    .nav-links a:hover{
      color:var(--accent);
    }

    .menu-btn{
      display:none;
      width:46px;
      height:46px;
      place-items:center;
      border-radius:14px;
      color:var(--white);
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      font-size:24px;
      cursor:pointer;
    }

    /* Hero */
    .hero{
      position:relative;
      min-height:100vh;
      padding:132px 0 72px;
      display:flex;
      align-items:center;
      color:var(--white);
      background:
        radial-gradient(circle at 12% 12%, rgba(37,99,235,.36), transparent 27%),
        radial-gradient(circle at 85% 18%, rgba(34,197,94,.18), transparent 26%),
        radial-gradient(circle at 50% 95%, rgba(37,99,235,.18), transparent 34%),
        linear-gradient(135deg,#030712 0%, var(--primary) 52%, #061321 100%);
      overflow:hidden;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, black 0%, transparent 92%);
    }

    .hero::after{
      content:"";
      position:absolute;
      width:560px;
      height:560px;
      right:-220px;
      top:90px;
      border:1px solid rgba(37,99,235,.22);
      border-radius:50%;
      box-shadow:inset 0 0 100px rgba(37,99,235,.16);
    }

    .network{
      position:absolute;
      inset:0;
      opacity:.45;
      pointer-events:none;
    }

    .network span{
      position:absolute;
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 24px rgba(37,99,235,.9);
    }

    .network span:nth-child(1){left:8%;top:29%;}
    .network span:nth-child(2){left:19%;top:16%;}
    .network span:nth-child(3){left:33%;top:34%;}
    .network span:nth-child(4){left:49%;top:18%;}
    .network span:nth-child(5){right:18%;top:31%;}
    .network span:nth-child(6){right:7%;top:54%;}
    .network span:nth-child(7){left:13%;bottom:13%;}
    .network span:nth-child(8){right:34%;bottom:18%;}

    .hero-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1fr .95fr;
      gap:54px;
      align-items:center;
    }

    .hero-copy h1{
      font-size:clamp(44px,7vw,78px);
      line-height:.95;
      letter-spacing:-.07em;
      max-width:760px;
      margin-bottom:22px;
    }

    .hero-copy p{
      max-width:660px;
      color:rgba(255,255,255,.72);
      font-size:18px;
      margin-bottom:30px;
    }

    .hero-actions{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:34px;
    }

    .icon-strip{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:14px;
      max-width:690px;
    }

    .strip-item{
      display:grid;
      place-items:center;
      text-align:center;
      gap:8px;
      padding:16px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.065);
      border:1px solid rgba(255,255,255,.11);
      backdrop-filter:blur(14px);
    }

    .strip-item i{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(37,99,235,.17);
      color:var(--accent);
      font-style:normal;
      font-size:21px;
    }

    .strip-item span{
      color:rgba(255,255,255,.72);
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    .hero-board{
      position:relative;
    }

    .main-preview{
      border-radius:30px;
      padding:18px;
      background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
      border:1px solid rgba(255,255,255,.16);
      box-shadow:0 40px 110px rgba(0,0,0,.34);
      backdrop-filter:blur(18px);
    }

    .window-bar{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 8px 16px;
    }

    .window-dot{
      width:11px;
      height:11px;
      border-radius:50%;
      background:rgba(255,255,255,.3);
    }

    .preview-screen{
      overflow:hidden;
      border-radius:23px;
      background:#06101F;
      border:1px solid rgba(255,255,255,.08);
    }

    .preview-hero{
      min-height:250px;
      padding:24px;
      display:flex;
      align-items:flex-end;
      background:
        radial-gradient(circle at 78% 30%, rgba(34,197,94,.27), transparent 28%),
        linear-gradient(135deg, rgba(37,99,235,.38), rgba(37,99,235,.04)),
        #06101F;
      position:relative;
    }

    .preview-hero::before{
      content:"</>";
      position:absolute;
      right:30px;
      top:28px;
      width:82px;
      height:82px;
      display:grid;
      place-items:center;
      border-radius:25px;
      color:var(--accent);
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      font-weight:1000;
      font-size:26px;
    }

    .preview-hero h3{
      font-size:32px;
      line-height:1.05;
      letter-spacing:-.04em;
      max-width:330px;
    }

    .preview-hero p{
      margin-top:10px;
      color:rgba(255,255,255,.64);
      font-size:14px;
    }

    .preview-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border-top:1px solid rgba(255,255,255,.08);
    }

    .preview-stat{
      padding:18px;
      border-right:1px solid rgba(255,255,255,.08);
    }

    .preview-stat:last-child{
      border-right:0;
    }

    .preview-stat strong{
      display:block;
      font-size:26px;
      line-height:1;
      color:var(--white);
    }

    .preview-stat span{
      color:rgba(255,255,255,.58);
      font-size:12px;
    }

    .palette-float{
      position:absolute;
      right:-22px;
      top:-28px;
      width:210px;
      background:var(--white);
      color:var(--primary);
      border-radius:22px;
      padding:18px;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.24);
    }

    .palette-float h4{
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.12em;
      margin-bottom:14px;
    }

    .palette-row{
      display:flex;
      gap:8px;
    }

    .swatch{
      width:36px;
      height:36px;
      border-radius:10px;
      border:1px solid rgba(2,8,23,.08);
    }

    .swatch:nth-child(1){background:#0B1220;}
    .swatch:nth-child(2){background:#2563EB;}
    .swatch:nth-child(3){background:#22C55E;}
    .swatch:nth-child(4){background:#F1F5F9;}

    .trust-float{
      position:absolute;
      left:-18px;
      bottom:-24px;
      display:flex;
      align-items:center;
      gap:12px;
      width:245px;
      padding:16px;
      border-radius:20px;
      background:var(--white);
      color:var(--primary);
      box-shadow:var(--shadow);
    }

    .trust-float i{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:15px;
      background:rgba(34,197,94,.13);
      color:var(--accent);
      font-style:normal;
      font-size:23px;
      font-weight:1000;
    }

    .trust-float strong{
      display:block;
      font-size:15px;
    }

    .trust-float span{
      color:var(--muted);
      font-size:12px;
    }

    /* Service rail */
    .service-rail{
      margin-top:-40px;
      position:relative;
      z-index:5;
    }

    .rail-card{
      background:var(--white);
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:0 20px 70px rgba(15,23,42,.11);
      padding:18px;
      display:grid;
      grid-template-columns:repeat(9,1fr);
      gap:8px;
    }

    .rail-service{
      display:grid;
      place-items:center;
      text-align:center;
      gap:8px;
      padding:18px 10px;
      border-radius:18px;
      transition:.22s ease;
    }

    .rail-service:hover{
      background:var(--bg);
      transform:translateY(-4px);
    }

    .rail-service i{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:rgba(37,99,235,.09);
      color:var(--secondary);
      font-style:normal;
      font-size:23px;
      border:1px solid rgba(37,99,235,.1);
    }

    .rail-service:nth-child(4n) i{
      color:var(--accent);
      background:rgba(34,197,94,.1);
      border-color:rgba(34,197,94,.12);
    }

    .rail-service span{
      font-size:12px;
      font-weight:900;
      color:var(--primary);
      line-height:1.2;
    }

    /* Main services */
    .service-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }

    .service-card{
      position:relative;
      overflow:hidden;
      padding:30px;
      border:1px solid var(--line);
      background:var(--white);
      border-radius:var(--radius);
      transition:.25s ease;
    }

    .service-card::before{
      content:"";
      position:absolute;
      width:160px;
      height:160px;
      right:-70px;
      top:-80px;
      border-radius:50%;
      background:rgba(37,99,235,.08);
      transition:.25s ease;
    }

    .service-card:hover{
      transform:translateY(-8px);
      box-shadow:0 24px 70px rgba(15,23,42,.11);
      border-color:rgba(37,99,235,.25);
    }

    .service-card:hover::before{
      background:rgba(34,197,94,.12);
    }

    .service-icon{
      width:58px;
      height:58px;
      display:grid;
      place-items:center;
      border-radius:18px;
      background:var(--bg);
      color:var(--secondary);
      font-size:26px;
      margin-bottom:22px;
      position:relative;
      z-index:1;
    }

    .service-card h3{
      position:relative;
      z-index:1;
      color:var(--primary);
      font-size:21px;
      margin-bottom:10px;
    }

    .service-card p{
      position:relative;
      z-index:1;
      color:var(--muted);
      font-size:15px;
      margin-bottom:18px;
    }

    .service-card a{
      position:relative;
      z-index:1;
      color:var(--secondary);
      font-weight:900;
      font-size:14px;
    }

    /* Growth */
    .growth{
      background:
        radial-gradient(circle at 16% 10%, rgba(37,99,235,.12), transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(34,197,94,.12), transparent 25%),
        var(--bg);
    }

    .growth-grid{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:38px;
      align-items:center;
    }

    .growth-panel{
      color:var(--white);
      background:
        radial-gradient(circle at 72% 12%, rgba(34,197,94,.22), transparent 28%),
        linear-gradient(135deg,var(--primary),#06172E);
      border-radius:34px;
      padding:38px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }

    .growth-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:34px 34px;
      opacity:.8;
    }

    .growth-panel > *{
      position:relative;
      z-index:1;
    }

    .growth-panel h2{
      font-size:clamp(32px,5vw,50px);
      line-height:1.08;
      letter-spacing:-.05em;
      margin-bottom:16px;
    }

    .growth-panel p{
      color:rgba(255,255,255,.72);
      margin-bottom:26px;
    }

    .check-list{
      display:grid;
      gap:14px;
      list-style:none;
    }

    .check-list li{
      display:flex;
      gap:12px;
      color:rgba(255,255,255,.84);
    }

    .check-list li::before{
      content:"✓";
      flex:0 0 25px;
      width:25px;
      height:25px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:rgba(34,197,94,.15);
      color:var(--accent);
      font-weight:1000;
    }

    .growth-cards{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .growth-card{
      background:var(--white);
      border:1px solid var(--line);
      border-radius:24px;
      padding:26px;
      transition:.22s ease;
    }

    .growth-card:hover{
      transform:translateY(-5px);
      box-shadow:0 18px 55px rgba(15,23,42,.09);
    }

    .growth-card i{
      width:52px;
      height:52px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:rgba(37,99,235,.09);
      color:var(--secondary);
      font-style:normal;
      font-size:24px;
      margin-bottom:18px;
    }

    .growth-card:nth-child(2n) i{
      background:rgba(34,197,94,.1);
      color:var(--accent);
    }

    .growth-card h3{
      color:var(--primary);
      margin-bottom:8px;
      font-size:19px;
    }

    .growth-card p{
      color:var(--muted);
      font-size:15px;
    }

    /* Process */
    .process-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .process-card{
      padding:28px;
      border-radius:24px;
      background:var(--white);
      border:1px solid var(--line);
      position:relative;
      overflow:hidden;
    }

    .process-num{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:15px;
      background:var(--primary);
      color:var(--accent);
      font-weight:1000;
      margin-bottom:18px;
    }

    .process-card h3{
      color:var(--primary);
      margin-bottom:8px;
      font-size:20px;
    }

    .process-card p{
      color:var(--muted);
      font-size:15px;
    }

    /* Portfolio */
    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }

    .portfolio-card{
      border:1px solid var(--line);
      border-radius:28px;
      background:var(--white);
      overflow:hidden;
      box-shadow:0 18px 54px rgba(15,23,42,.07);
    }

    .portfolio-visual{
      min-height:230px;
      display:grid;
      place-items:center;
      padding:26px;
      background:
        radial-gradient(circle at 80% 20%, rgba(34,197,94,.24), transparent 28%),
        linear-gradient(135deg, var(--primary), #082755);
    }

    .mini-site{
      width:100%;
      max-width:280px;
      border-radius:18px;
      padding:14px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.14);
    }

    .mini-site .line{
      height:12px;
      border-radius:999px;
      background:rgba(255,255,255,.55);
      margin:12px 0;
    }

    .mini-site .line:nth-child(1){
      width:45%;
      background:var(--green);
    }

    .mini-site .line:nth-child(2){
      width:76%;
    }

    .mini-site .line:nth-child(3){
      width:92%;
      background:rgba(37,99,235,.95);
    }

    .mini-site .box-row{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:8px;
      margin-top:16px;
    }

    .mini-site .box{
      height:54px;
      border-radius:12px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.12);
    }

    .portfolio-body{
      padding:25px;
    }

    .tag{
      display:inline-flex;
      padding:6px 11px;
      border-radius:999px;
      background:rgba(37,99,235,.08);
      color:var(--secondary);
      font-size:12px;
      font-weight:900;
      margin-bottom:12px;
    }

    .portfolio-body h3{
      color:var(--primary);
      font-size:21px;
      margin-bottom:8px;
    }

    .portfolio-body p{
      color:var(--muted);
      font-size:15px;
    }

    /* CTA */
    .cta-box{
      padding:58px;
      border-radius:34px;
      color:var(--white);
      background:
        radial-gradient(circle at 15% 10%, rgba(37,99,235,.36), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(34,197,94,.26), transparent 30%),
        var(--primary);
      display:grid;
      grid-template-columns:1fr auto;
      gap:24px;
      align-items:center;
      overflow:hidden;
      position:relative;
    }

    .cta-box::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:36px 36px;
    }

    .cta-box > *{
      position:relative;
      z-index:1;
    }

    .cta-box h2{
      font-size:clamp(31px,5vw,50px);
      line-height:1.07;
      letter-spacing:-.05em;
      margin-bottom:12px;
    }

    .cta-box p{
      max-width:720px;
      color:rgba(255,255,255,.72);
    }

    /* Testimonials */
    .testimonials-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }

    .testimonial{
      background:var(--white);
      border:1px solid var(--line);
      border-radius:24px;
      padding:28px;
    }

    .stars{
      color:#F59E0B;
      letter-spacing:2px;
      margin-bottom:14px;
      font-size:16px;
    }

    .testimonial p{
      color:var(--muted);
      margin-bottom:20px;
    }

    .person{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .avatar{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:linear-gradient(135deg,var(--secondary),var(--accent));
      color:var(--white);
      font-weight:1000;
    }

    .person strong{
      display:block;
      color:var(--primary);
    }

    .person span{
      color:var(--muted);
      font-size:13px;
    }

    /* Contact */
    .contact-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:34px;
      align-items:start;
    }

    .contact-info{
      border-radius:32px;
      padding:36px;
      color:var(--white);
      background:
        radial-gradient(circle at 80% 18%, rgba(34,197,94,.18), transparent 28%),
        linear-gradient(135deg,var(--primary),#06172E);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .contact-info h2{
      font-size:clamp(32px,5vw,48px);
      line-height:1.08;
      letter-spacing:-.05em;
      margin-bottom:14px;
    }

    .contact-info p{
      color:rgba(255,255,255,.72);
      margin-bottom:25px;
    }

    .contact-list{
      display:grid;
      gap:13px;
    }

    .contact-list a,.contact-list div{
      padding:16px;
      border-radius:17px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.8);
      display:flex;
      gap:10px;
      align-items:center;
    }

    .contact-list b{
      color:var(--accent);
    }

    form{
      padding:31px;
      border-radius:32px;
      background:var(--white);
      border:1px solid var(--line);
      box-shadow:0 18px 54px rgba(15,23,42,.07);
    }

    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }

    .field{
      display:grid;
      gap:8px;
      margin-bottom:16px;
    }

    .field.full{
      grid-column:1/-1;
    }

    label{
      font-weight:900;
      color:var(--primary);
      font-size:14px;
    }

    input,select,textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:15px;
      padding:14px 15px;
      background:var(--bg);
      color:var(--primary);
      outline:0;
      transition:.2s ease;
    }

    input:focus,select:focus,textarea:focus{
      background:var(--white);
      border-color:rgba(37,99,235,.5);
      box-shadow:0 0 0 4px rgba(37,99,235,.11);
    }

    textarea{
      min-height:132px;
      resize:vertical;
    }

    /* Footer */
    footer{
      background:#030712;
      color:var(--white);
      padding:58px 0 24px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr .8fr;
      gap:30px;
      margin-bottom:36px;
    }

    .footer-brand p{
      max-width:390px;
      color:rgba(255,255,255,.62);
      margin-top:16px;
    }

    .footer-col h3{
      margin-bottom:16px;
      font-size:16px;
    }

    .footer-col a{
      display:block;
      margin:10px 0;
      color:rgba(255,255,255,.6);
      font-size:14px;
    }

    .footer-col a:hover{
      color:var(--accent);
    }

    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.09);
      padding-top:22px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:rgba(255,255,255,.55);
      font-size:14px;
    }

    /* Responsive */
    @media(max-width:1060px){
      .rail-card{
        grid-template-columns:repeat(3,1fr);
      }

      .hero-grid,
      .growth-grid,
      .contact-grid{
        grid-template-columns:1fr;
      }

      .hero-board{
        max-width:680px;
      }

      .service-grid,
      .portfolio-grid,
      .testimonials-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .process-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .cta-box{
        grid-template-columns:1fr;
      }

      .footer-grid{
        grid-template-columns:1fr 1fr;
      }
    }

    @media(max-width:860px){
      .menu-btn{
        display:grid;
      }

      .nav-links{
        display:none;
        position:fixed;
        top:82px;
        left:16px;
        right:16px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:14px;
        background:rgba(7,16,31,.96);
        border:1px solid rgba(255,255,255,.1);
        border-radius:20px;
        backdrop-filter:blur(18px);
      }

      .nav-links.active{
        display:flex;
      }

      .nav-links a{
        padding:14px;
        border-radius:14px;
      }

      .nav-links a:hover{
        background:rgba(255,255,255,.06);
      }
    }

    @media(max-width:680px){
      .container{
        width:min(100% - 24px, var(--max));
      }

      .section{
        padding:72px 0;
      }

      .nav{
        height:72px;
      }

      .nav-links{
        top:72px;
      }

      .brand{
        font-size:20px;
      }

      .logo-mark{
        width:40px;
        height:40px;
        font-size:20px;
      }

      .brand-logo-img{
        height:min(var(--brand-logo-height, 40px), 40px);
        max-height:min(var(--brand-logo-height, 40px), 40px);
        max-width:190px;
      }

      .hero{
        padding:108px 0 62px;
        min-height:auto;
      }

      .hero-copy h1{
        font-size:clamp(42px,13vw,62px);
      }

      .hero-copy p{
        font-size:16px;
      }

      .hero-actions .btn{
        width:100%;
      }

      .icon-strip{
        grid-template-columns:1fr 1fr;
      }

      .strip-item:last-child{
        grid-column:1/-1;
      }

      .palette-float,
      .trust-float{
        position:static;
        margin-top:14px;
        width:100%;
      }

      .preview-stats{
        grid-template-columns:1fr;
      }

      .preview-stat{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
      }

      .preview-stat:last-child{
        border-bottom:0;
      }

      .rail-card,
      .service-grid,
      .growth-cards,
      .portfolio-grid,
      .testimonials-grid,
      .process-grid,
      .form-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }

      .growth-panel,
      .cta-box,
      .contact-info,
      form{
        padding:26px;
        border-radius:24px;
      }

      .footer-bottom{
        flex-direction:column;
      }
    }
  

    /* ===== Clients / Trusted-by logos (added) ===== */
    .clients{
      padding:64px 0;
      background:var(--white);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }

    .clients-head{
      text-align:center;
      margin-bottom:34px;
    }

    .clients-head p{
      color:var(--muted);
      font-size:14px;
      font-weight:900;
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    .clients-grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:16px;
    }

    .client-logo{
      display:grid;
      place-items:center;
      min-height:96px;
      padding:18px 16px;
      border-radius:18px;
      background:var(--bg);
      border:1px solid var(--line);
      transition:.25s ease;
    }

    .client-logo:hover{
      transform:translateY(-4px);
      background:var(--white);
      border-color:rgba(37,99,235,.28);
      box-shadow:0 16px 44px rgba(15,23,42,.10);
    }

    .client-logo svg{
      width:100%;
      height:auto;
      max-height:40px;
      filter:grayscale(1);
      opacity:.62;
      transition:.25s ease;
    }

    .client-logo:hover svg{
      filter:grayscale(0);
      opacity:1;
    }

    @media(max-width:1060px){
      .clients-grid{
        grid-template-columns:repeat(3,1fr);
      }
    }

    @media(max-width:680px){
      .clients-grid{
        grid-template-columns:repeat(2,1fr);
      }
    }

    /* =====================================================================
       MULTI-PAGE ADDITIONS — inner page hero, breadcrumb, service detail,
       benefits, stats, FAQ. Extends the existing token system.
    ===================================================================== */

    /* Inner page hero (shorter dark hero under the fixed nav) */
    .page-hero{
      position:relative;
      overflow:hidden;
      color:var(--white);
      padding:148px 0 70px;
      background:
        radial-gradient(circle at 12% 18%, rgba(37,99,235,.34), transparent 30%),
        radial-gradient(circle at 86% 14%, rgba(34,197,94,.18), transparent 28%),
        linear-gradient(135deg,#030712 0%, var(--primary) 55%, #061321 100%);
    }

    .page-hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, black 0%, transparent 94%);
    }

    .page-hero-inner{
      position:relative;
      z-index:2;
      max-width:820px;
    }

    .page-hero h1{
      font-size:clamp(34px,5.4vw,60px);
      line-height:1.04;
      letter-spacing:-.05em;
      margin-bottom:16px;
    }

    .page-hero p{
      color:rgba(255,255,255,.72);
      font-size:18px;
      max-width:680px;
    }

    /* Breadcrumb */
    .breadcrumb{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:9px;
      font-size:13px;
      font-weight:800;
      color:rgba(255,255,255,.6);
      margin-bottom:18px;
    }

    .breadcrumb a:hover{
      color:var(--accent);
    }

    .breadcrumb i{
      color:rgba(255,255,255,.4);
      font-style:normal;
    }

    .breadcrumb span[aria-current]{
      color:var(--accent);
    }

    /* Centered section CTA + light-background outline button */
    .section-cta{
      text-align:center;
      margin-top:44px;
    }

    .btn-outline.btn-dark{
      color:var(--primary);
      background:var(--white);
      border:1px solid var(--line);
    }

    .btn-outline.btn-dark:hover{
      color:var(--secondary);
      border-color:rgba(37,99,235,.45);
    }

    /* Narrow container variant */
    .container.narrow{
      width:min(100% - 32px, 860px);
    }

    /* Service detail layout */
    .service-detail{
      display:grid;
      grid-template-columns:1.55fr .95fr;
      gap:42px;
      align-items:start;
    }

    .service-main .lead{
      color:var(--muted);
      font-size:17px;
      margin-bottom:16px;
    }

    .block-title{
      color:var(--primary);
      font-size:clamp(24px,3vw,32px);
      letter-spacing:-.03em;
      margin:34px 0 18px;
    }

    .include-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }

    .include-card{
      display:flex;
      gap:14px;
      padding:18px;
      border:1px solid var(--line);
      border-radius:18px;
      background:var(--white);
      transition:.22s ease;
    }

    .include-card:hover{
      transform:translateY(-4px);
      box-shadow:0 16px 44px rgba(15,23,42,.08);
      border-color:rgba(37,99,235,.22);
    }

    .include-card i{
      flex:0 0 44px;
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:13px;
      background:rgba(37,99,235,.09);
      color:var(--secondary);
      font-style:normal;
      font-size:20px;
    }

    .include-card:nth-child(3n) i{
      background:rgba(34,197,94,.1);
      color:var(--accent);
    }

    .include-card strong{
      display:block;
      color:var(--primary);
      font-size:15px;
      margin-bottom:3px;
    }

    .include-card span{
      color:var(--muted);
      font-size:14px;
    }

    /* Sticky aside card */
    .service-aside{
      position:sticky;
      top:100px;
    }

    .aside-card{
      position:relative;
      overflow:hidden;
      color:var(--white);
      padding:30px;
      border-radius:28px;
      background:
        radial-gradient(circle at 80% 14%, rgba(34,197,94,.2), transparent 30%),
        linear-gradient(135deg,var(--primary),#06172E);
      box-shadow:var(--shadow);
    }

    .aside-icon{
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:var(--accent);
      font-size:26px;
      margin-bottom:16px;
    }

    .aside-card h3{
      font-size:23px;
      letter-spacing:-.02em;
      margin-bottom:12px;
    }

    .aside-ideal{
      color:rgba(255,255,255,.72);
      font-size:14px;
      margin-bottom:20px;
    }

    .aside-ideal strong{
      color:var(--accent);
    }

    .check-list.dark-check li{
      font-size:14px;
    }

    .aside-btn{
      width:100%;
      margin-top:24px;
    }

    .aside-link{
      display:block;
      text-align:center;
      margin-top:12px;
      color:rgba(255,255,255,.6);
      font-size:13px;
      font-weight:800;
    }

    .aside-link:hover{
      color:var(--accent);
    }

    /* Benefit grid */
    .benefit-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .benefit-card{
      padding:26px;
      border:1px solid var(--line);
      border-radius:22px;
      background:var(--white);
    }

    .benefit-num{
      display:block;
      font-size:30px;
      font-weight:1000;
      letter-spacing:-.04em;
      color:rgba(37,99,235,.22);
      margin-bottom:10px;
    }

    .benefit-card:nth-child(2n) .benefit-num{
      color:rgba(34,197,94,.28);
    }

    .benefit-card p{
      color:var(--primary);
      font-weight:700;
      font-size:15px;
    }

    /* Stat band */
    .stat-band{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .stat-cell{
      text-align:center;
      padding:30px 22px;
      border:1px solid var(--line);
      border-radius:22px;
      background:var(--white);
    }

    .stat-cell strong{
      display:block;
      font-size:clamp(30px,4vw,46px);
      line-height:1;
      letter-spacing:-.04em;
      color:var(--secondary);
      margin-bottom:8px;
    }

    .stat-cell:nth-child(2n) strong{
      color:var(--accent);
    }

    .stat-cell span{
      color:var(--muted);
      font-size:14px;
      font-weight:800;
    }

    /* FAQ */
    .faq{
      display:grid;
      gap:14px;
    }

    .faq-item{
      border:1px solid var(--line);
      border-radius:18px;
      background:var(--white);
      overflow:hidden;
    }

    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:20px 22px;
      font-weight:900;
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .faq-item summary::-webkit-details-marker{
      display:none;
    }

    .faq-item summary i{
      flex:0 0 auto;
      color:var(--secondary);
      font-size:24px;
      font-weight:900;
      font-style:normal;
      line-height:1;
      transition:transform .22s ease;
    }

    .faq-item[open] summary{
      color:var(--secondary);
    }

    .faq-item[open] summary i{
      transform:rotate(45deg);
    }

    .faq-item p{
      margin:0;
      padding:0 22px 20px;
      color:var(--muted);
      font-size:15px;
    }

    /* Related-services rail (variable item count) */
    .related-rail{
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    }

    /* Form helpers */
    .field-error{
      color:#DC2626;
      font-weight:700;
      font-size:13px;
    }

    .form-status{
      margin-top:14px;
      font-size:14px;
      color:var(--muted);
    }

    .form-status.is-success{
      color:#16A34A;
      font-weight:700;
    }

    /* Multi-page responsive */
    @media(max-width:1060px){
      .service-detail{
        grid-template-columns:1fr;
      }
      .service-aside{
        position:static;
        top:auto;
      }
      .benefit-grid,
      .stat-band{
        grid-template-columns:repeat(2,1fr);
      }
    }

    @media(max-width:680px){
      .page-hero{
        padding:118px 0 56px;
      }
      .page-hero p{
        font-size:16px;
      }
      .include-grid,
      .benefit-grid,
      .stat-band{
        grid-template-columns:1fr;
      }
      .aside-card{
        padding:26px;
        border-radius:24px;
      }
    }

    /* =====================================================================
       HERO REFINEMENT — cleaner spacing, professional type, no overlaps.
       Placed last so it intentionally overrides the base hero rules.
    ===================================================================== */

    .hero{
      padding:148px 0 88px;
    }

    .hero-grid{
      gap:clamp(40px,5vw,76px);
      align-items:center;
    }

    /* Headline: softer tracking, more open leading, refined scale */
    .hero-copy .eyebrow{
      margin-bottom:22px;
    }

    .hero-copy h1{
      font-size:clamp(40px,5.2vw,66px);
      line-height:1.05;
      letter-spacing:-.035em;
      max-width:680px;
      margin-bottom:22px;
    }

    .hero-copy p{
      max-width:545px;
      font-size:18px;
      line-height:1.7;
      color:rgba(255,255,255,.74);
      margin-bottom:36px;
    }

    .hero-actions{
      gap:16px;
      margin-bottom:42px;
    }

    .icon-strip{
      gap:14px;
      max-width:660px;
    }

    /* Right board: give the floating chips their own gutters so they never
       cover the window content (this is what was breaking before). */
    .hero-board{
      position:relative;
      padding:44px 28px 106px;
    }

    .main-preview{
      box-shadow:0 36px 90px rgba(0,0,0,.42);
    }

    /* Remove the decorative code badge — it collided with the palette chip */
    .preview-hero::before{
      display:none;
    }

    .preview-hero{
      min-height:230px;
    }

    /* Palette chip sits in the top-right gutter, resting on the corner */
    .palette-float{
      top:6px;
      right:2px;
      width:196px;
    }

    /* Trust chip docks below the window's bottom-left — fully clear of stats */
    .trust-float{
      left:6px;
      bottom:10px;
      width:250px;
      padding:15px 16px;
    }

    /* =====================================================================
       THEME TOGGLE + DARK THEME
       Default is dark (set on <html data-theme="dark">). The header/hero are
       intentionally dark in BOTH themes; this block re-skins the content
       surfaces, text and borders for dark mode. The two hero chips
       (.palette-float / .trust-float) are deliberately NOT flipped — they
       stay as light chips resting on the dark hero.
    ===================================================================== */

    /* --- Toggle button (lives on the always-dark header) --- */
    .nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .nav .nav-links{
      margin-left:auto;       /* keep links grouped on the right next to actions */
    }

    .nav-actions{
      margin-left:18px;
    }

    .theme-toggle{
      width:44px;
      height:44px;
      display:inline-grid;
      place-items:center;
      border-radius:13px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:#fff;
      font-size:18px;
      line-height:1;
      cursor:pointer;
      transition:.2s ease;
    }

    .theme-toggle:hover{
      border-color:rgba(34,197,94,.55);
      color:var(--accent);
      transform:translateY(-1px);
    }

    .theme-toggle .ico{ display:none; }
    [data-theme="dark"]  .theme-toggle .ico-sun{ display:block; }
    [data-theme="light"] .theme-toggle .ico-moon{ display:block; }

    /* --- Dark theme tokens (auto-flow into many components) --- */
    [data-theme="dark"]{
      --bg:#0E1A2D;                       /* alt sections, inputs, icon chips */
      --text:#D6DEEA;
      --muted:#94A3B8;
      --line:rgba(148,163,184,.16);
      --shadow:0 28px 80px rgba(0,0,0,.5);
    }

    [data-theme="dark"] body{
      background:#0A1120;                  /* base page background */
    }

    [data-theme="dark"] .clients{
      background:#0A1120;
      border-color:var(--line);
    }

    /* --- Content surfaces flip to dark cards (hero chips excluded) --- */
    [data-theme="dark"] .rail-card,
    [data-theme="dark"] .service-card,
    [data-theme="dark"] .growth-card,
    [data-theme="dark"] .process-card,
    [data-theme="dark"] .portfolio-card,
    [data-theme="dark"] .testimonial,
    [data-theme="dark"] form,
    [data-theme="dark"] .include-card,
    [data-theme="dark"] .benefit-card,
    [data-theme="dark"] .stat-cell,
    [data-theme="dark"] .faq-item,
    [data-theme="dark"] .client-logo:hover,
    [data-theme="dark"] .btn-outline.btn-dark{
      background:#131F33;
      border-color:var(--line);
    }

    /* --- Headings / strong text on those surfaces flip to light --- */
    [data-theme="dark"] .section-head h2,
    [data-theme="dark"] .rail-service span,
    [data-theme="dark"] .service-card h3,
    [data-theme="dark"] .growth-card h3,
    [data-theme="dark"] .process-card h3,
    [data-theme="dark"] .portfolio-body h3,
    [data-theme="dark"] .person strong,
    [data-theme="dark"] label,
    [data-theme="dark"] .block-title,
    [data-theme="dark"] .include-card strong,
    [data-theme="dark"] .benefit-card p,
    [data-theme="dark"] .faq-item summary,
    [data-theme="dark"] .btn-outline.btn-dark{
      color:#EEF2F8;
    }

    /* --- Form fields --- */
    [data-theme="dark"] input,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea{
      color:#EEF2F8;
      border-color:var(--line);
    }

    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder{
      color:#7C8AA0;
    }

    [data-theme="dark"] input:focus,
    [data-theme="dark"] select:focus,
    [data-theme="dark"] textarea:focus{
      background:#131F33;
      border-color:rgba(37,99,235,.55);
    }

    [data-theme="dark"] select option{
      background:#131F33;
      color:#EEF2F8;
    }

    /* --- Inline SVG client logos: lift the dark wordmark for dark bg --- */
    [data-theme="dark"] .client-logo svg text{
      fill:#EEF2F8;
    }

    /* --- Always-dark inset panels: add a hairline so they read on dark bg --- */
    [data-theme="dark"] .growth-panel,
    [data-theme="dark"] .contact-info,
    [data-theme="dark"] .aside-card,
    [data-theme="dark"] .cta-box{
      border:1px solid var(--line);
    }

    /* =====================================================================
       CHATBOT WIDGET + honeypot
    ===================================================================== */
    .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

    .chat-widget{ position:fixed; right:22px; bottom:22px; z-index:90; }

    .chat-fab{
      width:60px; height:60px; border-radius:50%;
      border:none; cursor:pointer;
      background:linear-gradient(135deg,var(--secondary),var(--secondary-2));
      color:#fff; font-size:26px; line-height:1;
      box-shadow:0 16px 40px rgba(37,99,235,.45);
      display:grid; place-items:center; transition:.25s ease;
    }
    .chat-fab:hover{ transform:translateY(-2px) scale(1.04); }
    .chat-fab .chat-fab-close{ display:none; }
    .chat-widget.open .chat-fab .chat-fab-open{ display:none; }
    .chat-widget.open .chat-fab .chat-fab-close{ display:block; font-size:30px; }

    .chat-panel{
      position:absolute; right:0; bottom:74px;
      width:360px; max-width:calc(100vw - 32px);
      height:480px; max-height:calc(100vh - 130px);
      display:flex; flex-direction:column;
      background:var(--white);
      border:1px solid var(--line);
      border-radius:22px; overflow:hidden;
      box-shadow:0 30px 80px rgba(2,8,23,.4);
      animation:chatIn .2s ease;
    }
    .chat-panel[hidden]{ display:none; }
    @keyframes chatIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

    .chat-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 16px; color:#fff;
      background:linear-gradient(135deg,var(--primary),#06172E);
    }
    .chat-head-id{ display:flex; align-items:center; gap:11px; }
    .chat-avatar{
      width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
      font-weight:900; color:#fff;
      background:linear-gradient(135deg,var(--secondary),var(--accent));
    }
    .chat-head-id strong{ display:block; font-size:15px; }
    .chat-status{ font-size:12px; color:#86efac; }
    .chat-min{ background:none; border:none; color:#fff; font-size:24px; cursor:pointer; line-height:1; opacity:.85; }
    .chat-min:hover{ opacity:1; }

    .chat-body{
      flex:1; overflow-y:auto; padding:18px 16px;
      display:flex; flex-direction:column; gap:10px;
      background:var(--bg);
    }
    .chat-msg{
      max-width:82%; padding:11px 14px; border-radius:16px;
      font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word;
    }
    .chat-msg.bot{
      align-self:flex-start; background:var(--white);
      color:var(--text); border:1px solid var(--line);
      border-bottom-left-radius:5px;
    }
    .chat-msg.user{
      align-self:flex-end; color:#fff;
      background:linear-gradient(135deg,var(--secondary),var(--secondary-2));
      border-bottom-right-radius:5px;
    }
    .chat-msg.typing{ display:flex; gap:4px; }
    .chat-msg.typing span{
      width:7px; height:7px; border-radius:50%; background:var(--muted);
      animation:chatBlink 1s infinite both;
    }
    .chat-msg.typing span:nth-child(2){ animation-delay:.2s; }
    .chat-msg.typing span:nth-child(3){ animation-delay:.4s; }
    @keyframes chatBlink{ 0%,80%,100%{ opacity:.3; } 40%{ opacity:1; } }

    .chat-input{
      display:flex; gap:8px; padding:12px;
      background:var(--white); border-top:1px solid var(--line);
    }
    .chat-input input{
      flex:1; padding:11px 14px; border:1px solid var(--line);
      border-radius:12px; font-size:14px; font-family:inherit;
      background:var(--bg); color:var(--text);
    }
    .chat-input input:focus{ outline:none; border-color:var(--secondary); }
    .chat-input button{
      width:44px; border:none; border-radius:12px; cursor:pointer;
      background:linear-gradient(135deg,var(--secondary),var(--secondary-2));
      color:#fff; font-size:16px;
    }

    @media(max-width:480px){
      .chat-panel{ height:70vh; }
    }

    /* Blog post body */
    .post-body p{
      color:var(--text);
      font-size:17px;
      line-height:1.8;
      margin-bottom:18px;
    }
    [data-theme="dark"] .post-body p{ color:#D6DEEA; }

    /* ---- Chatbot: dark-theme colours (default theme is dark) ----
       In dark mode the generic --white surfaces would render as white
       panels/bubbles with light text (unreadable), so give the widget
       explicit dark surfaces here. Light theme keeps the base styles. */
    [data-theme="dark"] .chat-panel{
      background:#131F33;
      border-color:rgba(148,163,184,.18);
    }
    [data-theme="dark"] .chat-body{
      background:#0E1A2D;
    }
    [data-theme="dark"] .chat-msg.bot{
      background:#1C2A42;
      color:#E8EEF7;
      border-color:rgba(148,163,184,.18);
    }
    [data-theme="dark"] .chat-input{
      background:#131F33;
      border-top-color:rgba(148,163,184,.18);
    }
    [data-theme="dark"] .chat-input input{
      background:#0E1A2D;
      color:#E8EEF7;
      border-color:rgba(148,163,184,.18);
    }
    [data-theme="dark"] .chat-input input::placeholder{ color:#7C8AA0; }

/* =====================================================================
   HOME HERO MATCH — NetForge Labs dark tech banner from supplied mockup
   ===================================================================== */
.hero{
  min-height:640px;
  padding:104px 0 58px;
  align-items:center;
  background:
    radial-gradient(circle at 72% 46%, rgba(37,99,235,.20), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(34,197,94,.12), transparent 23%),
    radial-gradient(circle at 14% 22%, rgba(37,99,235,.16), transparent 28%),
    linear-gradient(135deg,#031023 0%,#06162C 48%,#020817 100%);
}

.hero::before{
  opacity:.46;
  background-image:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size:38px 38px;
}

.hero::after{
  width:620px;
  height:620px;
  right:-260px;
  top:-86px;
  border-color:rgba(37,99,235,.16);
  box-shadow:inset 0 0 130px rgba(37,99,235,.14), 0 0 120px rgba(37,99,235,.06);
}

.hero-showcase{
  grid-template-columns:.94fr 1.06fr;
  gap:32px;
}

.hero-kicker{
  padding:0;
  margin:0 0 16px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#2F80FF;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.08em;
}

.hero-copy h1{
  max-width:620px;
  margin-bottom:20px;
  font-size:clamp(42px,5.05vw,62px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.hero-blue{ color:#2F80FF; }
.hero-green{ color:#22C55E; }

.hero-copy p{
  max-width:560px;
  margin-bottom:28px;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.72;
}

.hero-actions{
  margin-bottom:0;
  gap:14px;
}

.btn-whatsapp{
  color:#fff;
  background:rgba(34,197,94,.06);
  border:1px solid rgba(34,197,94,.72);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.08), 0 12px 28px rgba(0,0,0,.18);
}

.btn-whatsapp:hover{
  color:#03120A;
  background:#22C55E;
  border-color:#22C55E;
  transform:translateY(-3px);
}

.btn-whatsapp span{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  color:#22C55E;
  font-size:12px;
  line-height:1;
}

.btn-whatsapp:hover span{ color:#03120A; }

.hero-visual{
  position:relative;
  min-height:420px;
  display:grid;
  place-items:center;
}

.tech-scene{
  position:relative;
  width:min(100%,560px);
  height:410px;
  isolation:isolate;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.36));
}

.scene-base{
  position:absolute;
  left:64px;
  right:30px;
  bottom:38px;
  height:150px;
  z-index:-1;
  transform:skewX(-28deg) rotate(-4deg);
  border:1px solid rgba(37,99,235,.24);
  background:
    linear-gradient(90deg,rgba(37,99,235,.13) 1px,transparent 1px),
    linear-gradient(rgba(37,99,235,.12) 1px,transparent 1px),
    linear-gradient(135deg,rgba(37,99,235,.15),rgba(37,99,235,.025));
  background-size:42px 42px,42px 42px,auto;
  box-shadow:0 0 42px rgba(37,99,235,.25), inset 0 0 44px rgba(37,99,235,.08);
}

.orbit{
  position:absolute;
  border:1px solid rgba(37,99,235,.16);
  border-radius:32px;
  transform:rotate(-26deg) skewX(-12deg);
  pointer-events:none;
}

.orbit-one{ inset:50px 86px 82px 78px; }
.orbit-two{ inset:112px 26px 38px 168px; border-color:rgba(34,197,94,.12); }

.laptop-wrap{
  position:absolute;
  left:145px;
  top:74px;
  width:270px;
  height:230px;
  z-index:4;
}

.laptop-screen{
  position:absolute;
  left:60px;
  top:0;
  width:174px;
  height:142px;
  border-radius:11px;
  background:linear-gradient(145deg,#0B2A56,#06182F 68%);
  border:2px solid rgba(37,99,235,.75);
  box-shadow:0 0 0 5px rgba(37,99,235,.14), inset 0 0 36px rgba(47,128,255,.20), 0 20px 42px rgba(0,0,0,.26);
  transform:skewY(-26deg) rotate(3deg);
  overflow:hidden;
}

.laptop-screen::before{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:7px;
  border:1px solid rgba(47,128,255,.20);
  background:
    linear-gradient(90deg,rgba(47,128,255,.30) 1px,transparent 1px),
    linear-gradient(rgba(47,128,255,.24) 1px,transparent 1px);
  background-size:24px 24px;
}

.screen-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 60% 42%, rgba(47,128,255,.34), transparent 34%);
}

.code-mark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#2F80FF;
  font-size:34px;
  font-weight:1000;
  text-shadow:0 0 24px rgba(47,128,255,.85);
}

.laptop-base{
  position:absolute;
  left:30px;
  bottom:26px;
  width:256px;
  height:94px;
  border-radius:13px 13px 28px 28px;
  transform:skewX(-32deg) rotate(-4deg);
  background:linear-gradient(135deg,#0B2D5C,#06172F 68%,#04101F);
  border:1px solid rgba(37,99,235,.56);
  box-shadow:inset 0 0 30px rgba(47,128,255,.16), 0 18px 40px rgba(0,0,0,.32);
}

.laptop-base::before{
  content:"";
  position:absolute;
  left:36px;
  right:28px;
  top:18px;
  height:38px;
  border-radius:7px;
  background:
    repeating-linear-gradient(90deg,rgba(47,128,255,.35) 0 13px, transparent 13px 20px),
    repeating-linear-gradient(0deg,rgba(47,128,255,.18) 0 7px, transparent 7px 13px);
  opacity:.82;
}

.laptop-base::after{
  content:"";
  position:absolute;
  right:35px;
  bottom:16px;
  width:52px;
  height:22px;
  border-radius:6px;
  border:1px solid rgba(47,128,255,.28);
  background:rgba(47,128,255,.08);
}

.laptop-base span{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:3px;
  background:#2F80FF;
  box-shadow:0 0 16px rgba(47,128,255,.9);
}

.laptop-base span:nth-child(1){ left:12px; bottom:20px; }
.laptop-base span:nth-child(2){ left:42px; bottom:9px; }
.laptop-base span:nth-child(3){ right:14px; top:16px; }
.laptop-base span:nth-child(4){ right:78px; bottom:5px; }

.server-tower{
  position:absolute;
  width:68px;
  height:132px;
  z-index:2;
  border:1px solid rgba(37,99,235,.46);
  border-radius:13px;
  background:linear-gradient(145deg,#0A2B55,#061527 76%);
  box-shadow:inset 0 0 24px rgba(37,99,235,.16), 0 16px 32px rgba(0,0,0,.28);
  transform:skewY(-24deg);
}

.server-left{ left:70px; top:128px; }
.server-right{ right:18px; top:166px; transform:skewY(24deg); }

.server-tower span{
  display:block;
  height:30px;
  margin:10px 10px 0;
  border-radius:7px;
  background:rgba(47,128,255,.12);
  border:1px solid rgba(47,128,255,.20);
  position:relative;
}

.server-tower span::before{
  content:"";
  position:absolute;
  left:8px;
  top:11px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22C55E;
  box-shadow:0 0 13px rgba(34,197,94,.9);
}

.server-tower span::after{
  content:"";
  position:absolute;
  right:7px;
  top:12px;
  width:18px;
  height:4px;
  border-radius:999px;
  background:rgba(47,128,255,.64);
}

.cloud-shape{
  position:absolute;
  top:34px;
  right:42px;
  width:146px;
  height:82px;
  z-index:3;
  filter:drop-shadow(0 18px 30px rgba(47,128,255,.22));
}

.cloud-shape i{
  position:absolute;
  display:block;
  background:linear-gradient(145deg,#BBD4FF,#6BA2FF 72%,#286FE6);
  border:1px solid rgba(255,255,255,.22);
}

.cloud-shape i:nth-child(1){ left:0; bottom:0; width:138px; height:42px; border-radius:24px; }
.cloud-shape i:nth-child(2){ left:22px; bottom:24px; width:54px; height:54px; border-radius:50%; }
.cloud-shape i:nth-child(3){ left:62px; bottom:18px; width:68px; height:68px; border-radius:50%; }

.security-shield{
  position:absolute;
  right:92px;
  top:154px;
  width:92px;
  height:118px;
  z-index:5;
  display:grid;
  place-items:center;
  clip-path:polygon(50% 0, 90% 14%, 84% 72%, 50% 100%, 16% 72%, 10% 14%);
  background:linear-gradient(160deg,#36E475,#16A34A 68%,#0B6F37);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 36px rgba(0,0,0,.32), inset 0 0 24px rgba(255,255,255,.18), 0 0 34px rgba(34,197,94,.24);
}

.security-shield::before{
  content:"";
  position:absolute;
  inset:9px;
  clip-path:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.10);
}

.security-shield span{
  position:relative;
  color:#D9FFE7;
  font-size:46px;
  font-weight:1000;
  transform:rotate(-6deg);
  text-shadow:0 0 16px rgba(255,255,255,.26);
}

.data-chip{
  position:absolute;
  width:58px;
  height:44px;
  z-index:3;
  border-radius:10px;
  border:1px solid rgba(37,99,235,.35);
  background:linear-gradient(145deg,rgba(37,99,235,.20),rgba(37,99,235,.035));
  box-shadow:0 0 24px rgba(37,99,235,.20), inset 0 0 18px rgba(37,99,235,.10);
  transform:skewX(-24deg) rotate(-8deg);
}

.data-chip::before,
.data-chip::after{
  content:"";
  position:absolute;
  background:#2F80FF;
  box-shadow:0 0 12px rgba(47,128,255,.85);
}
.data-chip::before{ width:18px; height:3px; left:12px; top:14px; border-radius:999px; }
.data-chip::after{ width:7px; height:7px; right:13px; bottom:12px; border-radius:999px; }

.chip-one{ left:96px; bottom:80px; }
.chip-two{ right:210px; bottom:30px; width:70px; height:48px; }

/* Keep only the service shortcut rail as a 2-column list on tablets and phones.
   Also keep the home hero compact on tablet/mobile so the service rail appears sooner. */
@media(max-width:1060px){
  .hero{
    min-height:auto;
    padding:88px 0 36px;
  }

  .hero-showcase{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hero-copy{
    max-width:720px;
  }

  .hero-kicker{
    margin-bottom:10px;
    font-size:12px;
  }

  .hero-copy h1{
    max-width:680px;
    margin-bottom:14px;
    font-size:clamp(36px,6.2vw,52px);
    line-height:1.06;
  }

  .hero-copy p{
    max-width:620px;
    margin-bottom:18px;
    font-size:16px;
    line-height:1.55;
  }

  .hero-visual{
    min-height:250px;
    overflow:hidden;
  }

  .tech-scene{
    width:520px;
    height:390px;
    max-width:100%;
    transform:scale(.70);
    transform-origin:center top;
  }

  .service-rail .rail-card,
  .related-rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .hero{
    padding:82px 0 26px;
  }

  .hero-showcase{
    gap:0;
  }

  .hero-copy h1{
    font-size:clamp(31px,9.2vw,40px);
    line-height:1.08;
    margin-bottom:12px;
  }

  .hero-copy p{
    font-size:14px;
    line-height:1.5;
    margin-bottom:16px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:46px;
    padding:12px 16px;
  }

  .hero-visual{
    display:none;
  }

  .service-rail{
    margin-top:-10px;
  }

  .service-rail .rail-card,
  .related-rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .rail-card{
    padding:10px;
    border-radius:20px;
  }

  .rail-service{
    min-height:112px;
    padding:14px 8px;
    border-radius:15px;
  }

  .rail-service i{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:20px;
  }

  .rail-service span{
    font-size:11px;
    line-height:1.25;
  }

}

@media(max-width:420px){
  .hero{
    padding-top:76px;
  }

  .hero-copy h1{
    font-size:clamp(29px,9.8vw,36px);
  }
}

.btn-whatsapp .wa-icon{
  position:relative;
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-radius:999px;
}

.btn-whatsapp .wa-icon::before{
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:7px;
  height:7px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:2px;
  transform:rotate(-38deg);
}

.btn-whatsapp .wa-icon::after{
  content:"";
  position:absolute;
  left:1px;
  bottom:-4px;
  width:7px;
  height:7px;
  background:#06162C;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-12deg);
}

.btn-whatsapp:hover .wa-icon::after{
  background:#22C55E;
}