:root{
    --bg:#0A0F14;
    --bg-alt:#0E151B;
    --card:#111A21;
    --teal:#00D4B8;
    --amber:#FFB238;
    --text:#EAF2F0;
    --text-dim:#8FA3A0;
    --line: rgba(234,242,240,0.10);
    --line-strong: rgba(234,242,240,0.18);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em;}
  .mono{font-family:'Space Mono',monospace;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  a{color:inherit; text-decoration:none;}

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(10,15,20,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto;}
  .logo{font-family:'Fraunces',serif; font-size:20px; font-weight:600; display:flex; align-items:center; gap:8px;}
  .logo svg{width:22px; height:22px;}
  .nav-actions{display:flex; align-items:center; gap:18px;}
  .nav-phone{font-family:'Space Mono',monospace; font-size:14px; color:var(--text-dim); display:flex; align-items:center; gap:7px;}
  .nav-phone:hover{color:var(--teal);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 20px; border-radius:100px;
    font-size:14px; font-weight:600;
    border:1px solid var(--line-strong);
    transition:all .25s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--teal); color:#06120F; border-color:var(--teal);}
  .btn-primary:hover{background:#1EEBCD; transform:translateY(-1px);}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal);}

  /* ---------- HERO ---------- */
  .hero{
    padding:96px 0 80px;
    position:relative;
    width:100%;
  }
  .hero .wrap{max-width:none; width:100%; padding:0 56px;}
  .eyebrow{
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--teal); margin-bottom:20px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--teal);}
  .hero h1{
    font-size:clamp(34px, 4.6vw, 58px); line-height:1.08; margin-bottom:22px;
  }
  .hero h1 em{font-style:italic; color:var(--teal);}
  .hero p.lead{font-size:17px; color:var(--text-dim); max-width:480px; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px;}
  .btn-lg{padding:14px 26px; font-size:15px;}
  .hero-trust{display:flex; gap:28px; flex-wrap:wrap;}
  .trust-item{font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:8px;}
  .trust-item svg{width:16px; height:16px; color:var(--amber);}

  /* SERP mockup card */
  .serp-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:26px 24px; position:relative;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .serp-browser-dots{display:flex; gap:6px; margin-bottom:18px;}
  .serp-browser-dots span{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
  .serp-url{font-family:'Space Mono',monospace; font-size:12px; color:#7FE0CC; margin-bottom:6px;}
  .serp-title{
    font-size:19px; color:#8AB4F8; font-family:'Inter',sans-serif; font-weight:500;
    min-height:26px; border-right:2px solid var(--teal);
    white-space:nowrap; overflow:hidden; display:inline-block; width:0;
    animation: typeTitle 3.4s steps(40,end) infinite;
  }
  .serp-desc{
    font-size:13.5px; color:var(--text-dim); margin-top:8px; min-height:40px; max-width:440px;
  }
  @keyframes typeTitle{
    0%{width:0;}
    35%{width:100%;}
    75%{width:100%;}
    82%{width:0;}
    100%{width:0;}
  }
  .rank-badge{
    position:absolute; top:-16px; right:24px;
    background:var(--teal); color:#06120F;
    font-family:'Space Mono',monospace; font-weight:700; font-size:13px;
    padding:8px 14px; border-radius:100px;
    box-shadow:0 8px 20px -6px rgba(0,212,184,0.6);
  }
  .rank-graph{margin-top:22px; width:100%; height:110px;}
  .rank-graph path.line{
    fill:none; stroke:var(--teal); stroke-width:2.5;
    stroke-dasharray:400; stroke-dashoffset:400;
    animation:drawLine 2.6s ease forwards 0.4s;
  }
  .rank-graph circle.dot{
    fill:var(--amber); opacity:0;
    animation:popDot .4s ease forwards 2.8s;
  }
  @keyframes drawLine{ to{stroke-dashoffset:0;} }
  @keyframes popDot{ to{opacity:1;} }
  .rank-graph .axis-label{font-family:'Space Mono',monospace; font-size:10px; fill:var(--text-dim);}

  /* ---------- MARQUEE ---------- */
  .marquee-section{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); padding:22px 0; overflow:hidden;}
  .marquee-track{display:flex; gap:64px; width:max-content; animation:scrollMarquee 28s linear infinite;}
  .marquee-track span{font-family:'Space Mono',monospace; font-size:14px; color:var(--text-dim); letter-spacing:0.03em; white-space:nowrap;}
  @keyframes scrollMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:100px 0;}
  .section-head{max-width:600px; margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:16px;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px);}
  .section-head p{color:var(--text-dim); margin-top:14px; font-size:15.5px;}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .service-card{
    background:var(--bg); padding:34px 28px; opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease, background .3s ease;
  }
  .service-card.in-view{opacity:1; transform:translateY(0);}
  .service-card:hover{background:var(--bg-alt);}
  .service-card svg{width:30px; height:30px; color:var(--teal); margin-bottom:18px;}
  .service-card h3{font-size:18px; margin-bottom:10px; font-family:'Inter',sans-serif; font-weight:600;}
  .service-card p{font-size:13.5px; color:var(--text-dim);}

  /* ---------- PROCESS TIMELINE ---------- */
  .timeline{position:relative; padding-left:44px;}
  .timeline-spine{position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line);}
  .timeline-spine-fill{position:absolute; left:0; top:0; width:100%; height:0%; background:var(--teal); transition:height .1s linear;}
  .t-step{position:relative; padding-bottom:52px; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  .t-step.in-view{opacity:1; transform:translateY(0);}
  .t-step:last-child{padding-bottom:0;}
  .t-dot{
    position:absolute; left:-44px; top:2px; width:24px; height:24px; border-radius:50%;
    background:var(--card); border:2px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:10px; color:var(--text-dim);
    transition:border-color .4s ease, color .4s ease;
  }
  .t-step.in-view .t-dot{border-color:var(--teal); color:var(--teal);}
  .t-step h3{font-size:19px; margin-bottom:8px;}
  .t-step p{font-size:14px; color:var(--text-dim); max-width:520px;}

  /* ---------- KEYWORD TABLE ---------- */
  .table-wrap{border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  thead th{
    text-align:left; padding:14px 18px; background:var(--bg-alt);
    font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim);
    border-bottom:1px solid var(--line);
  }
  tbody td{padding:14px 18px; border-bottom:1px solid var(--line); color:var(--text);}
  tbody tr:last-child td{border-bottom:none;}
  .diff-up{color:var(--teal); font-family:'Space Mono',monospace;}
  .diff-down{color:#FF6B6B; font-family:'Space Mono',monospace;}
  .pill{font-family:'Space Mono',monospace; font-size:11px; padding:4px 10px; border-radius:100px; display:inline-block;}
  .pill-high{background:rgba(255,107,107,0.15); color:#FF8A8A;}
  .pill-med{background:rgba(255,178,56,0.15); color:var(--amber);}
  .pill-low{background:rgba(0,212,184,0.15); color:var(--teal);}

  /* ---------- STATS ---------- */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .stat{background:var(--bg); padding:36px 24px; text-align:left;}
  .stat .num{font-family:'Space Mono',monospace; font-size:38px; font-weight:700; color:var(--teal);}
  .stat .label{font-size:13px; color:var(--text-dim); margin-top:8px;}

  /* ---------- CONTACT ---------- */
  .contact-section{
    background:linear-gradient(180deg, var(--bg-alt), var(--bg));
    border-top:1px solid var(--line);
  }
  .contact-inner{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;
  }
  .contact-inner h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:18px;}
  .contact-inner p{color:var(--text-dim); font-size:15.5px; max-width:460px; margin-bottom:8px;}
  .contact-note{font-family:'Space Mono',monospace; font-size:12.5px; color:var(--amber); margin-top:18px; display:flex; gap:8px; align-items:center;}
  .contact-card{
    background:var(--card); border:1px solid var(--line); border-radius:18px; padding:38px 32px;
  }
  .contact-row{display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
  .contact-row:last-child{border-bottom:none;}
  .contact-icon{width:46px; height:46px; border-radius:12px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .contact-icon svg{width:22px; height:22px; color:var(--teal);}
  .contact-row .label{font-size:12px; color:var(--text-dim); font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:0.05em;}
  .contact-row .value{font-size:18px; font-weight:600; margin-top:2px;}
  .contact-row a.value:hover{color:var(--teal);}

  footer{padding:36px 0; border-top:1px solid var(--line); text-align:center;}
  footer p{font-size:13px; color:var(--text-dim);}

  /* ---------- WHATSAPP FLOAT ---------- */
  .wa-float{
    position:fixed; right:24px; bottom:24px; z-index:60;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px -6px rgba(37,211,102,0.55);
    opacity:0; transform:translateY(20px) scale(0.8); pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
  }
  .wa-float.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .wa-float svg{width:28px; height:28px; fill:#fff;}
  .wa-float::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    box-shadow:0 0 0 0 rgba(37,211,102,0.5);
    animation:waPulse 2.4s ease-out infinite;
  }
  @keyframes waPulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,0.45);}
    100%{box-shadow:0 0 0 18px rgba(37,211,102,0);}
  }

  @media (max-width:860px){
    .hero{padding:56px 0 60px;}
    .hero .wrap{grid-template-columns:1fr; padding:0 20px;}
    .services-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:1fr 1fr;}
    .contact-inner{grid-template-columns:1fr;}
    nav{padding:16px 20px;}
    .wrap{padding:0 20px;}
    .nav-phone{display:none;}
  }