/* ===================================================================
   SEO Studio Thai — PREMIUM Landing Page Design
   Quality tier: $10,000+ professional website
   Inspired by: Stripe, Linear, Vercel, Raycast
   =================================================================== */

/* ── CSS Custom Properties (Design Tokens) ─────────────────────── */
:root{
  /* Typography Scale */
  --lp-hero-size: clamp(48px, 6vw, 76px);
  --lp-h2-size: clamp(34px, 4vw, 52px);
  --lp-h3-size: clamp(20px, 2.2vw, 26px);
  --lp-body: 17px;
  --lp-small: 15px;
  --lp-xs: 13.5px;

  /* Spacing Scale */
  --lp-section-gap: 120px;
  --lp-card-pad: 36px;
  --lp-card-radius: 20px;

  /* Shadows */
  --lp-shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --lp-shadow-md: 0 4px 16px -2px rgba(0,0,0,.35), 0 2px 6px -2px rgba(0,0,0,.25);
  --lp-shadow-lg: 0 20px 60px -12px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.3);
  --lp-shadow-xl: 0 32px 80px -16px rgba(0,0,0,.55), 0 12px 36px -12px rgba(0,0,0,.4);
  --lp-shadow-glow: 0 0 60px -16px rgba(63,184,176,.35);

  /* Glass */
  --lp-glass-bg: rgba(19,25,32,.75);
  --lp-glass-border: rgba(63,184,176,.12);
  --lp-glass-blur: blur(20px) saturate(1.5);
}

/* ── Body & Background ─────────────────────────────────────────── */
.lp-body{
  position:relative; overflow-x:hidden;
  font-feature-settings:'cv01','cv02','cv03','cv04';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Premium dark gradient mesh background */
.lp-body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 1200px 900px at 5% -10%, rgba(63,184,176,.12), transparent 55%),
    radial-gradient(ellipse 900px 700px at 95% 5%, rgba(14,124,134,.10), transparent 50%),
    radial-gradient(ellipse 800px 600px at 50% 105%, rgba(176,142,248,.06), transparent 45%),
    radial-gradient(ellipse 600px 400px at 25% 60%, rgba(240,185,82,.04), transparent 40%),
    linear-gradient(160deg,#0B0F14 0%,#111820 50%,#0E151C 100%);
}

/* ── Header / Navbar ───────────────────────────────────────────── */
.mm-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(11,15,20,.85);
  backdrop-filter:var(--lp-glass-blur);
  -webkit-backdrop-filter:var(--lp-glass-blur);
  border-bottom:1px solid rgba(63,184,176,.08);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.mm-header.scrolled{
  background:rgba(11,15,20,.92);
  box-shadow:0 4px 24px -8px rgba(0,0,0,.4), 0 1px 0 rgba(63,184,176,.05);
}

/* Add top padding to body to account for fixed header */
.lp-body{ padding-top:72px; }

/* ── Hero Section ──────────────────────────────────────────────── */
.lp-hero{
  max-width:1200px; margin:0 auto;
  padding:80px 32px 100px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center;
  min-height:calc(100vh - 72px);
}
@media(max-width:1024px){
  .lp-hero{
    grid-template-columns:1fr; gap:60px;
    padding:60px 24px 80px;
    min-height:auto; text-align:center;
  }
  .lp-hero .lead{ margin-inline:auto; }
  .lp-cta-row{ justify-content:center; }
  .lp-trust{ text-align:center; }
}

/* Eyebrow badge */
.lp-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--lp-xs); font-weight:600; letter-spacing:.5px;
  color:#5ED4C9;
  background:rgba(63,184,176,.08);
  border:1px solid rgba(63,184,176,.15);
  border-radius:99px; padding:8px 18px;
  margin-bottom:32px;
  animation:fade-in-up .7s cubic-bezier(.16,1,.3,1) both;
}
.lp-eyebrow svg{ width:16px; height:16px; }

/* Hero heading — premium large type */
.lp-hero h1{
  font-size:var(--lp-hero-size);
  line-height:1.02; letter-spacing:-2px;
  font-weight:800; text-wrap:balance;
  margin-bottom:28px;
  color:var(--m-heading);
  animation:fade-in-up .7s cubic-bezier(.16,1,.3,1) .1s both;
}
.lp-hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg, #3FB8B0 0%, #5ED4C9 40%, #B08EF8 80%, #3FB8B0 100%);
  background-size:300% 300%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:premium-gradient 6s ease infinite;
}
@keyframes premium-gradient{
  0%,100%{ background-position:0% 50%; }
  33%{ background-position:100% 0%; }
  66%{ background-position:100% 100%; }
}

/* Hero body text */
.lp-hero .lead{
  font-size:var(--lp-body); line-height:1.8; color:var(--m-text);
  max-width:52ch; margin-bottom:44px;
  animation:fade-in-up .7s cubic-bezier(.16,1,.3,1) .2s both;
}

/* ── CTA Buttons — Premium Style ───────────────────────────────── */
.lp-cta-row{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:28px;
  animation:fade-in-up .7s cubic-bezier(.16,1,.3,1) .3s both;
}
@media(max-width:1024px){ .lp-cta-row{ justify-content:center; } }

.lp-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; border-radius:14px;
  font-size:16px; font-weight:700; text-decoration:none;
  border:none; cursor:pointer;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.lp-btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
.lp-btn:hover::before{ opacity:1; }
.lp-btn > *{ position:relative; z-index:1; }
.lp-btn svg{ width:18px; height:18px; transition:transform .3s ease; }
.lp-btn:hover svg:last-child{ transform:translateX(4px); }

/* Primary CTA — Teal Gradient */
.lp-btn.primary{
  background:linear-gradient(135deg, #5ED4C9 0%, #0E7C86 100%);
  color:#fff;
  box-shadow:
    0 4px 20px -4px rgba(63,184,176,.45),
    0 12px 40px -8px rgba(63,184,176,.25);
}
.lp-btn.primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 28px -4px rgba(63,184,176,.55),
    0 20px 50px -12px rgba(63,184,176,.35);
}
.lp-btn.primary:active{
  transform:translateY(-1px) scale(1);
  box-shadow:0 4px 16px -4px rgba(63,184,176,.4);
}

/* Ghost/Outline CTA */
.lp-btn.ghost{
  background:rgba(255,255,255,.8);
  color:var(--m-heading);
  border:1.5px solid rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
}
.lp-btn.ghost{
  background:rgba(255,255,255,.06);
  color:var(--m-heading);
  border:1.5px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.lp-btn.ghost:hover{
  border-color:rgba(63,184,176,.4);
  color:#5ED4C9;
  background:rgba(63,184,176,.08);
  transform:translateY(-2px);
  box-shadow:var(--lp-shadow-md);
}

/* Trust text */
.lp-trust{
  font-size:var(--lp-small); color:#98A0B3;
  animation:fade-in-up .7s cubic-bezier(.16,1,.3,1) .4s both;
}

/* ── Hero Visual — Premium Dashboard Mock ──────────────────────── */
.lp-hero-visual{
  position:relative; perspective:1200px;
  animation:fade-in-up .9s cubic-bezier(.16,1,.3,1) .2s both;
}

/* Glow orbs — larger, softer */
.lp-glow{ position:absolute; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; }
.lp-glow-a{
  width:350px; height:350px;
  background:radial-gradient(circle, rgba(63,184,176,.25), transparent 65%);
  top:-60px; right:-10%;
  animation:orb-drift-1 14s ease-in-out infinite alternate;
}
.lp-glow-b{
  width:280px; height:280px;
  background:radial-gradient(circle, rgba(63,184,176,.18), transparent 65%);
  bottom:-40px; left:-15%;
  animation:orb-drift-2 16s ease-in-out infinite alternate;
}
@keyframes orb-drift-1{
  from{ transform:translate(0,0) scale(1); opacity:.6; }
  to{ transform:translate(-30px,25px) scale(1.2); opacity:.8; }
}
@keyframes orb-drift-2{
  from{ transform:translate(0,0) scale(1); opacity:.5; }
  to{ transform:translate(25px,-20px) scale(1.15); opacity:.7; }
}

/* Depth stack */
.lp-stack-card{
  position:absolute; border-radius:24px;
  background:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(4px);
}
.lp-stack-1{ inset:16px 20px 10px 20px; animation:stack-breathe 10s ease-in-out infinite; }
.lp-stack-2{ inset:28px 32px 22px 32px; animation:stack-breathe 10s ease-in-out 1s infinite; }
@keyframes stack-breathe{
  0%,100%{ transform:translateY(0) rotateX(0); }
  50%{ transform:translateY(-8px) rotateX(.5deg); }
}

/* Main dashboard panel — glass morphism */
.lp-hero-panel{
  position:relative; z-index:2;
  background:rgba(22,30,40,.92);
  backdrop-filter:var(--lp-glass-blur);
  -webkit-backdrop-filter:var(--lp-glass-blur);
  border:1px solid var(--lp-glass-border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:
    var(--lp-shadow-xl),
    inset 0 1px 0 rgba(63,184,176,.05),
    0 0 0 1px rgba(63,184,176,.05);
}

/* Panel top bar */
.lp-panel-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px;
  background:rgba(18,24,32,.7);
  border-bottom:1px solid rgba(63,184,176,.08);
}
.lp-panel-dot{ width:12px; height:12px; border-radius:50%; }
.lp-panel-dot:nth-child(1){ background:#FF5F57; }
.lp-panel-dot:nth-child(2){ background:#FFBD2E; }
.lp-panel-dot:nth-child(3){ background:#28C840; }
.lp-panel-title{
  margin-inline-start:auto;
  font-size:var(--lp-xs); font-weight:600; color:var(--m-text);
  letter-spacing:.2px;
}

/* Panel rows */
.lp-hero-panel .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid rgba(0,0,0,.03);
  transition:all .25s ease;
}
.lp-hero-panel .row:last-child{ border-bottom:none; }
.lp-hero-panel .row:hover{
  background:rgba(63,184,176,.04);
}
.lp-hero-panel .row .label{
  display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:600; color:var(--m-heading);
}
.lp-hero-panel .row .ic{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.lp-hero-panel .row .ic svg{ width:20px; height:20px; }
.lp-hero-panel .row.ok .ic{ background:rgba(55,180,95,.1); color:#4ECB8F; }
.lp-hero-panel .row.warn-row .ic{ background:rgba(240,168,46,.1); color:#F0A82E; }
.lp-hero-panel .row:nth-child(3) .ic{ background:rgba(63,184,176,.1); color:#5ED4C9; }
.lp-hero-panel .row:nth-child(4) .ic{ background:rgba(176,142,248,.1); color:#B08EF8; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:99px;
  font-size:var(--lp-xs); font-weight:700;
}
.pill .dot{ width:7px; height:7px; border-radius:50%; }
.pill.good{ background:rgba(78,203,143,.12); color:#4ECB8F; }
.pill.good .dot{ background:#4ECB8F; }
.pill.warn{ background:rgba(240,185,82,.12); color:#F0B952; }
.pill.warn .dot{ background:#F0B952; }

.stat-delta{ display:inline-flex; align-items:center; gap:4px; font-size:16px; font-weight:800; }
.stat-delta.up{ color:#4ECB8F; }
.stat-delta.up svg{ width:16px; height:16px; }

/* ── Logo Partners ─────────────────────────────────────────────── */
.mm-logos{ padding:0 0 var(--lp-section-gap); text-align:center; }
.mm-logos-title{
  font-size:var(--lp-small); font-weight:500; color:var(--ink-faint);
  margin:0 0 32px; letter-spacing:.3px;
}
.mm-logo-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:20px 48px;
}
.mm-logo-item{
  display:inline-flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; color:var(--ink-faint);
  opacity:.4; transition:all .4s cubic-bezier(.4,0,.2,1);
}
.mm-logo-item:hover{ opacity:1; transform:translateY(-3px); }
.mm-logo-item svg{ width:24px; height:24px; opacity:.5; transition:opacity .3s ease; }
.mm-logo-item:hover svg{ opacity:.8; }

/* ── Stats Bar ─────────────────────────────────────────────────── */
.lp-stats-wrap{ padding:0 32px var(--lp-section-gap); }
.lp-stats-bar{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  align-items:stretch;
  padding:48px 56px;
  background:rgba(22,30,40,.80);
  border:1px solid rgba(63,184,176,.10);
  border-top:1px solid rgba(63,184,176,.15);
  border-radius:24px;
  box-shadow:var(--lp-shadow-md), inset 0 1px 0 rgba(63,184,176,.05);
}
@media(max-width:768px){
  .lp-stats-bar{ grid-template-columns:repeat(2,1fr); padding:32px 28px; }
}
@media(max-width:480px){
  .lp-stats-bar{ grid-template-columns:1fr; padding:28px 24px; }
}
.lp-stat-item{ text-align:center; }
.lp-stat-item .num{
  font-size:clamp(36px,4.5vw,52px); font-weight:800;
  color:#E8ECF1; line-height:1;
  letter-spacing:-1.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.lp-stat-item .label{
  font-size:var(--lp-small); color:var(--m-text); margin-top:8px; font-weight:500;
}

/* ── Section Layout ────────────────────────────────────────────── */
.lp-section{ max-width:1200px; margin:0 auto; padding:var(--lp-section-gap) 32px; }
.lp-section-head{ text-align:center; max-width:680px; margin:0 auto 64px; }
.lp-section-head .kicker{
  display:inline-block;
  font-size:var(--lp-xs); font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:#5ED4C9; margin-bottom:18px;
}
.lp-section-head h2{
  font-size:var(--lp-h2-size); font-weight:800;
  line-height:1.1; letter-spacing:-1px; margin-bottom:20px;
  color:#E8ECF1;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.lp-section-head p{
  font-size:var(--lp-body); color:var(--m-text); line-height:1.8;
}

/* ── Free Tools Band ───────────────────────────────────────────── */
.lp-free-band{
  background:rgba(19,25,32,.3);
  border-top:1px solid rgba(63,184,176,.06);
  border-bottom:1px solid rgba(63,184,176,.06);
}

.lp-chip-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px; max-width:860px; margin:0 auto 32px;
}
.lp-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:99px;
  font-size:var(--lp-small); font-weight:600; color:var(--m-heading);
  background:rgba(22,30,40,.80);
  border:1px solid rgba(63,184,176,.12);
  text-decoration:none;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--lp-shadow-sm);
}
.lp-chip svg{ width:18px; height:18px; color:#5ED4C9; flex-shrink:0; }
.lp-chip:hover{
  border-color:rgba(63,184,176,.3);
  color:#5ED4C9;
  transform:translateY(-3px);
  box-shadow:var(--lp-shadow-md), 0 0 0 1px rgba(63,184,176,.1);
}

.lp-free-note{
  text-align:center; font-size:var(--lp-small); color:var(--m-text);
  max-width:640px; margin:0 auto;
}

/* ── Features Grid — Premium Cards ─────────────────────────────── */
.lp-feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  align-items:stretch;
}
@media(max-width:1024px){ .lp-feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .lp-feature-grid{ grid-template-columns:1fr; } }

.lp-feature{
  display:flex; flex-direction:column;
  padding:var(--lp-card-pad) 28px; border-radius:var(--lp-card-radius);
  background:rgba(22,30,40,.85);
  border:1px solid rgba(63,184,176,.10);
  border-top:1px solid rgba(63,184,176,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  min-height:200px;
}
.lp-feature::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #5ED4C9, #0E7C86);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.lp-feature:hover::before{ transform:scaleX(1); }
.lp-feature:hover{
  transform:translateY(-6px);
  box-shadow:var(--lp-shadow-lg), 0 0 20px rgba(63,184,176,.1);
  border-color:rgba(63,184,176,.2);
}

.lp-feature .ic{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  background:linear-gradient(135deg, rgba(63,184,176,.12), rgba(14,124,134,.08));
  color:var(--m-blue);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.lp-feature:hover .ic{
  background:linear-gradient(135deg, #5ED4C9, #0E7C86);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(63,184,176,.4);
  transform:scale(1.05);
}
.lp-feature .ic svg{ width:26px; height:26px; }
.lp-feature h3{
  font-size:var(--lp-h3-size); font-weight:700; margin-bottom:10px;
  color:#E8ECF1; letter-spacing:-.3px;
}
.lp-feature p{ font-size:var(--lp-small); color:var(--ink-dim); line-height:1.7; }

/* ── Roadmap — Premium Timeline ────────────────────────────────── */
.lp-roadmap-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  align-items:stretch;
  position:relative;
}
@media(max-width:768px){
  .lp-roadmap-grid{ grid-template-columns:1fr; gap:40px; }
}

/* Desktop connector line */
@media(min-width:769px){
  .lp-roadmap-grid::before{
    content:""; position:absolute;
    top:28px; left:calc(12.5% + 12px); right:calc(12.5% + 12px);
    height:3px;
    background:linear-gradient(90deg, #3FB8B0, #0E7C86, #B08EF8, #4ECB8F);
    border-radius:2px; z-index:0;
  }
}

.lp-roadmap-item{ position:relative; text-align:center; padding:0 16px; z-index:1; }
@media(max-width:768px){
  .lp-roadmap-item{ text-align:left; padding:0 0 0 64px; }
}

.lp-roadmap-item .node{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, #5ED4C9, #0E7C86);
  color:#fff; font-weight:800; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 8px 28px -8px rgba(63,184,176,.45);
  position:relative; z-index:2;
  transition:all .3s ease;
}
.lp-roadmap-item:hover .node{
  transform:scale(1.1);
  box-shadow:0 12px 36px -8px rgba(63,184,176,.6);
}
@media(max-width:768px){
  .lp-roadmap-item .node{ position:absolute; left:0; top:0; margin:0; }
}

.lp-roadmap-item .tag{
  display:inline-block;
  font-size:var(--lp-xs); font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--m-blue); background:rgba(63,184,176,.06);
  border-radius:99px; padding:5px 14px;
  margin-bottom:14px;
}
.lp-roadmap-item h3{
  font-size:18px; font-weight:700; color:var(--m-heading);
  margin-bottom:10px; letter-spacing:-.2px;
}
.lp-roadmap-item p{ font-size:var(--lp-small); color:var(--m-text); line-height:1.7; }

/* ── AI / Content Split ────────────────────────────────────────── */
.lp-split{ padding:var(--lp-section-gap) 32px; }
.lp-split-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  align-items:stretch;
  position:relative;
}
@media(max-width:768px){ .lp-split-grid{ grid-template-columns:1fr; } }

.lp-split-panel{
  display:flex; flex-direction:column;
  padding:40px 36px; border-radius:var(--lp-card-radius);
  background:rgba(22,30,40,.85);
  border:1px solid rgba(63,184,176,.10);
  border-top:1px solid rgba(63,184,176,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
}
.lp-split-panel::after{
  content:""; position:absolute; top:-50%; right:-50%;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(63,184,176,.06), transparent 70%);
  pointer-events:none;
  transition:all .5s ease;
}
.lp-split-panel:hover{
  transform:translateY(-6px);
  box-shadow:var(--lp-shadow-lg);
}
.lp-split-panel:hover::after{ transform:translate(-20px,20px); }

..lp-split-panel h3{
  font-size:24px; font-weight:800; margin-bottom:14px;
  letter-spacing:-.4px; color:#E8ECF1;
}
.lp-split-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--lp-small); font-weight:700; color:var(--m-blue);
  text-decoration:none; margin-bottom:28px;
  transition:all .3s ease;
}
.lp-split-link:hover{ gap:12px; }
.lp-split-link svg{ width:18px; height:18px; transition:transform .3s ease; }
.lp-split-link:hover svg{ transform:translateX(4px); }

/* AI badges */
.lp-badge-grid{ display:flex; flex-wrap:wrap; gap:10px; }
..lp-ai-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:12px;
  font-size:var(--lp-small); font-weight:600; color:var(--m-heading);
  background:rgba(22,30,40,.85);
  border:1px solid rgba(63,184,176,.12);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.lp-ai-badge:hover{
  transform:translateY(-3px);
  box-shadow:var(--lp-shadow-md);
}
.lp-ai-badge .mark{
  width:24px; height:24px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; flex-shrink:0;
}

/* Browser mock */
..lp-browser-mock{
  background:rgba(22,30,40,.80); border:1px solid rgba(63,184,176,.12);
  border-radius:14px; padding:18px 22px; margin-bottom:28px;
}
.lp-browser-mock .dots{ display:flex; gap:7px; margin-bottom:16px; }
.lp-browser-mock .dots span{ width:10px; height:10px; border-radius:50%; }
.lp-browser-mock .dots span:nth-child(1){ background:#FF5F57; }
.lp-browser-mock .dots span:nth-child(2){ background:#FFBD2E; }
.lp-browser-mock .dots span:nth-child(3){ background:#28C840; }
.lp-browser-mock .ln{
  height:10px; border-radius:5px; background:rgba(0,0,0,.06);
  margin-bottom:10px;
}
.lp-browser-mock .ln.hi{ background:rgba(63,184,176,.15); }

/* Score ring */
.lp-score-row{ display:flex; align-items:center; gap:24px; }
.lp-score-ring{
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--m-blue) calc(var(--pct) * 1%), rgba(0,0,0,.06) 0);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.lp-score-ring::before{
  content:""; position:absolute;
  width:56px; height:56px; border-radius:50%;
  background:rgba(19,25,32,.9);
}
.lp-score-ring span{
  position:relative; z-index:1;
  font-size:20px; font-weight:800; color:#E8ECF1;
}
.lp-score-label{ font-size:var(--lp-small); color:var(--m-text); line-height:1.6; }
.lp-score-label b{ display:block; color:#E8ECF1; font-weight:700; margin-bottom:4px; }

/* ── Why Section ───────────────────────────────────────────────── */
.lp-why{
  background:rgba(19,25,32,.3);
}
.lp-why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  align-items:stretch;
}
@media(max-width:768px){ .lp-why-grid{ grid-template-columns:1fr; } }

.lp-why-item{
  display:flex; flex-direction:column;
  padding:40px 32px; border-radius:var(--lp-card-radius);
  background:rgba(22,30,40,.85);
  border:1px solid rgba(63,184,176,.10);
  border-top:1px solid rgba(63,184,176,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  min-height:180px;
}
.lp-why-item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #5ED4C9, #0E7C86);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.lp-why-item:hover::before{ transform:scaleX(1); }
.lp-why-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--lp-shadow-lg);
}

.lp-why-item .n{
  font-size:var(--lp-xs); font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--m-blue); margin-bottom:16px;
}
.lp-why-item h3{
  font-size:22px; font-weight:700; margin-bottom:12px;
  letter-spacing:-.3px; color:var(--m-heading);
}
.lp-why-item p{ font-size:var(--lp-small); color:var(--m-text); line-height:1.75; }

/* ── Pricing — Premium Cards ───────────────────────────────────── */
.lp-pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  align-items:stretch;
}
@media(max-width:768px){
  .lp-pricing-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
}

.lp-price-card{
  position:relative;
  padding:40px 32px; border-radius:var(--lp-card-radius);
  background:rgba(22,30,40,.88);
  border:1px solid rgba(63,184,176,.10);
  border-top:2px solid rgba(63,184,176,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.lp-price-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--lp-shadow-xl);
}

/* Featured card */
.lp-price-card.featured{
  border-color:rgba(63,184,176,.3);
  border-top:2px solid rgba(63,184,176,.5);
  background:linear-gradient(180deg, rgba(63,184,176,.06) 0%, rgba(22,30,40,.92) 30%);
  box-shadow:
    0 16px 48px -12px rgba(63,184,176,.15),
    0 0 0 1px rgba(63,184,176,.08),
    inset 0 1px 0 rgba(63,184,176,.08);
  transform:scale(1.03);
  z-index:2;
}
.lp-price-card.featured:hover{
  transform:scale(1.03) translateY(-8px);
  box-shadow:
    0 24px 64px -12px rgba(63,184,176,.25),
    0 0 0 1px rgba(63,184,176,.15),
    inset 0 1px 0 rgba(63,184,176,.12);
}

.lp-price-badge{
  display:inline-block;
  padding:6px 16px; border-radius:99px;
  font-size:var(--lp-xs); font-weight:700; letter-spacing:.4px;
  background:linear-gradient(135deg, #5ED4C9, #0E7C86);
  color:#fff;
  margin-bottom:20px;
  box-shadow:0 4px 16px -4px rgba(63,184,176,.45);
}

.lp-price-name{
  font-size:22px; font-weight:700; color:#E8ECF1;
  margin-bottom:16px; letter-spacing:-.2px;
}
.lp-price-amount{ margin-bottom:24px; }
.lp-price-amount .num{
  font-size:clamp(36px,4.5vw,48px); font-weight:800;
  color:#E8ECF1; line-height:1;
  letter-spacing:-2px;
}
.lp-price-amount .cycle{
  font-size:var(--lp-small); color:var(--m-text); font-weight:500;
}

.lp-price-list{ list-style:none; padding:0; margin:0 0 24px; }
.lp-price-list li{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; font-size:var(--lp-small); color:var(--ink-dim);
  border-bottom:1px solid rgba(63,184,176,.06);
}
.lp-price-list li:last-child{ border-bottom:none; }
.lp-price-list li svg{ width:20px; height:20px; color:#4ECB8F; flex-shrink:0; }
.lp-price-list li b{ color:#E8ECF1; }

.lp-price-desc{
  font-size:var(--lp-small); color:var(--m-text); line-height:1.7;
  margin-top:20px;
}

.lp-price-card .lp-btn{ width:100%; justify-content:center; margin-top:28px; }

/* ── FAQ — Premium Accordion ───────────────────────────────────── */
.lp-faq-list{ max-width:780px; margin:0 auto; }

.lp-faq-item{
  border:1px solid rgba(63,184,176,.10);
  border-radius:16px;
  margin-bottom:14px;
  background:rgba(22,30,40,.80);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.lp-faq-item:hover{ border-color:rgba(63,184,176,.2); }
.lp-faq-item[open]{
  border-color:rgba(63,184,176,.3);
  box-shadow:var(--lp-shadow-md);
}

.lp-faq-item summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  font-size:17px; font-weight:700; color:#E8ECF1;
  cursor:pointer; list-style:none;
  transition:color .25s ease;
}
.lp-faq-item summary::-webkit-details-marker{ display:none; }
.lp-faq-item summary:hover{ color:var(--m-blue); }

.lp-faq-item .plus{
  width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(63,184,176,.08);
  transition:all .3s cubic-bezier(.4,0,.2,1); flex-shrink:0;
  position:relative;
}
.lp-faq-item .plus::before,
.lp-faq-item .plus::after{
  content:""; position:absolute;
  width:14px; height:2px; border-radius:1px;
  background:#5ED4C9;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.lp-faq-item .plus::after{ transform:rotate(90deg); }
.lp-faq-item[open] .plus{
  background:#0E7C86;
  transform:rotate(45deg);
}
.lp-faq-item[open] .plus::before,
.lp-faq-item[open] .plus::after{ background:#fff; }

.lp-faq-item p{
  padding:0 24px 24px;
  font-size:var(--lp-small); color:var(--ink-dim); line-height:1.8;
}

/* ── Contact Section ───────────────────────────────────────────── */
.lp-section#contact{
  background:rgba(19,25,32,.3);
  border-top:1px solid rgba(63,184,176,.06);
  border-bottom:1px solid rgba(63,184,176,.06);
}
.lp-contact-card{
  max-width:600px; margin:0 auto;
  background:rgba(22,30,40,.88);
  padding:40px 36px;
  border-radius:20px;
  border:1px solid rgba(63,184,176,.12);
  border-top:1px solid rgba(63,184,176,.18);
  box-shadow:0 8px 32px -8px rgba(63,184,176,.15), inset 0 1px 0 rgba(63,184,176,.06);
  text-align:center;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-contact-card:hover{
  border-color:rgba(63,184,176,.4);
  box-shadow:
    0 0 20px -4px rgba(63,184,176,.35),
    0 0 50px -10px rgba(63,184,176,.18),
    0 0 80px -16px rgba(176,142,248,.10),
    0 8px 32px -8px rgba(63,184,176,.25);
  transform:translateY(-4px) scale(1.01);
}
.lp-contact-card p{color:var(--ink-dim); font-size:16px; margin-bottom:16px;}
.lp-contact-card p:last-child{margin-bottom:0;}
.lp-contact-card a{color:#5ED4C9; text-decoration:none; font-weight:600; transition:color .2s ease;}
.lp-contact-card a:hover{color:#83E8E0; text-decoration:underline;}

/* ── CTA Band — Premium ────────────────────────────────────────── */
.lp-cta-band{ padding:0 32px var(--lp-section-gap); }
.lp-cta-card{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; padding:64px 72px;
  background:linear-gradient(135deg, rgba(22,30,40,.9) 0%, rgba(63,184,176,.08) 50%, rgba(176,142,248,.06) 100%);
  border:1px solid rgba(63,184,176,.15);
  border-radius:28px;
  position:relative; overflow:hidden;
  color:#fff;
}
@media(max-width:768px){
  .lp-cta-card{ flex-direction:column; text-align:center; padding:48px 32px; }
}

/* Decorative orbs */
.lp-cta-card::before{
  content:""; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(63,184,176,.2), transparent 60%);
  top:-180px; right:-120px;
  pointer-events:none;
  animation:cta-orb 8s ease-in-out infinite alternate;
}
.lp-cta-card::after{
  content:""; position:absolute;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(176,142,248,.15), transparent 60%);
  bottom:-140px; left:-100px;
  pointer-events:none;
  animation:cta-orb 10s ease-in-out 1s infinite alternate;
}
@keyframes cta-orb{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(30px,-20px) scale(1.1); }
}

.lp-cta-card h2{
  font-size:clamp(28px,3.5vw,40px); font-weight:800;
  color:#fff; margin-bottom:14px;
  letter-spacing:-.8px; position:relative; z-index:1;
}
.lp-cta-card p{
  font-size:var(--lp-body); color:rgba(255,255,255,.7);
  max-width:46ch; line-height:1.7; position:relative; z-index:1;
}
.lp-cta-card .lp-btn{ position:relative; z-index:1; flex-shrink:0; }
.lp-cta-card .lp-btn.ghost{
  background:rgba(255,255,255,.1); color:#fff;
  border:1.5px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px);
}
.lp-cta-card .lp-btn.ghost:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-3px);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.3);
}

/* ── Footer — Premium ──────────────────────────────────────────── */
.mm-footer{
  background:rgba(11,15,20,.8);
  border-top:1px solid rgba(63,184,176,.06);
}
.mm-container{ max-width:1200px; margin:0 auto; padding:64px 32px 36px; }

.mm-footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:48px;
}
@media(max-width:768px){ .mm-footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:480px){ .mm-footer-grid{ grid-template-columns:1fr; } }

.mm-footer-about p{
  font-size:var(--lp-small); color:var(--ink-faint); line-height:1.75;
  margin:16px 0 24px; max-width:32ch;
}
.mm-social{ display:flex; gap:12px; }
.mm-social a{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); background:rgba(255,255,255,.05);
  border:1px solid rgba(63,184,176,.08);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.mm-social a:hover{
  color:#5ED4C9; border-color:rgba(63,184,176,.3);
  background:rgba(63,184,176,.1);
  transform:translateY(-3px);
  box-shadow:var(--lp-shadow-md);
}
.mm-social a svg{ width:20px; height:20px; }

.mm-footer h4{
  font-size:var(--lp-small); font-weight:700; color:#E8ECF1;
  margin-bottom:20px; letter-spacing:.3px; text-transform:uppercase;
}
.mm-footer-list{ list-style:none; padding:0; margin:0; }
.mm-footer-list li{ margin-bottom:12px; }
.mm-footer-list a{
  font-size:var(--lp-small); color:var(--ink-faint); text-decoration:none;
  transition:all .25s ease;
}
.mm-footer-list a:hover{ color:#5ED4C9; }

.mm-footer-sub{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px;
  border-top:1px solid rgba(63,184,176,.06);
  font-size:var(--lp-small); color:var(--ink-faint);
}
.mm-footer-sub a{ color:var(--ink-faint); text-decoration:none; font-weight:600; }
.mm-footer-sub a:hover{ color:#5ED4C9; }
@media(max-width:560px){
  .mm-footer-sub{ flex-direction:column; gap:10px; text-align:center; }
}

/* ═══════════════════════════════════════════════════════════════════
   NEON GLOW EFFECT — Cyan/Purple Gradient on Hover
   Applies to: Feature cards, Pricing cards, Why cards, Split panels,
   FAQ items, CTA card, Contact card, Chips, Social links
   ═══════════════════════════════════════════════════════════════════ */

/* ── Feature Cards — Neon Glow ─────────────────────────────────── */
.lp-feature{
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-feature:hover{
  border-color:rgba(63,184,176,.35);
  box-shadow:
    0 0 15px -3px rgba(63,184,176,.3),
    0 0 40px -8px rgba(63,184,176,.15),
    0 0 80px -16px rgba(176,142,248,.10),
    var(--lp-shadow-lg);
  transform:translateY(-8px) scale(1.01);
}
.lp-feature:hover::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(63,184,176,.15), transparent 40%, rgba(176,142,248,.10));
  z-index:-1; pointer-events:none;
  animation:neon-pulse 2s ease-in-out infinite alternate;
}
@keyframes neon-pulse{
  0%{ opacity:.5; filter:blur(0px); }
  100%{ opacity:1; filter:blur(1px); }
}

/* ── Pricing Cards — Neon Glow ─────────────────────────────────── */
.lp-price-card{
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-price-card:hover{
  border-color:rgba(63,184,176,.4);
  box-shadow:
    0 0 20px -4px rgba(63,184,176,.35),
    0 0 50px -10px rgba(63,184,176,.18),
    0 0 90px -20px rgba(176,142,248,.12),
    var(--lp-shadow-xl);
  transform:translateY(-10px) scale(1.02);
}
.lp-price-card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(160deg, rgba(63,184,176,.0), transparent 50%);
  z-index:-1; pointer-events:none;
  transition:background .5s ease;
}
.lp-price-card:hover::after{
  background:linear-gradient(160deg, rgba(63,184,176,.18), transparent 50%, rgba(176,142,248,.08));
  animation:neon-pulse 2.5s ease-in-out infinite alternate;
}
/* Featured pricing — stronger glow */
.lp-price-card.featured:hover{
  box-shadow:
    0 0 25px -4px rgba(63,184,176,.45),
    0 0 60px -12px rgba(63,184,176,.25),
    0 0 100px -24px rgba(176,142,248,.15),
    0 16px 48px -12px rgba(63,184,176,.2);
}

/* ── Why Section Cards — Neon Glow ─────────────────────────────── */
.lp-why-item{
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-why-item:hover{
  border-color:rgba(63,184,176,.35);
  box-shadow:
    0 0 15px -3px rgba(63,184,176,.3),
    0 0 45px -10px rgba(63,184,176,.15),
    0 0 80px -16px rgba(176,142,248,.08),
    var(--lp-shadow-lg);
  transform:translateY(-8px) scale(1.01);
}
.lp-why-item:hover::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(63,184,176,.12), transparent 45%, rgba(176,142,248,.08));
  z-index:-1; pointer-events:none;
  animation:neon-pulse 2.2s ease-in-out infinite alternate;
}

/* ── Split Panels — Neon Glow ──────────────────────────────────── */
.lp-split-panel{
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-split-panel:hover{
  border-color:rgba(63,184,176,.3);
  box-shadow:
    0 0 18px -4px rgba(63,184,176,.3),
    0 0 50px -10px rgba(63,184,176,.15),
    0 0 85px -18px rgba(176,142,248,.10),
    var(--lp-shadow-lg);
  transform:translateY(-8px) scale(1.01);
}

/* ── FAQ Items — Neon Glow ─────────────────────────────────────── */
.lp-faq-item{
  transition:all .45s cubic-bezier(.4,0,.2,1);
}
.lp-faq-item:hover{
  border-color:rgba(63,184,176,.3);
  box-shadow:
    0 0 12px -3px rgba(63,184,176,.25),
    0 0 35px -8px rgba(63,184,176,.12);
}
.lp-faq-item[open]{
  border-color:rgba(63,184,176,.4);
  box-shadow:
    0 0 15px -3px rgba(63,184,176,.3),
    0 0 40px -10px rgba(63,184,176,.15),
    0 0 70px -14px rgba(176,142,248,.08),
    var(--lp-shadow-md);
}

/* ── CTA Card — Neon Glow ──────────────────────────────────────── */
.lp-cta-card{
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-cta-card:hover{
  box-shadow:
    0 0 30px -6px rgba(63,184,176,.4),
    0 0 70px -14px rgba(63,184,176,.2),
    0 0 100px -20px rgba(176,142,248,.12),
    var(--lp-shadow-xl);
  transform:translateY(-4px);
}

/* ── Contact Card — Neon Glow ──────────────────────────────────── */
.lp-section#contact .lp-reveal{
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.lp-section#contact .lp-reveal:hover{
  border-color:rgba(63,184,176,.4);
  box-shadow:
    0 0 20px -4px rgba(63,184,176,.35),
    0 0 50px -10px rgba(63,184,176,.18),
    0 0 80px -16px rgba(176,142,248,.10),
    0 8px 32px -8px rgba(63,184,176,.2);
  transform:translateY(-4px) scale(1.01);
}

/* ── Chips — Neon Glow ─────────────────────────────────────────── */
.lp-chip:hover{
  box-shadow:
    0 0 10px -2px rgba(63,184,176,.3),
    0 0 25px -6px rgba(63,184,176,.15),
    var(--lp-shadow-md);
}

/* ── Social Icons — Neon Glow ──────────────────────────────────── */
.mm-social a:hover{
  box-shadow:
    0 0 12px -2px rgba(63,184,176,.4),
    0 0 30px -6px rgba(63,184,176,.2),
    var(--lp-shadow-md);
}

/* ── Roadmap Nodes — Neon Glow ─────────────────────────────────── */
.lp-roadmap-item .node:hover{
  box-shadow:
    0 0 20px -4px rgba(63,184,176,.5),
    0 0 50px -10px rgba(63,184,176,.3),
    0 0 80px -16px rgba(176,142,248,.15);
}

/* ── AI Badges — Neon Glow ─────────────────────────────────────── */
.lp-ai-badge:hover{
  box-shadow:
    0 0 10px -2px rgba(63,184,176,.3),
    0 0 25px -6px rgba(63,184,176,.15);
  border-color:rgba(63,184,176,.3);
}

/* ── Neon Glow — Global Keyframes ──────────────────────────────── */
@keyframes neon-breathe{
  0%,100%{
    box-shadow:
      0 0 15px -3px rgba(63,184,176,.25),
      0 0 40px -8px rgba(63,184,176,.12);
  }
  50%{
    box-shadow:
      0 0 20px -3px rgba(63,184,176,.4),
      0 0 55px -8px rgba(63,184,176,.2),
      0 0 80px -16px rgba(176,142,248,.08);
  }
}

/* ── Scroll Reveal — Premium Easing ────────────────────────────── */
@keyframes fade-in-up{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:translateY(0); }
}
.lp-reveal{
  opacity:0; transform:translateY(36px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
.lp-reveal.in{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){
  .lp-reveal{ opacity:1; transform:none; transition:none; }
  .lp-hero h1, .lp-hero .lead, .lp-cta-row, .lp-trust,
  .lp-eyebrow, .lp-hero-visual{ animation:none; opacity:1; transform:none; }
}

/* ── Mobile Refinements ────────────────────────────────────────── */
@media(max-width:600px){
  :root{
    --lp-section-gap: 80px;
    --lp-card-pad: 24px;
  }
  .lp-hero-panel{ font-size:13px; }
  .lp-hero-panel .row{ padding:12px 16px; }
  .lp-hero-panel .row .label{ font-size:13.5px; }
  .lp-hero-panel .row .ic{ width:30px; height:30px; border-radius:8px; }
  .lp-hero-panel .row .ic svg{ width:16px; height:16px; }
  .lp-panel-head{ padding:12px 16px; }
  .lp-section{ padding:var(--lp-section-gap) 20px; }
  .lp-section-head{ margin-bottom:44px; }
  .lp-feature-grid{ gap:16px; }
  .lp-feature{ padding:var(--lp-card-pad) 20px; }
  .lp-price-card{ padding:28px 24px; }
  .lp-cta-card{ padding:36px 24px; border-radius:20px; }
  .lp-btn{ padding:14px 24px; font-size:15px; border-radius:12px; }
}

/* ── Register Page ────────────────────────────────────────────── */
.reg-hero{
  text-align:center;
  padding:32px 24px 0;
  max-width:560px;
  margin:0 auto;
}
.reg-hero-title{
  font-size:clamp(22px, 3.5vw, 30px);
  font-weight:800;
  color:#E8ECF1;
  margin-bottom:10px;
  line-height:1.15;
  letter-spacing:-0.5px;
}
.reg-hero-lead{
  font-size:15px;
  color:var(--m-muted);
  line-height:1.6;
  margin:0;
}
.reg-form-section{
  max-width:480px;
  margin:0 auto;
  padding:20px 24px 60px;
}
.reg-card{
  background:rgba(19,25,32,.85);
  border:1px solid rgba(63,184,176,.12);
  border-radius:16px;
  padding:32px 28px;
  box-shadow:0 20px 60px -18px rgba(63,184,176,.15);
  backdrop-filter:blur(20px);
  position:relative;
}
.reg-card::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, #5ED4C9, #3FB8B0);
}
.reg-card .field{
  margin-bottom:16px;
}
.reg-card .field-label{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:var(--m-heading, #1a1f36);
  margin-bottom:6px;
}
.reg-card input[type=text],
.reg-card input[type=email],
.reg-card input[type=password],
.reg-card input[type=tel]{
  width:100%;
  border:1px solid var(--m-border, #E2E5EA);
  border-radius:10px;
  padding:11px 14px;
  font-size:14.5px;
  font-family:inherit;
  background:#fff;
  color:var(--m-heading, #1a1f36);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.reg-card input:hover{ border-color:var(--m-blue, #3FB8B0); }
.reg-card input:focus{
  outline:none;
  border-color:var(--m-blue, #3FB8B0);
  box-shadow:0 0 0 3px rgba(63,184,176,.12);
}
.reg-submit-btn{
  width:100%;
  margin-top:20px;
  padding:13px 20px;
  border:none; border-radius:11px;
  background:linear-gradient(135deg, var(--m-blue, #3FB8B0), #5ED4C9);
  color:#fff;
  font-size:15px; font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.reg-submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -6px rgba(63,184,176,.45);
}
.reg-submit-btn:active{ transform:translateY(0); box-shadow:none; }
.reg-login-hint{
  text-align:center;
  margin-top:18px;
  font-size:14px;
  color:var(--m-muted, #64748b);
}
.reg-login-hint a{
  color:var(--m-blue, #3FB8B0);
  font-weight:700;
  text-decoration:none;
  transition:color .15s ease;
}
.reg-login-hint a:hover{ text-decoration:underline; }
@media(max-width:600px){
  .reg-hero{ padding:24px 20px 0; }
  .reg-form-section{ padding:16px 20px 48px; }
  .reg-card{ padding:28px 22px; }
}