:root{
    --bg: #07060b;
    --bg-elev: #100c18;
    --bg-elev-2: #16101f;
    --blue: #3a6dff;
    --purple: #9a3fdc;
    --magenta: #ef1f93;
    --text: #f4f2f8;
    --text-dim: #a79fb8;
    --text-dimmer: #756e88;
    --line: rgba(244,242,248,0.09);
    --grad: linear-gradient(100deg, var(--blue) 0%, var(--purple) 52%, var(--magenta) 100%);
    --radius: 14px;
  }

  *{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;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    letter-spacing:-0.02em;
    font-weight:600;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-dimmer);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--grad);
    flex:none;
  }

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

  img{display:block;max-width:100%;}

  .wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    backdrop-filter: blur(14px);
    background: rgba(7,6,11,0.72);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:18px;
  }
  .brand img{
    width:36px;height:36px;border-radius:9px;
  }
  nav{
    display:flex;
    align-items:center;
    gap:34px;
  }
  nav a.navlink{
    font-size:14.5px;
    color:var(--text-dim);
    transition:color .2s ease;
  }
  nav a.navlink:hover{color:var(--text);}
  nav a.navlink.active{
    color:var(--text);
    position:relative;
  }
  nav a.navlink.active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-9px;
    height:2px;
    background:var(--grad);
    border-radius:2px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 20px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-grad{
    background:var(--grad);
    color:#fff;
    box-shadow:0 6px 24px -6px rgba(154,63,220,0.55);
  }
  .btn-grad:hover{box-shadow:0 10px 30px -6px rgba(239,31,147,0.6);}
  .btn-ghost{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
  }
  .btn-ghost:hover{border-color:rgba(244,242,248,0.3);}
  .btn svg{width:16px;height:16px;flex:none;}

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

  .burger{
    display:flex;
    background:none;border:none;color:var(--text);
    width:38px;height:38px;
    align-items:center;justify-content:center;
    cursor:pointer;
  }
  @media(min-width:860px){.burger{display:none;} nav.mobile-hidden{display:flex !important;}}
  nav{
    display:none;
    position:fixed;
    top:72px;left:0;right:0;
    background:var(--bg-elev);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    padding:18px 28px 26px;
    gap:18px;
  }
  nav.open{display:flex;}
  @media(min-width:860px){
    nav{display:flex !important;position:static;flex-direction:row;background:none;border:none;padding:0;gap:34px;align-items:center;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:168px 0 120px;
    overflow:hidden;
  }
  .hero-glow{
    position:absolute;
    top:-220px; right:-220px;
    width:680px;height:680px;
    background:radial-gradient(circle, rgba(154,63,220,0.32), rgba(239,31,147,0.08) 55%, transparent 72%);
    filter:blur(10px);
    pointer-events:none;
  }
  .hero-glow-2{
    position:absolute;
    bottom:-260px; left:-200px;
    width:560px;height:560px;
    background:radial-gradient(circle, rgba(58,109,255,0.24), transparent 70%);
    filter:blur(10px);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:56px;
    position:relative;
  }
  @media(min-width:960px){
    .hero-grid{grid-template-columns:1.05fr 0.85fr; align-items:center;}
  }
  .hero-eyebrow{margin-bottom:22px;}
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px 7px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--bg-elev);
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:26px;
  }
  .hero-badge::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--grad);
    flex:none;
  }
  .hero h1{
    font-size:clamp(30px, 4.6vw, 52px);
    line-height:1.12;
    max-width:26ch;
  }
  .hero h1 .accent{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lead{
    margin-top:22px;
    font-size:17.5px;
    color:var(--text-dim);
    max-width:46ch;
  }
  .hero-actions{
    margin-top:36px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }
  .hero-microcopy{
    margin-top:14px;
    font-size:13px;
    color:var(--text-dimmer);
    font-family:'JetBrains Mono', monospace;
  }
  .hero-proof{
    margin-top:32px;
    display:flex;
    gap:34px;
    flex-wrap:wrap;
  }
  .proof-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
  }
  .proof-item::before{
    content:"";
    width:16px; height:16px;
    flex:none;
    border-radius:50%;
    background:var(--grad);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat;
  }
  .proof-label{font-size:13px;color:var(--text-dim);}

  /* network visual */
  .network-vis{
    position:relative;
    aspect-ratio:1/1;
    max-width:300px;
    opacity:0.9;
    margin:0 auto;
  }
  .network-vis svg{width:100%;height:100%;}
  .net-path{
    fill:none;
    stroke-width:2;
    stroke:url(#gradline);
    stroke-linecap:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 2.4s ease forwards .4s;
  }
  @keyframes draw{to{stroke-dashoffset:0;}}
  .net-node{
    opacity:0;
    animation:pop .5s ease forwards;
    transform-origin:center;
  }
  .net-node:nth-of-type(1){animation-delay:.5s;}
  .net-node:nth-of-type(2){animation-delay:1.15s;}
  .net-node:nth-of-type(3){animation-delay:1.8s;}
  .net-node:nth-of-type(4){animation-delay:2.35s;}
  @keyframes pop{from{opacity:0; transform:scale(0.3);} to{opacity:1; transform:scale(1);}}
  .net-pulse{
    animation:pulse 2.6s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:.55; r:5;}
    50%{opacity:1; r:7;}
  }

  /* ---------- Section shared ---------- */
  section{
    padding:104px 0;
    position:relative;
  }
  .section-head{
    max-width:640px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-size:clamp(26px,3.6vw,38px);
    margin-top:16px;
  }
  .section-head p{
    margin-top:16px;
    color:var(--text-dim);
    font-size:16px;
  }

  /* ---------- Services ---------- */
  .services{
    background:var(--bg-elev);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .services-rail{
    position:relative;
  }
  .services-rail::before{
    content:"";
    position:absolute;
    left:0; right:0; top:50%;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
    display:none;
  }
  .service-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  @media(min-width:700px){.service-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:1000px){.service-grid{grid-template-columns:1fr 1fr 1fr;}}

  .process-grid{
    max-width:800px;
    margin:0 auto;
  }
  @media(min-width:1000px){.process-grid{grid-template-columns:1fr 1fr;}}
  .section-head-center{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .service-card{
    background:var(--bg-elev);
    padding:32px 28px;
    position:relative;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease, background .25s ease;
    display:block;
    color:inherit;
    text-decoration:none;
  }
  .service-card.in{opacity:1; transform:translateY(0);}
  .service-card:hover{background:var(--bg-elev-2);}
  .service-index{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    color:var(--text-dimmer);
  }
  .service-icon{
    width:38px;height:38px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    margin:18px 0 20px;
    background:var(--grad);
  }
  .service-icon svg{width:19px;height:19px;stroke:#fff;}
  .service-card h3{
    font-size:18px;
    margin-bottom:10px;
  }
  .service-card p{
    color:var(--text-dim);
    font-size:14.5px;
  }

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:52px;
  }
  @media(min-width:900px){.about-grid{grid-template-columns:0.9fr 1.1fr;align-items:center;}}
  .about-visual{
    position:relative;
    border-radius:20px;
    border:1px solid var(--line);
    background:var(--bg-elev);
    padding:44px 34px;
    overflow:hidden;
  }
  .about-visual img{
    width:120px; height:120px;
    border-radius:26px;
    margin:0 auto 26px;
  }
  .about-visual .founders{
    display:flex;
    justify-content:center;
    gap:28px;
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    color:var(--text-dimmer);
    text-align:center;
  }
  .founders b{display:block; font-family:'Space Grotesk',sans-serif; color:var(--text); font-size:15px; font-weight:600; margin-bottom:2px;}
  .about-body p{color:var(--text-dim); font-size:16px; margin-top:16px;}
  .about-body p:first-of-type{margin-top:16px;}
  .about-stats{
    margin-top:34px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
  }
  .about-stats .stat b{
    display:block;
    font-family:'Space Grotesk',sans-serif;
    font-size:24px;
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .about-stats .stat span{
    font-size:13px;
    color:var(--text-dimmer);
  }

  .about-services h3{
    font-size:18px;
    margin-bottom:12px;
  }
  .about-services > p{
    color:var(--text-dim);
    font-size:15px;
    margin-bottom:18px;
  }
  .about-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .about-list li{
    color:var(--text-dim);
    font-size:14.5px;
    padding-left:22px;
    position:relative;
  }
  .about-list li::before{
    content:"";
    position:absolute;
    left:0; top:7px;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--grad);
  }
  .about-list li strong{
    color:var(--text);
    font-weight:600;
  }
  .about-purpose{
    margin-top:58px;
    text-align:center;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }
  .about-purpose h3{
    font-size:20px;
    margin-bottom:14px;
  }
  .about-purpose > p{
    color:var(--text-dim);
    font-size:15.5px;
  }
  .about-cta-line{
    margin-top:18px;
    color:var(--text);
    font-weight:500;
  }
  .about-purpose .btn{
    margin-top:26px;
  }

  /* ---------- Quick answer block (GEO) ---------- */
  .quick-answer{
    max-width:720px;
    margin:22px 0 0;
    padding:18px 22px;
    border-left:3px solid var(--magenta);
    background:var(--bg-elev);
    border-radius:0 10px 10px 0;
  }
  .quick-answer p{
    color:var(--text-dim);
    font-size:14.5px;
    margin:0;
  }
  .quick-answer strong{
    color:var(--text);
  }

  /* ---------- FAQ accordion ---------- */
  .faq-list{
    max-width:760px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:2px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .faq-item{
    background:var(--bg-elev);
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:20px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:15.5px;
    color:var(--text);
    transition:background .2s ease;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:hover{background:var(--bg-elev-2);}
  .faq-item summary::after{
    content:"+";
    font-family:'JetBrains Mono', monospace;
    font-size:20px;
    font-weight:400;
    color:var(--text-dimmer);
    flex:none;
    transition:transform .25s ease;
  }
  .faq-item[open] summary::after{
    content:"+";
    transform:rotate(45deg);
    color:var(--magenta);
  }
  .faq-item p{
    padding:0 26px 22px;
    color:var(--text-dim);
    font-size:14.5px;
  }

  /* ---------- Contact ---------- */
  .contact{
    background:var(--bg-elev);
    border-top:1px solid var(--line);
  }
  .contact-head{
    max-width:560px;
    margin:0 auto 48px;
    text-align:center;
  }
  .contact-head h2{
    font-size:clamp(26px,3.6vw,38px);
    margin-top:16px;
  }
  .contact-head p{
    margin-top:14px;
    color:var(--text-dim);
    font-size:16px;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    max-width:840px;
    margin:0 auto;
  }
  @media(min-width:760px){
    .contact-grid{grid-template-columns:1.4fr 1fr; align-items:start;}
  }
  .contact-form{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
  @media(min-width:520px){
    .form-row{grid-template-columns:1fr 1fr;}
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .form-field label{
    font-size:13px;
    color:var(--text-dim);
  }
  .form-field input,
  .form-field select,
  .form-field textarea{
    background:var(--bg-elev-2);
    border:1px solid var(--line);
    border-radius:9px;
    padding:11px 13px;
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    outline:none;
    transition:border-color .18s ease;
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus{
    border-color:var(--purple);
  }
  .form-field textarea{resize:vertical;}
  .contact-side{
    background:linear-gradient(160deg, rgba(58,109,255,0.14), rgba(239,31,147,0.10));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .form-note{
    margin-top:12px;
    font-size:12.5px;
    color:var(--text-dimmer);
    text-align:center;
  }
  .form-honeypot{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .form-consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:2px;
  }
  .form-consent input[type="checkbox"]{
    margin-top:3px;
    width:16px;
    height:16px;
    accent-color:var(--magenta);
    flex:none;
  }
  .form-consent label{
    font-size:12.5px;
    color:var(--text-dim);
    line-height:1.5;
  }
  .form-consent a{color:var(--text); text-decoration:underline;}
  .form-alert{
    background:rgba(239,31,147,0.12);
    border:1px solid rgba(239,31,147,0.4);
    color:var(--text);
    border-radius:9px;
    padding:12px 16px;
    font-size:13.5px;
  }
  .form-field.field-error input,
  .form-field.field-error select,
  .form-field.field-error textarea{
    border-color:var(--magenta);
  }
  .field-error-msg{
    font-size:12px;
    color:#ff6fb3;
    margin-top:2px;
  }

  .contact-success{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:40px 32px;
    text-align:center;
  }
  .contact-success h3{
    font-size:19px;
    margin-bottom:10px;
  }
  .contact-success p{
    color:var(--text-dim);
    font-size:14.5px;
  }

  .contact-side-lead{
    font-size:14px;
    color:var(--text-dim);
    margin-bottom:4px;
  }
  .btn-lg{padding:15px 28px; font-size:15px;}
  .btn-whatsapp{
    background:#20b858;
    color:#fff;
    box-shadow:0 6px 24px -6px rgba(32,184,88,0.5);
  }
  .contact-meta{
    margin-top:34px;
    display:flex;
    gap:26px;
    justify-content:center;
    flex-wrap:wrap;
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    color:var(--text-dimmer);
  }
  .contact-meta a:hover{color:var(--text);}

  /* ---------- Footer ---------- */
  footer{
    padding:44px 0;
    border-top:1px solid var(--line);
  }
  .footer-inner{
    display:flex;
    flex-direction:column;
    gap:18px;
    align-items:flex-start;
  }
  @media(min-width:700px){
    .footer-inner{flex-direction:row; align-items:center; justify-content:space-between;}
  }
  .footer-brand{
    display:flex;align-items:center;gap:10px;
    font-family:'Space Grotesk',sans-serif;
    font-size:14.5px;
    color:var(--text-dim);
  }
  .footer-brand img{width:24px;height:24px;border-radius:6px;}
  .footer-links{
    display:flex;gap:22px;
    font-size:13.5px;
    color:var(--text-dimmer);
  }
  .footer-links a:hover{color:var(--text-dim);}

  /* reveal utility */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  ::selection{background:var(--magenta); color:#fff;}

  .whatsapp-float{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:200;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#20b858;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 22px -4px rgba(0,0,0,0.5);
    transition:transform .18s ease;
  }
  .whatsapp-float:hover{transform:scale(1.06);}
  .whatsapp-float svg{width:28px;height:28px;}
  @media(min-width:860px){
    .whatsapp-float{display:none;}
  }

  .back-to-top{
    position:fixed;
    right:20px;
    bottom:86px;
    z-index:200;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--bg-elev-2);
    border:1px solid var(--line);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 22px -4px rgba(0,0,0,0.5);
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease;
  }
  .back-to-top.visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .back-to-top:hover{background:var(--bg-elev);}
  .back-to-top svg{width:20px;height:20px;}
  @media(min-width:860px){
    .back-to-top{bottom:20px;}
  }

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

  .skip-link{
    position:absolute;
    top:-60px;
    left:16px;
    z-index:300;
    background:var(--magenta);
    color:#fff;
    padding:12px 20px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    transition:top .2s ease;
  }
  .skip-link:focus{
    top:16px;
  }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--text-dimmer);
  padding:140px 0 0;
}
.breadcrumb a{color:var(--text-dim);}
.breadcrumb a:hover{color:var(--text);}
.breadcrumb span.sep{color:var(--text-dimmer);}
.breadcrumb span.current{color:var(--text-dim);}

/* ---------- Simple page hero (service/blog pages) ---------- */
.page-hero{
  padding:22px 0 56px;
}
.page-hero .eyebrow{margin-bottom:18px;}
.page-hero h1{
  font-size:clamp(30px, 4.6vw, 46px);
  line-height:1.08;
  max-width:18ch;
}
.page-hero p.lead{
  margin-top:18px;
  font-size:16.5px;
  color:var(--text-dim);
  max-width:52ch;
}
.page-hero .hero-actions{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ---------- Article body typography (service & blog pages) ---------- */
.article-body{
  max-width:720px;
}
.article-body h2{
  font-size:24px;
  margin-top:44px;
  margin-bottom:16px;
}
.article-body h2:first-child{margin-top:0;}
.article-body h3{
  font-size:18px;
  margin-top:28px;
  margin-bottom:10px;
}
.article-body p{
  color:var(--text-dim);
  font-size:15.5px;
  margin-bottom:16px;
}
.article-body ul{
  margin:0 0 20px;
  padding-left:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.article-body ul li{
  color:var(--text-dim);
  font-size:15px;
  padding-left:22px;
  position:relative;
}
.article-body ul li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--grad);
}
.article-body strong{color:var(--text);}
.article-cta{
  margin-top:48px;
  padding:32px;
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(58,109,255,0.14), rgba(239,31,147,0.10));
  border:1px solid var(--line);
  text-align:center;
}
.article-cta h3{font-size:19px; margin-bottom:10px;}
.article-cta p{color:var(--text-dim); font-size:14.5px; margin-bottom:20px;}

/* ---------- Blog listing ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:700px){
  .blog-grid{grid-template-columns:1fr 1fr;}
}
.blog-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  transition:background .2s ease, transform .2s ease;
}
.blog-card:hover{background:var(--bg-elev-2); transform:translateY(-2px);}
.blog-card .article-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--text-dimmer);
  margin-bottom:14px;
}
.blog-card h2{
  font-size:19px;
  margin-bottom:10px;
}
.blog-card p{
  color:var(--text-dim);
  font-size:14.5px;
  flex:1;
}
.blog-card .read-more{
  margin-top:18px;
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.article-meta-top{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--text-dimmer);
  margin-bottom:8px;
}

/* ---------- Related services / posts grid ---------- */
.related-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:20px;
}
@media(min-width:700px){
  .related-grid{grid-template-columns:1fr 1fr 1fr;}
}
.related-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 22px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  transition:background .2s ease;
}
.related-card:hover{background:var(--bg-elev-2);}
.related-card span{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-weight:400;
  font-size:12px;
  color:var(--text-dimmer);
  margin-top:6px;
}

.service-more{
  margin-top:16px;
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  transition:color .2s ease;
}
.service-card:hover .service-more{color:var(--magenta);}

/* ---------- Comparison table (articles) ---------- */
.compare-table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0 28px;
  font-size:14px;
}
.compare-table th, .compare-table td{
  border:1px solid var(--line);
  padding:10px 14px;
  text-align:left;
  color:var(--text-dim);
}
.compare-table th{
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  background:var(--bg-elev);
}
.compare-table tr:first-child td{color:var(--text);}

/* ---------- Footer copyright line ---------- */
.footer-copy{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--text-dimmer);
  font-family:'JetBrains Mono', monospace;
}

/* ---------- Touch target minimum for burger button ---------- */
.burger{
  min-width:44px;
  min-height:44px;
}

/* ---------- Comparison section (Agencia tradicional vs LC Agencia) ---------- */
.compare-block{
  max-width:820px;
  margin:0 auto;
}
.compare-table-wide{
  font-size:14.5px;
}
.compare-table-wide th:last-child,
.compare-table-wide td:last-child{
  color:var(--text);
  font-weight:500;
  background:rgba(154,63,220,0.07);
}
.compare-table-wide th:last-child{
  background:var(--grad);
  color:#fff;
}

/* ---------- Dashboard mockup (ilustrativo, Cómo trabajamos) ---------- */
.dashboard-mockup{
  max-width:760px;
  margin:48px auto 0;
}
.dashboard-mockup-label{
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  color:var(--text-dimmer);
  margin-bottom:14px;
  letter-spacing:0.03em;
}
.dashboard-mockup-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px 18px;
}
.dashboard-mockup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13.5px;
  color:var(--text-dim);
  margin-bottom:10px;
}
.dashboard-mockup-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-dimmer);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 10px;
}
.dashboard-mockup-svg{
  width:100%;
  height:auto;
  display:block;
}
.dashboard-mockup-legend{
  display:flex;
  gap:22px;
  margin-top:8px;
  font-size:12px;
  color:var(--text-dimmer);
}
.dashboard-mockup-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dashboard-mockup-legend .dot{
  width:8px; height:8px;
  border-radius:50%;
  display:inline-block;
}
.dashboard-mockup-caption{
  margin-top:14px;
  text-align:center;
  font-size:13px;
  color:var(--text-dim);
}

/* ---------- Lead magnet (checklist PDF) ---------- */
.lead-magnet{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
  background:linear-gradient(160deg, rgba(58,109,255,0.12), rgba(239,31,147,0.09));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 34px;
}
.lead-magnet-icon{
  flex:none;
  width:52px; height:52px;
  border-radius:14px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.lead-magnet-icon svg{width:24px;height:24px;}
.lead-magnet-body{flex:1; min-width:240px;}
.lead-magnet-body h2{
  font-size:19px;
  margin-top:8px;
  margin-bottom:8px;
}
.lead-magnet-body p{
  color:var(--text-dim);
  font-size:14px;
  margin:0;
}
.lead-magnet-btn{
  flex:none;
  white-space:nowrap;
}
@media(max-width:640px){
  .lead-magnet{flex-direction:column; align-items:flex-start; text-align:left;}
  .lead-magnet-btn{width:100%; justify-content:center;}
}