/* agencias.css — styles for /agencias (moved out of the home page's inline <style>).
   WHY pruned: the rules for the removed sections (pillars, featured strip, doors, privacy card,
   dropdown) were dropped with their markup. The footer grid lives in landing.css now. */
[hidden]{display:none!important}

/* ================================================================
     HERO — Immersive, conversion-optimized
     ================================================================ */.hero{
    position:relative;
    background:var(--ink);
    color:var(--on-ink);overflow:hidden;
    min-height:94vh;display:flex;flex-direction:column;justify-content:flex-end;
  }
/* Ambient gradient orbs */.hero::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:
      radial-gradient(ellipse 70% 55% at 72% 18%, rgba(201,169,110,.1), transparent 55%),
      radial-gradient(ellipse 55% 75% at 8% 82%, rgba(45,138,133,.14), transparent 50%),
      radial-gradient(ellipse 35% 45% at 50% 50%, rgba(20,34,55,.55), transparent);
  }
/* Animated floating orb */.hero-orb{
    position:absolute;z-index:1;pointer-events:none;
    border-radius:50%;filter:blur(80px);opacity:.6;
  }
.hero-orb-1{
    width:400px;height:400px;top:-10%;right:5%;
    background:radial-gradient(circle,rgba(201,169,110,.2),transparent 70%);
    animation:orbFloat 12s ease-in-out infinite;
  }
.hero-orb-2{
    width:300px;height:300px;bottom:10%;left:-5%;
    background:radial-gradient(circle,rgba(45,138,133,.18),transparent 70%);
    animation:orbFloat 15s ease-in-out infinite reverse;
  }
@keyframes orbFloat{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(20px,-30px) scale(1.05)}
    66%{transform:translate(-15px,20px) scale(.95)}
  }
/* Subtle grain texture */.hero::after{
    content:"";position:absolute;inset:0;z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.025;pointer-events:none;mix-blend-mode:overlay;
  }
.hero .wrap{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:end;
    padding-top:140px;padding-bottom:120px;
  }
.hero-content{padding-bottom:28px}
.hero-eyebrow{
    color:var(--gold);display:inline-flex;align-items:center;gap:12px;margin-bottom:32px;
  }
.hero-eyebrow::before{content:"";width:36px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.hero h1{
    font-size:var(--text-5xl);
    letter-spacing:-.035em;font-weight:300;line-height:1.02;
  }
.hero h1 em{font-style:italic;color:var(--gold);font-weight:300}
.hero-sub{
    margin-top:32px;font-size:var(--text-md);color:var(--on-ink-dim);
    max-width:32em;line-height:1.75;
  }
/* ── Module catalogue ──
     The product is small; saying what it already does, module by module, with
     the unbuilt one labelled honestly, reads as a platform without pretending
     anything ships that does not. Shipped modules are links. "Pronto" is not
     clickable, because a card that goes nowhere teaches people not to click. */.modules{
    margin-top:34px;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;
  }
.module{
    position:relative;display:flex;flex-direction:column;gap:5px;
    padding:20px 22px 22px;border-radius:var(--radius-lg);
    background:rgba(240,237,232,.04);border:1px solid rgba(240,237,232,.1);
    text-decoration:none;transition:all var(--duration) ease;
  }
a.module:hover{
    background:rgba(240,237,232,.07);border-color:var(--gold-light);
    transform:translateY(-3px);
  }
.module-name{
    font-family:var(--display);font-size:1.04rem;color:var(--on-ink);
    font-weight:400;line-height:1.25;padding-right:56px;
  }
.module-desc{font-size:.78rem;color:var(--on-ink-dim);line-height:1.5}
.module-status{
    position:absolute;top:20px;right:20px;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;
  }
.module-status.on{color:var(--sea);background:rgba(94,196,190,.12);border:1px solid rgba(94,196,190,.3)}
.module-status.soon{color:var(--on-ink-dim);background:rgba(240,237,232,.05);border:1px solid rgba(240,237,232,.12)}
.module-soon{opacity:.6}
@media (max-width:900px){
  .modules{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .modules{grid-template-columns:1fr}
}
.hero-cta{margin-top:20px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-cta .btn-gold{font-size:.92rem;padding:15px 32px}
/* Trust badges beneath CTA */.hero-trust{
    margin-top:48px;display:flex;gap:10px;flex-wrap:wrap;
  }
.hero-trust-badge{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
    color:var(--on-ink-faint);
    background:rgba(240,237,232,.04);
    border:1px solid rgba(240,237,232,.06);
    border-radius:999px;padding:7px 16px;
  }
.hero-trust-badge svg{width:14px;height:14px;stroke:var(--gold);stroke-width:1.5;fill:none}
/* Bottom edge transition — organic curve */.hero-edge{
    position:absolute;left:0;right:0;bottom:-1px;z-index:3;
    line-height:0;
  }
.hero-edge svg{display:block;width:100%;height:auto}
/* ================================================================
     DEMO CARD (signature interactive)
     ================================================================ */.demo{position:relative}
.demo-card{
    background:rgba(240,237,232,.03);
    border:1px solid rgba(240,237,232,.08);
    border-radius:var(--radius-2xl);
    padding:20px;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:
      0 48px 96px -32px rgba(0,0,0,.5),
      0 0 0 1px rgba(240,237,232,.04) inset;
    transition:box-shadow var(--duration-slow) ease;
  }
.demo-card:hover{
    box-shadow:
      0 56px 100px -28px rgba(0,0,0,.55),
      0 0 0 1px rgba(240,237,232,.06) inset;
  }
/* Decorative corner accent */.demo-card::before{
    content:"";position:absolute;top:-1px;right:24px;
    width:60px;height:3px;border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
.listing{
    display:flex;gap:16px;align-items:center;
    padding:14px;border-radius:var(--radius);
    background:rgba(10,22,40,.45);
    border:1px solid rgba(240,237,232,.06);
    transition:background var(--duration) ease;
  }
.listing:hover{background:rgba(10,22,40,.55)}
.listing-photo{
    width:88px;height:72px;border-radius:var(--radius-sm);flex:none;
    background:
      linear-gradient(150deg,rgba(45,138,133,.8),rgba(31,107,103,.9) 55%,rgba(10,22,40,.6)),
      radial-gradient(circle at 70% 25%,rgba(201,169,110,.5),transparent 40%);
    position:relative;overflow:hidden;
    background-size:cover;background-position:center;
  }
/* min-width:0 lets this shrink past its content; without it a flex item
     refuses to go below min-content and pushes the whole row wider than the
     phone. The title and location get ellipsis rather than forcing width. */.listing-info{flex:1;min-width:0}
.listing-info .t,.listing-info .loc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-info .t{font-family:var(--display);font-size:1rem;color:var(--on-ink);font-weight:400}
.listing-info .loc{font-family:var(--mono);font-size:.64rem;color:var(--gold);letter-spacing:.06em;margin-top:4px}
.listing-specs{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:9px;font-family:var(--mono);font-size:.64rem;color:var(--on-ink-dim);min-width:0}
/* Stays nowrap — a price broken across lines is worse than a narrow row —
     but flex:none stops it being counted twice, and the row is allowed to wrap
     under it on very small screens instead of widening the page. */.listing-price{font-family:var(--mono);font-weight:700;color:var(--gold);font-size:.96rem;text-align:right;white-space:nowrap;flex:none}
.demo-arrow{
    text-align:center;font-family:var(--mono);font-size:.62rem;
    color:var(--on-ink-faint);letter-spacing:.18em;text-transform:uppercase;
    margin:16px 0 14px;
    display:flex;align-items:center;gap:12px;justify-content:center;
  }
.demo-arrow::before,.demo-arrow::after{
    content:"";flex:1;max-width:48px;height:1px;background:rgba(240,237,232,.1);
  }
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip{
    font-family:var(--body);font-weight:600;font-size:.76rem;
    color:var(--on-ink-dim);
    background:rgba(10,22,40,.35);
    border:1px solid rgba(240,237,232,.06);
    border-radius:var(--radius-sm);padding:11px 6px;cursor:pointer;
    text-align:center;
    transition:all var(--duration) ease;
    display:flex;flex-direction:column;align-items:center;gap:5px;
  }
.chip svg{width:18px;height:18px;stroke:var(--on-ink-dim);opacity:.7;transition:all var(--duration) ease}
.chip:hover{border-color:var(--gold-light);color:var(--on-ink)}
.chip:hover svg{stroke:var(--on-ink);opacity:1}
.chip.on{
    background:linear-gradient(160deg,var(--gold),var(--gold-deep));
    border-color:var(--gold);color:var(--ink);
  }
.chip.on svg{stroke:var(--ink);opacity:1}
.preview{
    margin-top:14px;background:var(--paper);border-radius:var(--radius);
    padding:20px;min-height:136px;color:var(--on-sand);position:relative;overflow:hidden;
    transition:background var(--duration) ease;
  }
.pv-tag{
    position:absolute;top:12px;right:14px;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold);background:rgba(201,169,110,.08);
    padding:3px 10px;border-radius:6px;
  }
.pv-title{font-family:var(--display);font-size:1rem;color:var(--ink);max-width:80%}
.pv-body{font-size:.82rem;color:var(--on-sand-dim);margin-top:8px;max-width:92%;line-height:1.6}
.pv-row{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.pv-pill{font-family:var(--mono);font-size:.6rem;background:var(--sand);color:var(--sea-deep);padding:4px 9px;border-radius:6px}
.pv-dots{display:flex;gap:6px;margin-top:12px}
.pv-dots i{width:24px;height:5px;border-radius:3px;background:var(--sand-2)}
.pv-dots i.a{background:var(--sea)}
/* Real visual mockups in the preview panel — a photo-based header that
     matches the actual export, instead of plain text standing in for it. */.pv-thumb{
    width:100%;aspect-ratio:16/9;border-radius:var(--radius-sm);
    background-size:cover;background-position:center;background-color:var(--ink);
    position:relative;overflow:hidden;margin-bottom:14px;
  }
.pv-thumb.square{aspect-ratio:1/1}
.pv-thumb.tall{aspect-ratio:9/13;max-width:110px;margin-left:0}
.pv-thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,40,.05) 0%,rgba(10,22,40,.18) 45%,rgba(10,22,40,.85) 100%)}
.pv-thumb-price{
    position:absolute;top:8px;right:8px;background:var(--gold);color:var(--ink);
    font-family:var(--mono);font-weight:700;font-size:.6rem;padding:4px 9px;border-radius:6px;
  }
.pv-thumb-cap{
    position:absolute;left:10px;right:10px;bottom:8px;color:#fff;
    font-family:var(--display);font-size:.86rem;line-height:1.22;
  }
.pv-thumb-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);
    display:flex;align-items:center;justify-content:center;
  }
.pv-thumb-play svg{width:13px;height:13px;fill:var(--ink)}
.pv-mini-strip{display:flex;gap:5px;margin-bottom:14px}
.pv-mini-slide{
    flex:1;aspect-ratio:1/1;border-radius:6px;background-size:cover;background-position:center;
    position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:5px;
  }
.pv-mini-slide span{position:relative;font-family:var(--mono);font-size:.42rem;color:rgba(255,255,255,.85);letter-spacing:.04em}
.pv-mini-slide .ov{position:absolute;inset:0}
/* ================================================================
     AUDIENCE SEGMENTATION — "Para quien es PropLync"
     ================================================================ */.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.audience-card{
    background:var(--white);border:1px solid rgba(26,36,56,.05);
    border-radius:var(--radius-lg);padding:36px 32px;
    display:flex;flex-direction:column;
    transition:transform var(--duration-slow) var(--ease-expo),box-shadow var(--duration-slow) var(--ease-expo);
  }
.audience-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.audience-card .aud-eyebrow{
    font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);margin-bottom:14px;display:block;
  }
.audience-card h3{font-size:1.3rem;color:var(--ink);font-weight:400;margin-bottom:6px}
.audience-card .aud-sub{font-size:.86rem;color:var(--on-sand-dim);line-height:1.6;margin-bottom:20px}
.audience-card ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.audience-card li{
    font-size:.86rem;color:var(--on-sand-dim);padding:10px 0 10px 22px;
    position:relative;border-top:1px solid rgba(26,36,56,.04);line-height:1.55;
  }
.audience-card li:first-child{border-top:0}
.audience-card li::before{
    content:"";position:absolute;left:0;top:17px;width:10px;height:5px;
    border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
  }
.audience-card .btn{width:100%;justify-content:center}
.step{
    padding:36px 28px;
    border-top:2px solid rgba(26,36,56,.06);
    position:relative;
    transition:background var(--duration) ease,border-color var(--duration) ease;
  }
.step:hover{
    background:rgba(201,169,110,.03);
    border-top-color:var(--gold);
  }
.step::before{
    counter-increment:s;content:"0" counter(s);
    font-family:var(--mono);font-size:.72rem;color:var(--gold);font-weight:700;
    display:block;margin-bottom:18px;
  }
.step h3{font-size:1.14rem;color:var(--ink)}
.step p{font-size:.88rem;color:var(--on-sand-dim);margin-top:10px;line-height:1.65}
/* ================================================================
     PIECES — 6 content outputs
     ================================================================ */.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.piece{
    background:var(--white);border:1px solid rgba(26,36,56,.05);
    border-radius:var(--radius-lg);padding:32px;
    transition:transform var(--duration-slow) var(--ease-expo),box-shadow var(--duration-slow) var(--ease-expo);
    position:relative;
  }
.piece:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
  }
.piece .ic{
    width:50px;height:50px;border-radius:var(--radius-md);
    background:linear-gradient(145deg,var(--ink),var(--ink-2));
    display:flex;align-items:center;justify-content:center;margin-bottom:22px;
    box-shadow:var(--shadow-sm);
  }
.piece .ic svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5}
.piece h3{font-size:1.2rem;color:var(--ink)}
.piece p{font-size:.9rem;color:var(--on-sand-dim);margin-top:10px;line-height:1.65}
.piece .fmt{
    font-family:var(--mono);font-size:.62rem;color:var(--gold);letter-spacing:.1em;
    margin-top:18px;text-transform:uppercase;
    padding-top:14px;border-top:1px solid rgba(26,36,56,.05);
  }
/* Guard rails */.guard{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.guard div{
    padding:26px;border-left:2px solid var(--gold);
    background:var(--sand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    transition:transform var(--duration) ease;
  }
.guard div:hover{transform:translateX(4px)}
.guard h4{font-family:var(--body);font-weight:700;font-size:.94rem;color:var(--ink);margin:0}
.guard p{font-size:.86rem;color:var(--on-sand-dim);margin-top:8px;line-height:1.65}
/* ================================================================
     ROI CALCULATOR
     ================================================================ */.roi{
    background:var(--ink);color:var(--on-ink);
    position:relative;overflow:hidden;
  }
.roi::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse 45% 65% at 18% 80%,rgba(45,138,133,.07),transparent),
      radial-gradient(ellipse 35% 45% at 82% 20%,rgba(201,169,110,.05),transparent);
  }
.roi .wrap{position:relative;z-index:1}
.roi h2{color:var(--on-ink)}
.roi .sec-head .eyebrow{color:var(--gold)}
.roi .sec-head .eyebrow::before{background:linear-gradient(90deg,var(--gold),transparent)}
.roi p{color:var(--on-ink-dim)}
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.roi-form{
    background:rgba(240,237,232,.03);
    border:1px solid rgba(240,237,232,.07);
    border-radius:var(--radius-xl);padding:36px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
.field{margin-bottom:24px}
.field label{
    display:flex;justify-content:space-between;
    font-size:.86rem;color:var(--on-ink);font-weight:600;margin-bottom:12px;
  }
.field .val{font-family:var(--mono);color:var(--gold)}
input[type=range]{
    width:100%;-webkit-appearance:none;height:4px;border-radius:4px;
    background:rgba(240,237,232,.1);outline:none;
    transition:background var(--duration) ease;
  }
input[type=range]:hover{background:rgba(240,237,232,.16)}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:linear-gradient(160deg,var(--gold),var(--gold-deep));cursor:pointer;
    box-shadow:0 0 0 4px rgba(201,169,110,.18);
    transition:box-shadow var(--duration) ease,transform var(--duration) ease;
  }
input[type=range]::-webkit-slider-thumb:hover{
    box-shadow:0 0 0 7px rgba(201,169,110,.25);
    transform:scale(1.1);
  }
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:linear-gradient(160deg,var(--gold),var(--gold-deep));cursor:pointer}
.curr{
    display:inline-flex;border:1px solid rgba(240,237,232,.12);
    border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:.68rem;
  }
.curr button{background:transparent;color:var(--on-ink-dim);border:0;padding:7px 14px;cursor:pointer;font-family:var(--mono);font-size:.68rem;transition:all var(--duration) ease}
.curr button.on{background:linear-gradient(160deg,var(--gold),var(--gold-deep));color:var(--ink);font-weight:700}
.roi-out{padding:8px 0}
.roi-big{
    font-family:var(--display);font-size:clamp(3rem,6.5vw,4.6rem);
    color:var(--gold);line-height:1;font-weight:300;
  }
.roi-big small{
    font-family:var(--mono);font-size:.78rem;color:var(--on-ink-dim);
    display:block;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;
    font-weight:400;
  }
.roi-second{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.roi-second div .n{font-family:var(--mono);font-size:1.5rem;color:var(--on-ink);font-weight:700}
.roi-second div .l{font-size:.78rem;color:var(--on-ink-dim);margin-top:4px}
.roi-note{font-size:.78rem;color:var(--on-ink-faint);margin-top:36px;font-style:italic;max-width:36em;line-height:1.65}
/* ================================================================
     FAQ ACCORDION
     ================================================================ */.faq-list{max-width:52em}
.faq-item{border-top:1px solid rgba(26,36,56,.08);padding:22px 0}
.faq-item:last-child{border-bottom:1px solid rgba(26,36,56,.08)}
.faq-item summary{
    cursor:pointer;list-style:none;font-family:var(--display);font-size:1.08rem;color:var(--ink);
    font-weight:400;display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
    content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--gold);flex:none;
    transition:transform var(--duration) ease;
  }
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{font-size:.9rem;color:var(--on-sand-dim);margin-top:14px;line-height:1.7;max-width:44em}
/* ================================================================
     SOCIAL PROOF — testimonials
     ================================================================ */.proof{padding:var(--sp-24) 0;background:var(--ink);position:relative;overflow:hidden}
.proof::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse 50% 70% at 20% 80%,rgba(45,138,133,.08),transparent),
      radial-gradient(ellipse 40% 50% at 80% 20%,rgba(201,169,110,.06),transparent);
  }
.proof .wrap{position:relative;z-index:1}
.proof .sec-head h2{color:var(--on-ink)}
.proof .sec-head p{color:var(--on-ink-dim)}
.proof .sec-head .eyebrow{color:var(--gold)}
.proof .sec-head .eyebrow::before{background:linear-gradient(90deg,var(--gold),transparent)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proof-card{
    background:rgba(240,237,232,.04);
    border:1px solid rgba(240,237,232,.08);
    border-radius:var(--radius-lg);padding:32px;
    display:flex;flex-direction:column;
    transition:transform var(--duration-slow) var(--ease-expo),box-shadow var(--duration-slow) var(--ease-expo),border-color var(--duration) ease;
  }
.proof-card:hover{
    transform:translateY(-4px);
    border-color:rgba(201,169,110,.2);
    box-shadow:0 20px 48px -16px rgba(0,0,0,.3);
  }
.proof-stars{display:flex;gap:3px;margin-bottom:16px}
.proof-stars svg{width:16px;height:16px;fill:var(--gold);stroke:none}
.proof-quote{
    font-family:var(--display);font-size:1.06rem;color:var(--on-ink);
    font-weight:400;font-style:italic;line-height:1.55;flex:1;
  }
.proof-author{
    margin-top:20px;padding-top:16px;
    border-top:1px solid rgba(240,237,232,.08);
    display:flex;align-items:center;gap:12px;
  }
.proof-avatar{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,var(--sea),var(--sea-deep));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:.72rem;color:var(--on-ink);font-weight:700;
    flex:none;
  }
.proof-name{font-size:.86rem;color:var(--on-ink);font-weight:600}
.proof-role{font-family:var(--mono);font-size:.64rem;color:var(--on-ink-faint);letter-spacing:.04em;margin-top:2px}
@media (max-width:900px){
  .proof-grid{grid-template-columns:1fr}
}
/* ================================================================
     MID-PAGE MICRO-CONVERSION CTA
     ================================================================ */.micro-cta{
    position:relative;overflow:hidden;
    padding:var(--sp-20) 0;
  }
.micro-cta-inner{
    position:relative;
    background:var(--ink);
    border-radius:var(--radius-2xl);
    padding:56px 48px;
    display:flex;align-items:center;justify-content:space-between;gap:40px;
    overflow:hidden;
    box-shadow:var(--shadow-2xl);
  }
.micro-cta-inner::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse 55% 80% at 95% 50%,rgba(45,138,133,.12),transparent),
      radial-gradient(ellipse 40% 60% at 5% 50%,rgba(201,169,110,.08),transparent);
    pointer-events:none;
  }
.micro-cta-inner::after{
    content:"";position:absolute;top:0;left:48px;right:48px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,169,110,.3),transparent);
  }
.micro-cta-content{position:relative;z-index:1;flex:1;min-width:0}
.micro-cta-content .eyebrow{
    color:var(--gold);margin-bottom:14px;
    display:inline-flex;align-items:center;gap:12px;
  }
.micro-cta-content .eyebrow::before{
    content:"";width:24px;height:1px;
    background:linear-gradient(90deg,var(--gold),transparent);
  }
.micro-cta-content h3{
    font-family:var(--display);font-size:clamp(1.6rem,3.5vw,2.2rem);
    color:var(--on-ink);font-weight:300;line-height:1.15;
    letter-spacing:-.02em;
  }
.micro-cta-content h3 em{color:var(--gold);font-style:italic}
.micro-cta-content p{
    color:var(--on-ink-dim);font-size:var(--text-md);
    margin-top:14px;max-width:34em;line-height:1.7;
  }
.micro-cta-actions{
    position:relative;z-index:1;display:flex;flex-direction:column;
    align-items:flex-end;gap:12px;flex:none;
  }
.micro-cta-actions .btn-gold{
    font-size:.94rem;padding:16px 36px;
    white-space:nowrap;
  }
.micro-cta-actions .micro-note{
    font-family:var(--mono);font-size:.64rem;
    color:var(--on-ink-faint);letter-spacing:.04em;
    text-align:right;
  }
@media (max-width:900px){
  .micro-cta-inner{
      flex-direction:column;align-items:flex-start;
      padding:40px 32px;gap:28px;
    }
  .micro-cta-actions{
      align-items:flex-start;width:100%;
    }
  .micro-cta-actions .btn-gold{width:100%;justify-content:center}
  .micro-cta-actions .micro-note{text-align:left}
}
@media (max-width:560px){
  .micro-cta{padding:var(--sp-12) 0}
  .micro-cta-inner{padding:32px 24px;border-radius:var(--radius-xl)}
}
/* ================================================================
     CTA — final conversion with contact form
     ================================================================ */.cta{
    background:var(--ink);color:var(--on-ink);
    position:relative;overflow:hidden;
  }
.cta::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse 45% 65% at 50% 100%,rgba(201,169,110,.1),transparent),
      radial-gradient(ellipse 35% 45% at 80% 20%,rgba(45,138,133,.06),transparent);
  }
.cta .wrap{position:relative;z-index:1}
.cta-layout{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
  }
.cta-text h2{
    font-size:clamp(2rem,4.5vw,3.2rem);color:var(--on-ink);
    font-weight:300;letter-spacing:-.03em;line-height:1.1;
  }
.cta-text h2 em{color:var(--gold);font-style:italic}
.cta-text p{color:var(--on-ink-dim);margin:20px 0 0;max-width:28em;font-size:var(--text-md);line-height:1.75}
.cta-text .cta-perks{
    margin-top:28px;display:flex;flex-direction:column;gap:12px;
  }
.cta-text .cta-perk{
    display:flex;align-items:center;gap:10px;
    font-size:.88rem;color:var(--on-ink-dim);
  }
.cta-perk svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5;flex:none}
.cta-form{
    background:rgba(240,237,232,.04);
    border:1px solid rgba(240,237,232,.08);
    border-radius:var(--radius-xl);padding:36px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
.cta-form .field{margin-bottom:20px}
.cta-form label{
    display:block;font-size:.84rem;color:var(--on-ink);font-weight:600;margin-bottom:8px;
  }
.cta-form input,.cta-form select,.cta-form textarea{
    width:100%;font-family:var(--body);font-size:.9rem;
    background:rgba(10,22,40,.5);color:var(--on-ink);
    border:1px solid rgba(240,237,232,.12);border-radius:var(--radius-sm);
    padding:12px 14px;transition:border-color var(--duration) ease,box-shadow var(--duration) ease;
  }
.cta-form input::placeholder,.cta-form textarea::placeholder{color:var(--on-ink-faint)}
.cta-form input:focus,.cta-form select:focus,.cta-form textarea:focus{
    outline:none;border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,169,110,.12);
  }
.cta-form textarea{resize:vertical;min-height:80px;font-family:var(--body)}
.cta-form select{-webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238d95a3' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
  }
.cta-form select option{background:var(--ink);color:var(--on-ink)}
.cta-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cta-form-success{
    text-align:center;padding:40px 20px;
    display:none;flex-direction:column;align-items:center;gap:16px;
  }
.cta-form-success svg{width:48px;height:48px;stroke:var(--gold);fill:none;stroke-width:1.5}
.cta-form-success h4{font-family:var(--display);font-size:1.3rem;color:var(--on-ink);font-weight:400}
.cta-form-success p{font-size:.9rem;color:var(--on-ink-dim);max-width:28em;line-height:1.65}
@media (max-width:900px){
  .cta-layout{grid-template-columns:1fr;gap:40px}
  .cta-form .form-row{grid-template-columns:1fr}
}
/* Section gradient backgrounds */.sec-gradient{
    background:linear-gradient(180deg,var(--paper),var(--sand));
  }
/* ================================================================
     RESPONSIVE
     ================================================================ */@media (max-width:900px){
  .hero{min-height:auto}
  .hero .wrap{grid-template-columns:1fr;gap:52px;padding-top:88px;padding-bottom:88px}
  .hero-content{padding-bottom:0}
  .demo{max-width:480px}
  .hero-orb-1{width:250px;height:250px}
  .hero-orb-2{width:200px;height:200px}
  /* Purely decorative, and they were extending past the right edge. Now that
       html clips rather than scrolls they cannot drag the page, but keeping
       them inside avoids a clipped edge that reads as a rendering glitch. */.hero-orb{max-width:60vw;max-height:60vw}
  /* Belt and braces for the row that caused this: on a narrow phone the
       price drops under the text instead of competing with it for width. */.listing{flex-wrap:wrap}
  .listing-price{margin-left:auto}
  .grid6{grid-template-columns:1fr 1fr}
  .audience-grid{grid-template-columns:1fr}
  .guard,.roi-grid{grid-template-columns:1fr}
  .hero-trust{gap:8px}
}
@media (max-width:380px){
  /* iPhone SE class. The card's 20px padding, a 14px row inset and an 88px
       thumbnail together set a 334px floor on a 320px screen — each value is
       reasonable alone and only the sum overflows, so all three come down
       rather than any one of them disappearing. */.demo-card{padding:12px}
  .listing{padding:10px;gap:10px}
  .listing-photo{width:64px;height:52px}
  .hero h1{font-size:clamp(2rem,11vw,2.6rem)}
  /* The shrink chain has to be unbroken: a single descendant still sizing to
       min-content re-establishes the floor for every ancestor above it, which
       is how a 64px thumbnail and a short price still added up to a 310px card
       on a 320px screen. */.demo,.demo-card,.listing,.listing-info{min-width:0}
}
@media (max-width:560px){
  .hero .wrap{padding-top:56px;padding-bottom:60px}
  .chips{grid-template-columns:1fr 1fr}
  .grid6{grid-template-columns:1fr}
  .hero-trust-badge{font-size:.58rem;padding:6px 12px}
}

/* Contact form: spam trap (kept out of sight, not display:none, so simple bots still fill it) and error line */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-error{margin:12px 0 0;color:#ffb4a8;font-size:.9rem;line-height:1.5}