/* ============================================================
   lp.css — landing-page-only styles (ported from lp.jsx)
   ============================================================ */
.lp-hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:clamp(116px,14vh,150px); padding-bottom:clamp(48px,7vh,80px); }
.lp-hero-grid { align-items:center; width:100%; position:relative; z-index:2; }

.lp-eyebrow-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lp-rating { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.lp-rating .stars { color:var(--accent); letter-spacing:2px; }

.lp-statstrip { display:flex; gap:clamp(22px,3vw,44px); flex-wrap:wrap; margin-top:clamp(30px,3vw,42px); padding-top:26px; border-top:1px solid var(--line); }
.lp-stat .n { font-family:var(--font-display); font-weight:var(--display-weight); font-style:var(--display-style); font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-0.02em; }
.lp-stat .l { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin-top:9px; }

.lp-trust { padding:clamp(26px,3vw,40px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg-soft) 60%, transparent); }
.lp-trust .lab { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--faint); text-align:center; margin-bottom:20px; }
.lp-trust .logos { display:flex; gap:clamp(26px,4vw,58px); flex-wrap:wrap; justify-content:center; align-items:center; }
.lp-trust .logos span { font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.6vw,21px); color:var(--muted); opacity:.62; transition:opacity .3s, color .3s, transform .3s; cursor:default; }
.lp-trust .logos span:hover { opacity:1; color:var(--text); transform:translateY(-2px); }

.lp-form-card { position:relative; border-radius:20px; padding:clamp(26px,2.4vw,38px); background:color-mix(in srgb, var(--surface) 64%, transparent); border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(26px) saturate(1.25); -webkit-backdrop-filter:blur(26px) saturate(1.25); animation:lp-slidein .7s var(--ease) both, lp-cardglow 4.6s ease-in-out 1s infinite; }
.lp-form-card::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; animation:lp-borderbreathe 4.6s ease-in-out infinite; }
@keyframes lp-slidein { from{ opacity:0; transform:translateX(46px);} to{ opacity:1; transform:none;} }
@keyframes lp-cardglow { 0%,100%{ box-shadow:0 34px 90px rgba(0,0,0,.5), 0 0 0 0 transparent; } 50%{ box-shadow:0 34px 90px rgba(0,0,0,.5), 0 0 46px -8px var(--grad-glow); } }
@keyframes lp-borderbreathe { 0%,100%{ opacity:.4; } 50%{ opacity:.95; } }

.lp-form-head { font-family:var(--font-display); font-weight:var(--display-weight); font-style:var(--display-style); font-size:clamp(23px,2.3vw,30px); letter-spacing:-0.02em; line-height:1.05; background:var(--grad); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:lp-gradmove 6s ease infinite; }
@keyframes lp-gradmove { 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.lp-form-sub { color:var(--muted); font-size:14.5px; margin-top:9px; margin-bottom:22px; }

.lp-fields { display:flex; flex-direction:column; gap:15px; }

.lp-float { position:relative; }
.lp-float > input, .lp-float > textarea, .lp-float > select { width:100%; box-sizing:border-box; padding:23px 15px 9px; background:rgba(255,255,255,0.04); border:1px solid var(--line-2); border-radius:12px; color:var(--text); font-family:var(--font-body); font-size:15.5px; outline:none; transition:border-color .25s, box-shadow .25s, background .25s; }
.lp-float > select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }
.lp-float > select option { background:var(--surface); color:var(--text); }
.lp-float > textarea { min-height:96px; resize:vertical; padding-top:26px; line-height:1.5; }
.lp-float > label { position:absolute; left:15px; top:15px; color:var(--muted); font-size:15.5px; pointer-events:none; white-space:nowrap; transform-origin:left top; transition:transform .2s var(--ease), color .2s; z-index:1; }
.lp-float > input:focus, .lp-float > textarea:focus, .lp-float > select:focus { border-color:var(--accent); background:rgba(255,255,255,0.06); box-shadow:0 0 0 3px var(--accent-soft), 0 0 26px -8px var(--grad-glow); }
.lp-float > input:focus + label, .lp-float > textarea:focus + label, .lp-float > select:focus + label, .lp-float > input:not(:placeholder-shown) + label, .lp-float > textarea:not(:placeholder-shown) + label, .lp-float > select:valid + label { transform:translateY(-9px) scale(0.73); color:var(--accent); }
.lp-float.err > input, .lp-float.err > textarea, .lp-float.err > select, .lp-float.err .lp-sel-btn { border-color:#ff5470 !important; }
.lp-float.err { animation:lp-shake .42s var(--ease); }
@keyframes lp-shake { 0%,100%{transform:translateX(0)} 18%{transform:translateX(-8px)} 38%{transform:translateX(8px)} 58%{transform:translateX(-5px)} 78%{transform:translateX(5px)} }
.lp-err-msg { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:#ff5470; margin-top:6px; }

.lp-sel-chev { position:absolute; right:15px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); transition:transform .25s; }
.lp-float > select:focus ~ .lp-sel-chev { transform:translateY(-50%) rotate(180deg); color:var(--accent); }
.lp-sel-btn { width:100%; box-sizing:border-box; text-align:left; padding:23px 40px 9px 15px; background:rgba(255,255,255,0.04); border:1px solid var(--line-2); border-radius:12px; color:var(--text); font-family:var(--font-body); font-size:15.5px; cursor:pointer; outline:none; transition:border-color .25s, box-shadow .25s, background .25s; }
.lp-sel-btn[data-empty="1"] { color:transparent; }
.lp-sel.open .lp-sel-btn, .lp-sel-btn:focus { border-color:var(--accent); background:rgba(255,255,255,0.06); box-shadow:0 0 0 3px var(--accent-soft), 0 0 26px -8px var(--grad-glow); }
.lp-sel > label { position:absolute; left:15px; top:15px; color:var(--muted); font-size:15.5px; pointer-events:none; white-space:nowrap; transform-origin:left top; transition:transform .2s var(--ease), color .2s; }
.lp-sel.filled > label, .lp-sel.open > label { transform:translateY(-9px) scale(0.73); color:var(--accent); }
.lp-sel-chev { position:absolute; right:15px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); transition:transform .25s; }
.lp-sel.open .lp-sel-chev { transform:translateY(-50%) rotate(180deg); }
.lp-sel-menu { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30; max-height:248px; overflow-y:auto; background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:6px; animation:ae-pop-in .26s var(--ease) both; }
.lp-sel-opt { padding:11px 13px; border-radius:8px; font-size:15px; color:var(--text); cursor:pointer; transition:background .18s, color .18s; }
.lp-sel-opt:hover, .lp-sel-opt.on { background:var(--accent-soft); color:var(--accent); }

.lp-form-foot { font-size:12px; color:var(--faint); margin-top:14px; text-align:center; }

.lp-success { text-align:center; padding:30px 6px; animation:ae-pop-in .5s var(--ease) both; }
.lp-check { width:74px; height:74px; margin:0 auto 20px; }
.lp-check circle { fill:none; stroke:var(--accent); stroke-width:5; opacity:.35; transform-origin:center; animation:lp-ring .5s var(--ease) both; }
.lp-check path { fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:lp-draw .55s .18s var(--ease) forwards; filter:drop-shadow(0 0 8px var(--grad-glow)); }
@keyframes lp-ring { from{ transform:scale(.4); opacity:0;} to{ transform:scale(1); opacity:.35;} }
@keyframes lp-draw { to{ stroke-dashoffset:0; } }

.lp-work-grid { margin-top:54px; }

.lp-quote-grid { margin-top:54px; }
.lp-quote-card { position:relative; padding:clamp(24px,2.4vw,32px); border-radius:18px; background:var(--surface); border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.lp-quote-card:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft), 0 26px 64px -22px var(--grad-glow); }
.lp-quote-card .stars { color:var(--accent); letter-spacing:3px; font-size:14px; }
.lp-quote-card blockquote { margin:16px 0 0; font-size:16.5px; line-height:1.55; }
.lp-quote-who { display:flex; align-items:center; gap:13px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.lp-quote-av { width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--accent-ink); background:var(--grad); }

.lp-price-grid { margin-top:56px; }
@media (max-width:900px){ .lp-price-grid { max-width:460px; margin-left:auto; margin-right:auto; } }
.lp-price-card { position:relative; display:flex; flex-direction:column; padding:clamp(26px,2.5vw,36px); border-radius:20px; background:var(--surface); border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.lp-price-card:hover { transform:translateY(-6px); box-shadow:0 26px 64px -24px var(--grad-glow); border-color:var(--line-2); }
.lp-price-card.feat { border-color:transparent; background:var(--surface-2); }
.lp-price-card.feat::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.lp-price-tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-ink); background:var(--grad); padding:6px 15px; border-radius:100px; box-shadow:0 8px 22px -6px var(--grad-glow); }
.lp-price-name { font-family:var(--font-display); font-weight:var(--display-weight); font-style:var(--display-style); font-size:22px; letter-spacing:-0.01em; }
.lp-price-blurb { color:var(--muted); font-size:14px; margin-top:8px; min-height:40px; }
.lp-price-amt { display:flex; align-items:baseline; gap:7px; margin:20px 0 2px; }
.lp-price-amt .from { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.lp-price-amt .v { font-family:var(--font-display); font-weight:var(--display-weight); font-style:var(--display-style); font-size:clamp(34px,3.4vw,46px); line-height:1; letter-spacing:-0.02em; }
.lp-price-unit { color:var(--muted); font-size:13px; margin-bottom:22px; }
.lp-price-feats { list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.lp-price-feats li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--muted); line-height:1.4; }
.lp-price-feats svg { flex:none; width:17px; height:17px; margin-top:2px; color:var(--accent); }
.lp-price-card .cta-grad, .lp-price-card .cta-glass { width:100%; justify-content:center; }
.lp-price-note { text-align:center; color:var(--faint); font-size:13.5px; margin-top:30px; }

.lp-sec { padding:clamp(64px,8vw,112px) 0; }
.lp-sec.alt { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }