/* ==========================================================================
   TimrX 3D Hub — Full Landing Styles (drop-in replacement for hub.css)
   ========================================================================== */

/* ---------- Core tokens ---------- */
:root{
  --bg:#0b0b0b;
  --ink:#f5f5f5;
  --muted:#a9a9a9;
  --line:#1d1d1d;
  --panel:#0e0e0e;
  --accent:#ffffff; /* monochrome for now */
  --maxw:1280px;
  --gutter:28px;
  --navH:70px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 calc(var(--gutter));}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px;
  border:1px solid var(--ink);
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity:0; transition:opacity .3s ease;
}
.btn:hover{
  background:var(--ink); color:var(--bg);
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0) scale(1)}
.btn.ghost{border-color:#2a2a2a; color:#e7e7e7; background:transparent}
.btn.ghost::before{background:linear-gradient(135deg, rgba(255,255,255,.08), transparent)}
.btn.ghost:hover{background:rgba(255,255,255,.08); color:#fff; border-color:#fff}

/* ========================================================================== */
/* NAV                                                                         */
/* ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--navH); z-index:1000;
  background:linear-gradient(180deg, rgba(11,11,11,.96), rgba(11,11,11,.75) 75%, rgba(11,11,11,0));
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
  animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 20px; max-width:none}
.nav-left,.nav-right{flex:1 1 0; min-width:0}
.nav-pills{flex:0 0 auto; justify-content:center}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  font-weight:900;
  letter-spacing:.03em;
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1;
  cursor:pointer;
}

/* "Timr" normal, the "X" in accent gradient with soft glow */
.b-tim{ color: #f5f5f5; }
.b-x{
  margin-left:2px;
  background: linear-gradient(90deg, #0ea5e9, #7dd3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(14,165,233,.35);
  font-weight: 900;
  letter-spacing:.02em;
  transition: transform .25s ease, filter .25s ease;
}
.brand:hover .b-x{ transform: translateY(-1px); filter: brightness(1.06); }

/* "Dima" steady, "Vasiliu" highlighted + slightly larger */
.b-dima{ color: #eaeaea; opacity:.9; font-weight:800; }
.b-surname{
  color: #7dd3fc;
  font-weight:900;
  letter-spacing:.04em;
  margin-left:4px;
}
.idx-nav-logo{
  width:50px; height:50px; object-fit:contain;
  flex-shrink:0;
}
.nav-left{display:flex; align-items:center; gap:18px}
.nav-right{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.login{font-weight:800; opacity:.9}
.signup{padding:10px 16px; border-radius:999px; border:1px solid var(--ink); font-weight:800}

/* ========================================================================== */
/* CREDITS GROUP (Nav Pill + Buy Button)                                      */
/* ========================================================================== */
.credits-group {
display: flex;
align-items: center;
gap: 6px;
}

.credits-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
min-height: 44px;
border-radius: 999px;
border: 1px solid rgba(125,211,252,.35);
color: #eaf6ff;
font-weight: 700;
font-size: 13px;
letter-spacing: .03em;
background: rgba(125,211,252,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
cursor: pointer;
transition: all .2s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

.credits-pill i {
color: #7dd3fc;
font-size: 12px;
filter: drop-shadow(0 0 4px rgba(125,211,252,.5));
}

.credits-pill .credits-value {
min-width: 24px;
text-align: center;
}

/* Plus icon - shows when credits are 0/empty */
.credits-pill .credits-plus {
font-size: 10px;
color: #7dd3fc;
margin-left: 2px;
opacity: 1;
transition: opacity .2s ease, transform .2s ease;
}

.credits-pill .credits-plus:hover {
transform: scale(1.1);
}

/* Hide plus when credits are present */
.credits-pill.has-credits .credits-plus {
opacity: 0;
width: 0;
margin: 0;
pointer-events: none;
}

.credits-pill:hover {
border-color: rgba(125,211,252,.55);
background: rgba(125,211,252,.12);
transform: translateY(-1px);
}

/* Floating hover tooltip — same visual as 3dprint's .ws-credits-tooltip */
.credits-hover-tooltip {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
padding: 10px 14px;
background: rgba(20, 20, 24, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
pointer-events: none;
z-index: 200;
white-space: nowrap;
}
.credits-pill:hover .credits-hover-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.credits-hover-tooltip-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
.credits-hover-tooltip-row i {
width: 14px;
text-align: center;
font-size: 11px;
filter: none;
}
.credits-hover-tooltip-row:first-child i { color: #a78bfa; }
.credits-hover-tooltip-row:last-child i { color: #60a5fa; }
.credits-hover-tooltip-val {
margin-left: auto;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
font-variant-numeric: tabular-nums;
}

/* Low credits warning */
.credits-pill.low {
border-color: rgba(251, 191, 36, .5);
background: rgba(251, 191, 36, .1);
}
.credits-pill.low i {
color: #fbbf24;
filter: drop-shadow(0 0 4px rgba(251,191,36,.5));
}

/* Empty credits */
.credits-pill.empty {
border-color: rgba(239, 68, 68, .45);
background: rgba(239, 68, 68, .1);
}
.credits-pill.empty i {
color: #ef4444;
filter: drop-shadow(0 0 4px rgba(239,68,68,.5));
}

/* Buy button */
.credits-buy-btn {
appearance: none;
padding: 10px 16px;
min-height: 44px;
border-radius: 999px;
border: 1px solid #fff;
background: #fff;
color: #0b0b0b;
font-weight: 800;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
transition: all .2s ease;
}

.credits-buy-btn:hover {
background: transparent;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(255,255,255,.15);
}

.credits-buy-btn:active {
transform: translateY(0);
}

/* Account status shield (inside credits group) */
.account-status-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
padding: 0;
transition: transform .2s ease, background .2s ease;
flex-shrink: 0;
}
.account-status-btn:hover { transform: scale(1.12); }
.account-status-btn i { font-size: 15px; transition: color .2s ease, filter .2s ease; }

/* Three states — shield color reflects account safety */
.account-status-btn[data-status="anonymous"] i {
color: #f87171;
filter: drop-shadow(0 0 3px rgba(248,113,113,.4));
}
.account-status-btn[data-status="unverified"] i {
color: #fbbf24;
filter: drop-shadow(0 0 3px rgba(251,191,36,.4));
}
.account-status-btn[data-status="verified"] i {
color: #34d399;
filter: drop-shadow(0 0 3px rgba(52,211,153,.3));
}

/* Tooltip on hover (CSS-only) */
.account-status-btn::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 6px);
right: 0;
white-space: nowrap;
padding: 4px 10px;
border-radius: 6px;
background: #1e293b;
color: #e2e8f0;
font-size: 11px;
font-weight: 500;
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease;
z-index: 100;
}
.account-status-btn:hover::after {
opacity: 1;
transform: translateY(0);
}

/* Compact credits group on tablet */
@media (max-width: 940px) {
.credits-pill {
  padding: 6px 10px;
  font-size: 12px;
  gap: 6px;
}
.credits-buy-btn {
  padding: 6px 10px;
  font-size: 11px;
}
.account-status-btn {
  width: 30px;
  height: 30px;
}
}
/* Hide credits text + buy on very small phones, keep shield + icon-only pill */
@media (max-width: 400px) {
.credits-buy-btn { display: none; }
.credits-pill .credits-value { display: none; }
.credits-pill { padding: 6px 8px; }
}

/* Credits syncing indicator */
.credits-group.syncing .credits-pill {
opacity: 0.7;
}
.credits-group.syncing .credits-pill::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border: 2px solid transparent;
border-top-color: #7dd3fc;
border-radius: 50%;
animation: credits-spin 0.8s linear infinite;
}
@keyframes credits-spin {
to { transform: translateY(-50%) rotate(360deg); }
}

/* Insufficient credits button state */
button.insufficient-credits {
opacity: 0.6;
cursor: not-allowed;
position: relative;
}
button.insufficient-credits::after {
content: '!';
position: absolute;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(239,68,68,.4);
}

/* Cost badge on buttons */
.btn-cost-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
color: #0c0c0c;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(125,211,252,.4);
pointer-events: none;
}
.btn-cost-badge.insufficient {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 2px 6px rgba(239,68,68,.4);
color: #fff;
}
.btn-cost-badge.has-batch {
min-width: 24px;
}

/* Gen credits span insufficient state */
.gen-credits.insufficient {
color: #ef4444 !important;
}

/* ========================================================================== */
/* BUY CREDITS MODAL                                                          */
/* ========================================================================== */
.buy-credits-card {
width: min(460px, 92vw) !important;
max-height: 90vh;
overflow-y: auto;
position: relative;
padding: 28px 26px;
}

.buy-credits-card h4 {
font-size: 22px;
margin-bottom: 4px;
}

.buy-credits-card .modal-sub {
color: #999;
font-size: 13px;
margin: 0 0 22px;
}

.welcome-bonus-hint {
font-size: 11px;
color: #4ade80;
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.15);
border-radius: 6px;
padding: 6px 10px;
margin: -12px 0 14px;
text-align: center;
}

.credits-plans {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}

.plan-card {
appearance: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
color: #eaeaea;
cursor: pointer;
transition: all .2s ease;
position: relative;
overflow: visible;
}

.plan-card:hover {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.14);
}

.plan-card:focus-visible {
outline: 2px solid #7dd3fc;
outline-offset: 2px;
}

.plan-card.featured {
border-color: rgba(125,211,252,.30);
background: rgba(125,211,252,.05);
}

.plan-card.featured:hover {
background: rgba(125,211,252,.08);
border-color: rgba(125,211,252,.45);
}

.plan-popular {
position: absolute;
top: -9px;
right: 16px;
padding: 3px 10px;
border-radius: 999px;
background: #7dd3fc;
color: #0b0b0b;
font-size: 9px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(125,211,252,.30);
}

.plan-badge {
font-size: 14px;
font-weight: 700;
color: #eaeaea;
min-width: 64px;
}

.plan-card.featured .plan-badge {
color: #7dd3fc;
}

.plan-credits {
font-size: 13px;
font-weight: 600;
color: #777;
flex: 1;
text-align: center;
}

.plan-price {
font-size: 17px;
font-weight: 800;
color: #fff;
min-width: 60px;
text-align: right;
}

.plan-note {
font-size: 12px;
color: #666;
display: none;
}

/* Loading state */
.plan-card.loading {
pointer-events: none;
opacity: .7;
}

.plan-card.loading::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,.4);
display: flex;
align-items: center;
justify-content: center;
}

.credits-footer {
text-align: center;
font-size: 11px;
color: #555;
margin: 18px 0 0;
line-height: 1.5;
}

/* Selected plan card */
.plan-card.selected {
background: rgba(125,211,252,.10);
border-color: rgba(125,211,252,.40);
box-shadow: 0 0 16px rgba(125,211,252,.10);
}

/* Checkout section (hidden until plan selected) */
.checkout-section {
display: none;
flex-direction: column;
gap: 12px;
margin-top: 14px;
}

.checkout-section.visible {
display: flex;
}

/* Button row in checkout */
.buy-credits-card .cta-row {
display: flex;
justify-content: center;
margin-top: 4px;
}

/* Selected plan display - hidden since selection is shown inline */
.selected-plan-display {
display: none;
}

.selected-label {
display: none;
}

.selected-plan-name {
display: none;
}

.selected-plan-price {
display: none;
}

/* Checkout inputs — match secure-modal input styling */
.buy-credits-card .field input {
background: rgba(255,255,255,0.05);
border: 1px solid var(--line, rgba(255,255,255,.12));
border-radius: 12px;
}
.buy-credits-card .field input:focus {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.08);
box-shadow: none;
}

/* Checkout error */
.checkout-error {
display: none;
background: rgba(220,53,69,.12);
border: 1px solid rgba(220,53,69,.3);
color: #ef4444;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
text-align: center;
}

/* Checkout button */
.checkout-btn {
width: auto;
justify-content: center;
padding: 12px 18px;
background: #fff;
color: #0b0b0b;
border-color: #fff;
font-size: 14px;
font-weight: 800;
letter-spacing: .04em;
}

.checkout-btn:hover:not([disabled]) {
background: #7dd3fc;
border-color: #7dd3fc;
color: #0b0b0b;
box-shadow: 0 8px 24px rgba(125,211,252,.3);
}

.checkout-btn[disabled] {
background: rgba(255,255,255,.3);
border-color: transparent;
color: rgba(0,0,0,.5);
cursor: not-allowed;
}

.checkout-btn .btn-loader {
display: inline-flex;
align-items: center;
gap: 8px;
}

/* Checkout verify state */
.checkout-verify-info {
font-size: 13px;
color: var(--muted, #888);
margin: 0 0 14px;
text-align: center;
line-height: 1.55;
}
.checkout-verify-info strong { color: var(--ink, #fff); }
/* ── Checkout code input — match secure / restore-account code inputs ── */
#checkoutVerifyCode,
#videoBuyVerifyCode {
display: block;
margin: 0 auto;
width: auto;
max-width: 220px;
text-align: center;
font-size: 22px;
font-weight: 600;
letter-spacing: 6px;
font-family: 'SF Mono', Monaco, monospace;
background: rgba(255,255,255,0.05);
border: 1px solid var(--line, rgba(255,255,255,.12));
border-radius: 12px;
padding: 14px 20px;
height: auto;
}
#checkoutVerifyCode:focus,
#videoBuyVerifyCode:focus {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.08);
box-shadow: none;
}
#checkoutVerifyCode::placeholder,
#videoBuyVerifyCode::placeholder {
color: var(--muted, #888);
}
.checkout-verify-error {
color: #ef4444;
font-size: 13px;
margin: 0 0 8px;
padding: 8px 12px;
background: rgba(220,53,69,.12);
border: 1px solid rgba(220,53,69,.3);
border-radius: 8px;
text-align: center;
}
.checkout-verify-message {
color: #4ade80;
font-size: 13px;
margin: 0 0 8px;
padding: 8px 12px;
background: rgba(74,222,128,.10);
border: 1px solid rgba(74,222,128,.25);
border-radius: 8px;
text-align: center;
}
.checkout-link-btn {
display: block;
background: none;
border: none;
color: #888;
font-size: 12px;
cursor: pointer;
margin-top: 8px;
text-align: center;
width: 100%;
}
.checkout-link-btn:hover { color: #fff; text-decoration: underline; }
.checkout-link-btn[disabled] { opacity: .4; cursor: not-allowed; }
.checkout-link-btn[disabled]:hover { color: #888; text-decoration: none; }

/* Pricing CTA buttons */
.pricing-cta {
cursor: pointer;
}

/* ========================================================================== */
/* SUCCESS MODAL                                                               */
/* ========================================================================== */
/* ── Payment Success Modal — Premium Delight ─────────────────────────────── */

/* Entrance animation for the card */
@keyframes successCardIn {
0%   { opacity: 0; transform: scale(0.92) translateY(12px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animated check ring draw */
@keyframes checkRingDraw {
0%   { stroke-dashoffset: 151; }
100% { stroke-dashoffset: 0; }
}

/* Animated check path draw */
@keyframes checkPathDraw {
0%   { stroke-dashoffset: 40; }
100% { stroke-dashoffset: 0; }
}

/* Subtle glow pulse on the icon */
@keyframes successGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
50%      { box-shadow: 0 0 24px 4px rgba(80, 200, 120, 0.15); }
}

/* Badge pop-in */
@keyframes badgePopIn {
0%   { opacity: 0; transform: scale(0.5) translateY(6px); }
60%  { transform: scale(1.08) translateY(-1px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Particle burst (6 dots radiating outward) */
@keyframes particleBurst {
0%   { opacity: 1; transform: translate(-50%, -50%) scale(0); }
50%  { opacity: 0.7; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.success-card {
width: min(400px, 92vw);
text-align: center;
padding: 48px 40px 36px;
position: relative;
overflow: hidden;
animation: successCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Particle container */
.success-particles {
position: absolute;
top: 80px;
left: 50%;
width: 0;
height: 0;
pointer-events: none;
z-index: 0;
}

.success-card.celebrate .success-particles::before,
.success-card.celebrate .success-particles::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
animation: particleBurst 0.8s ease-out both;
}

.success-card.celebrate .success-particles::before {
background: rgba(80, 200, 120, 0.6);
box-shadow:
  40px -30px 0 rgba(139, 92, 246, 0.5),
  -35px -25px 0 rgba(99, 102, 241, 0.5),
  50px 15px 0 rgba(80, 200, 120, 0.4),
  -45px 20px 0 rgba(251, 191, 36, 0.5),
  15px -45px 0 rgba(236, 72, 153, 0.4);
}

.success-card.celebrate .success-particles::after {
background: rgba(251, 191, 36, 0.5);
box-shadow:
  -50px -15px 0 rgba(80, 200, 120, 0.4),
  30px -40px 0 rgba(236, 72, 153, 0.4),
  -20px 35px 0 rgba(139, 92, 246, 0.4),
  45px 25px 0 rgba(99, 102, 241, 0.4),
  -10px -50px 0 rgba(251, 191, 36, 0.3);
animation-delay: 0.1s;
}

/* Animated SVG check icon */
.success-icon {
width: 60px;
height: 60px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(80, 200, 120, 0.08);
border: 1px solid rgba(80, 200, 120, 0.2);
position: relative;
z-index: 1;
}

.success-card.celebrate .success-icon {
animation: successGlow 2s ease-in-out 0.5s;
}

.success-check-svg {
width: 32px;
height: 32px;
color: #50c878;
}

.success-check-ring {
stroke-dasharray: 151;
stroke-dashoffset: 151;
fill: none;
opacity: 0.3;
}

.success-card.celebrate .success-check-ring {
animation: checkRingDraw 0.6s ease-out 0.15s both;
}

.success-check-path {
stroke-dasharray: 40;
stroke-dashoffset: 40;
fill: none;
}

.success-card.celebrate .success-check-path {
animation: checkPathDraw 0.35s ease-out 0.5s both;
}

/* Pending state: spinner instead of check */
.success-card.pending .success-icon {
background: rgba(255, 255, 255, 0.05);
border-color: var(--line);
animation: none;
}

.success-card.pending .success-check-svg { display: none; }

.success-card.pending .success-icon::after {
content: '';
width: 24px;
height: 24px;
border: 2px solid var(--line);
border-top-color: var(--ink);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* Failed state: X icon */
.success-card.failed .success-icon {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.2);
animation: none;
}

.success-card.failed .success-check-svg { display: none; }

.success-card.failed .success-icon::after {
content: '\f00d';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 24px;
color: #ef4444;
}

.success-card.failed .success-particles { display: none; }

/* Title */
.success-card h4,
.success-card .success-title {
color: var(--ink);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 6px;
text-align: center;
position: relative;
z-index: 1;
}

/* Subtitle */
.success-card .modal-subtitle {
color: var(--muted);
font-size: 14px;
margin-bottom: 0;
text-align: center;
line-height: 1.5;
}

/* Credits highlight card */
.success-credits {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
margin: 24px auto 16px;
padding: 18px 24px;
width: min(280px, 85%);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
position: relative;
overflow: hidden;
z-index: 1;
}

.success-credits::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
pointer-events: none;
}

/* "+350" badge above the balance */
.success-added-badge {
display: none;
font-size: 13px;
font-weight: 700;
color: #50c878;
letter-spacing: 0.02em;
margin-bottom: 2px;
}

.success-added-badge.visible {
display: block;
animation: badgePopIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.success-label {
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
text-align: center;
}

.success-value {
font-size: 42px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.03em;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
}

.success-unit {
color: var(--muted);
font-size: 13px;
text-align: center;
}

/* Microcopy */
.success-microcopy {
color: var(--muted);
font-size: 13px;
margin: 0 0 4px 0;
text-align: center;
opacity: 0.7;
font-style: italic;
}

/* CTA Actions */
.success-actions {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 12px;
}

.success-actions .btn {
flex: 1;
max-width: 170px;
padding: 14px 24px;
justify-content: center;
text-align: center;
font-size: 14px;
font-weight: 600;
transition: all 0.2s ease;
}

.success-actions .btn:not(.ghost) {
position: relative;
overflow: hidden;
}

.success-actions .btn:not(.ghost)::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
}

.success-actions .btn:not(.ghost):hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.success-actions .btn:not(.ghost):hover::after {
width: 300px;
height: 300px;
}

.success-actions .btn:not(.ghost):active {
transform: translateY(0);
}

.success-actions .btn.ghost {
background: transparent;
border-color: var(--line);
color: var(--muted);
transition: all 0.2s ease;
}

.success-actions .btn.ghost:hover {
border-color: var(--ink);
color: var(--ink);
transform: translateY(-1px);
}

/* Mobile: full-width buttons stacked */
@media (max-width: 480px) {
.success-card {
  padding: 40px 24px 32px;
}

.success-actions {
  flex-direction: column;
}

.success-actions .btn {
  max-width: 100%;
  width: 100%;
}
}

/* ========================================================================== */
/* VALUE CALCULATOR — "What can I create?"                                     */
/* ========================================================================== */

/* Collapsible wrapper */
.calc-wrap {
margin: 32px auto 0;
max-width: 640px;
text-align: center;
}

/* Title = clickable toggle button */
@keyframes calcTitlePulse {
0%   { transform: scale(1); }
35%  { transform: scale(1.06); }
65%  { transform: scale(0.97); }
100% { transform: scale(1); }
}

.calc-title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 auto 6px;
padding: 12px 28px;
border-radius: 24px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
font-size: 16px;
font-weight: 700;
font-family: inherit;
letter-spacing: -0.02em;
cursor: pointer;
transition: all 0.25s ease;
animation: calcTitlePulse 2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}

.calc-title:hover {
border-color: var(--ink);
color: var(--ink);
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}

.calc-title-icon {
font-size: 14px;
opacity: 0.6;
}

.calc-title-chevron {
font-size: 10px;
transition: transform 0.3s ease;
}

.calc-wrap.open .calc-title-chevron {
transform: rotate(180deg);
}

.calc-wrap.open .calc-title {
border-color: rgba(255, 255, 255, 0.15);
color: var(--ink);
animation: none;
}

/* Collapsible body */
.calc-body {
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
max-height: 800px;
opacity: 1;
}

.calc-wrap.collapsed .calc-body {
max-height: 0;
opacity: 0;
pointer-events: none;
}

.calc-sub {
font-size: 14px;
color: var(--muted);
margin: 0 0 20px;
}

/* Pool pills + tier dropdowns */
.calc-pills {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
}

.calc-pill {
padding: 8px 16px;
border-radius: 20px;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}

.calc-pill:hover {
border-color: var(--ink);
color: var(--ink);
}

.calc-pill.active {
background: rgba(255, 255, 255, 0.08);
border-color: var(--ink);
color: var(--ink);
}

/* Pool pill accents */
.calc-pill[data-calc-pool="video"] {
border-color: rgba(139, 92, 246, 0.3);
color: rgba(139, 92, 246, 0.7);
}

.calc-pill[data-calc-pool="video"]:hover,
.calc-pill[data-calc-pool="video"].active {
border-color: rgba(139, 92, 246, 0.6);
color: #8b5cf6;
background: rgba(139, 92, 246, 0.08);
}

.calc-pill[data-calc-pool="general"].active {
background: rgba(255, 255, 255, 0.08);
border-color: var(--ink);
color: var(--ink);
}

/* Tier dropdown — Apple-style segmented select */
.calc-tier-select {
appearance: none;
-webkit-appearance: none;
padding: 8px 32px 8px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
  no-repeat right 12px center,
  rgba(255, 255, 255, 0.06);
color: var(--ink);
font-size: 13px;
font-weight: 600;
font-family: inherit;
letter-spacing: -0.01em;
cursor: pointer;
transition: all 0.2s ease;
min-width: 140px;
}

.calc-tier-select:hover {
border-color: rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.08);
}

.calc-tier-select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.calc-tier-select option {
background: #1a1a2e;
color: #fff;
padding: 8px;
}

/* Output grid — fixed 3 columns */
.calc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 16px;
}

.calc-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 20px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
transition: transform 0.2s ease, border-color 0.2s ease;
}

.calc-item:hover {
border-color: rgba(255, 255, 255, 0.14);
transform: translateY(-2px);
}

.calc-item-icon {
font-size: 20px;
color: var(--muted);
opacity: 0.6;
}

.calc-item-value {
font-size: 32px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}

.calc-item-label {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
text-align: center;
}

.calc-item-detail {
font-size: 11px;
color: var(--muted);
opacity: 0.6;
}

.calc-item-empty {
border-color: transparent;
background: transparent;
}

/* (calc-toggle-row removed — tiers are now inline dropdowns in .calc-pills) */

/* Animate values on change */
@keyframes calcValuePop {
0%   { transform: scale(0.85); opacity: 0.5; }
60%  { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}

.calc-item-value.pop {
animation: calcValuePop 0.3s ease-out;
}

/* Mobile — 2 columns, compact pills */
@media (max-width: 520px) {
.calc-grid {
  grid-template-columns: repeat(2, 1fr);
}

.calc-pills {
  gap: 6px;
}

.calc-pill {
  font-size: 12px;
  padding: 7px 12px;
}

.calc-item-empty {
  display: none;
}
}

/* ========================================================================== */
/* RESTORE SUCCESS MODAL                                                       */
/* ========================================================================== */
.restore-success-card {
width: min(440px, 92vw) !important;
text-align: center;
padding: 22px;
position: relative;
overflow: hidden;
}

/* Particle burst animation */
.restore-particles {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
pointer-events: none;
}

.restore-particles .particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
opacity: 0;
animation: particleBurst 1.5s ease-out forwards;
}

.restore-particles .particle:nth-child(1) { animation-delay: 0.1s; --angle: 0deg; --distance: 120px; }
.restore-particles .particle:nth-child(2) { animation-delay: 0.15s; --angle: 45deg; --distance: 100px; }
.restore-particles .particle:nth-child(3) { animation-delay: 0.2s; --angle: 90deg; --distance: 130px; }
.restore-particles .particle:nth-child(4) { animation-delay: 0.25s; --angle: 135deg; --distance: 110px; }
.restore-particles .particle:nth-child(5) { animation-delay: 0.3s; --angle: 180deg; --distance: 125px; }
.restore-particles .particle:nth-child(6) { animation-delay: 0.35s; --angle: 225deg; --distance: 105px; }
.restore-particles .particle:nth-child(7) { animation-delay: 0.4s; --angle: 270deg; --distance: 115px; }
.restore-particles .particle:nth-child(8) { animation-delay: 0.45s; --angle: 315deg; --distance: 95px; }

@keyframes particleBurst {
0% {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(1);
}
70% {
  opacity: 1;
}
100% {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(0.3);
}
}

/* Icon with rings */
.restore-success-icon {
width: 72px;
height: 72px;
margin: 0 auto 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
border: 1px solid rgba(255,255,255,0.15);
position: relative;
animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.restore-success-icon i {
font-size: 28px;
color: var(--ink);
animation: sparkle 2s ease-in-out infinite;
}

@keyframes iconPop {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

@keyframes sparkle {
0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
50% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
}

/* Animated rings */
.icon-ring {
position: absolute;
inset: -8px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
animation: ringExpand 1.5s ease-out forwards;
opacity: 0;
}

.icon-ring-2 {
inset: -16px;
animation-delay: 0.2s;
}

@keyframes ringExpand {
0% { transform: scale(0.8); opacity: 0; }
30% { opacity: 0.6; }
100% { transform: scale(1.3); opacity: 0; }
}

/* Title with gradient animation */
.restore-title {
color: var(--ink);
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 8px;
animation: titleSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes titleSlide {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}

.restore-subtitle {
color: var(--muted);
font-size: 14px;
margin-bottom: 0;
animation: titleSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* Credits display */
.restore-credits-display {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
margin: 24px auto 24px;
padding: 18px 24px;
width: min(280px, 85%);
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
position: relative;
overflow: hidden;
animation: creditsFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.restore-credits-display::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

@keyframes creditsFade {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}

.restore-credits-label {
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
position: relative;
z-index: 1;
}

.restore-credits-value {
font-size: 48px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.03em;
line-height: 1;
position: relative;
z-index: 1;
animation: countUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@keyframes countUp {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}

.restore-credits-unit {
color: var(--muted);
font-size: 13px;
position: relative;
z-index: 1;
}

.restore-video-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
padding: 7px 14px;
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: 999px;
color: #c4b5fd;
font-size: 13px;
font-weight: 600;
position: relative;
z-index: 1;
align-self: center;
}
.restore-video-row i { font-size: 12px; opacity: 0.85; }
.restore-video-row .restore-video-label {
color: rgba(196, 181, 253, 0.7);
font-weight: 500;
font-size: 12px;
}

/* Action buttons */
.restore-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
animation: actionsFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

@keyframes actionsFade {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}

.restore-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px !important;
font-size: 14px;
font-weight: 700;
background: linear-gradient(135deg, #fff 0%, #e8e8e8 100%);
color: #0a0a0a !important;
border: none !important;
border-radius: 14px;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.restore-btn-primary i {
font-size: 16px;
transition: transform 0.3s ease;
}

.restore-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.3);
}

.restore-btn-primary:hover i {
transform: translateX(3px) rotate(-15deg);
}

.restore-btn-primary::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.5s ease;
}

.restore-btn-primary:hover::after {
left: 100%;
}

.restore-btn-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px !important;
font-size: 13px;
background: transparent !important;
border: 1px solid var(--line) !important;
color: var(--muted) !important;
border-radius: 12px;
transition: all 0.25s ease;
}

.restore-btn-secondary i {
font-size: 14px;
transition: transform 0.3s ease;
}

.restore-btn-secondary:hover {
border-color: var(--ink) !important;
color: var(--ink) !important;
transform: translateY(-2px);
}

.restore-btn-secondary:hover i {
animation: compassSpin 0.6s ease;
}

@keyframes compassSpin {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}

/* Modal open animation override for restore modal */
#restoreSuccessModal .card {
animation: restoreModalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes restoreModalPop {
0% { transform: translateY(20px) scale(0.9); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Reset particle animations when modal opens */
#restoreSuccessModal.open .restore-particles .particle {
animation: particleBurst 1.5s ease-out forwards;
}

#restoreSuccessModal.open .icon-ring {
animation: ringExpand 1.5s ease-out forwards;
}

/* Nav pill links */
.nav-pills{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  min-height:44px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  text-decoration:none;
  transition:color 0.2s, background 0.2s, border-color 0.2s;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.nav-pill:hover{
  color:#fff;
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.16);
}

.nav-pill--accent{
  color:#fff;
  background:rgba(14,165,233,0.15);
  border-color:rgba(14,165,233,0.3);
}

.nav-pill--accent:hover{
  background:rgba(14,165,233,0.25);
  border-color:rgba(14,165,233,0.45);
}

@media (max-width: 1200px){
  .nav-credits{display:none}
}

@media (max-width: 1200px){
  .nav-pills{display:none}
}

/* ========================================================================== */
/* HERO — centered stage with orbit nexus                                      */
/* ========================================================================== */

html { scroll-padding-top: var(--navH); }

header.container {
max-width: none;
padding-left: 0; padding-right: 0; padding-top: 10px;
}

header {
display: grid;
place-items: center;
padding-top: clamp(4px, 1vh, 12px);
padding-bottom: 0;
position: relative;
}

.hero {
position: relative; isolation: isolate; overflow: hidden;
width: 100%;
max-width: none;
padding-inline: clamp(24px, 5vw, 80px);
display: flex; flex-direction: column; align-items: center;
gap: 0;
min-height: min(calc(100svh - var(--navH) - 80px), 800px);
margin-bottom: 20px;
}

/* Ambient radial glow behind hero center */
.hero::before {
content: "";
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
width: 80vw;
height: 60vh;
background: radial-gradient(
  50% 50% at 50% 50%,
  rgba(14,165,233,0.04) 0%,
  rgba(236,72,153,0.02) 40%,
  transparent 70%
);
pointer-events: none;
z-index: 0;
}

/* Giant watermark behind hero content */
.hero-watermark {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(200px, 28vw, 400px);
font-weight: 900;
letter-spacing: 0.05em;
line-height: 1;
white-space: nowrap;
pointer-events: none;
z-index: 0;
user-select: none;
}
.wm-l {
display: inline-block;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.04);
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
-webkit-background-clip: text;
background-clip: text;
opacity: 0;
transform: translateY(30px) scale(0.9);
animation: wmReveal 0.8s ease forwards calc(0.6s + var(--i) * 0.15s);
}
@keyframes wmReveal {
to { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Eyebrow with shimmer -- */
.hero-eyebrow {
display: inline-flex;
align-items: center;
position: relative;
z-index: 2;
margin-bottom: clamp(8px, 1.2vh, 16px);
opacity: 1;
}

.hero-eyebrow-text {
font-family: "Bebas Neue", system-ui, sans-serif;
font-size: clamp(11px, 1.2vw, 14px);
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
position: relative;
overflow: hidden;
display: inline-block;
}

.hero-eyebrow-text::after {
content: attr(data-text);
position: absolute;
inset: 0;
color: transparent;
background: linear-gradient(
  90deg,
  transparent 0%, transparent 35%,
  rgba(14,165,233,0.85) 50%,
  transparent 65%, transparent 100%
);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
will-change: transform;
animation: hShimmer 4s ease-in-out 1.2s infinite;
}

@keyframes hEyebrowIn {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
}

@keyframes hShimmer {
0%   { transform: translateX(-110%); }
100% { transform: translateX(110%); }
}

/* -- Headline — centered, two tiers -- */
.hero-headline {
font-family: "Bebas Neue", Inter, system-ui;
font-size: clamp(68px, 8.9vw, 138px);
line-height: 0.88;
letter-spacing: 0.005em;
margin: 0;
text-align: center;
max-width: 92vw;
position: relative;
z-index: 2;
perspective: 600px;
opacity: 1;
}

.hero-line { display: block; }
.hero-line--bottom { margin-top: clamp(4px, 0.6vw, 10px); }

/* "3D Models" — larger, gradient text */
.hw--accent {
position: relative;
font-size: clamp(94px, 13.2vw, 205px);
background: linear-gradient(180deg, #e0e4ec 0%, #8a9bb5 50%, #4a5568 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hw--accent::after {
content: attr(data-text);
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
pointer-events: none;
}

/* Per-word stagger — start visible to keep LCP fast; no flyin */
.hero-headline .hw {
display: inline-block;
opacity: 1;
transform: none;
}
.hero-line--top .hw:nth-child(1) { animation-delay: 0.15s; }
.hero-line--top .hw:nth-child(2) { animation-delay: 0.25s; }
.hero-line--top .hw:nth-child(3) { animation-delay: 0.35s; }
.hero-line--top .hw:nth-child(4) { animation-delay: 0.45s; }
.hero-line--top .hw:nth-child(5) { animation-delay: 0.55s; }
.hero-line--bottom .hw:nth-child(1) { animation-delay: 0.7s; }

@keyframes hWordIn {
to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}
@keyframes hH1Reveal {
to { opacity: 1; }
}

/* ================================================================ */
/* Hero figure — cursor-reactive model image                        */
/* ================================================================ */
.hero-figure-wrap {
position: relative;
width: clamp(260px, 30vw, 420px);
aspect-ratio: 1;
flex-shrink: 0;
display: grid;
place-items: center;
z-index: 1;
margin-top: -70px;
opacity: 0;
animation:
  hFigFadeIn 1.8s ease forwards 0.5s,
  hFigFloat 12s ease-in-out infinite 2s;
}

@keyframes hFigFadeIn {
to { opacity: 1; }
}

@keyframes hFigFloat {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
12%      { transform: translate(16px, -5px) rotate(1.5deg); }
25%      { transform: translate(28px, 0) rotate(0deg); }
37%      { transform: translate(16px, -5px) rotate(-1.5deg); }
50%      { transform: translate(0, 0) rotate(0deg); }
62%      { transform: translate(-16px, -5px) rotate(-1.5deg); }
75%      { transform: translate(-28px, 0) rotate(0deg); }
87%      { transform: translate(-16px, -5px) rotate(1.5deg); }
}

/* Optional holo / glow layer behind image */
.hero-figure-holo {
position: absolute;
inset: 8%;
border-radius: 50%;
background: radial-gradient(circle,
  rgba(180,185,200,0.06), transparent 70%);
filter: blur(18px);
pointer-events: none;
}

.hero-figure {
display: block;
width: 100%;
height: 100%;
background: transparent;
--poster-color: transparent;
}

/* Remove default model-viewer border/outline */
.hero-figure::part(default-progress-bar) { display: none; }

/* -- Subheadline — directly under h1 -- */
.hero-subheadline {
text-align: center;
position: relative;
z-index: 2;
max-width: min(680px, 85vw);
font-size: 1.05rem;
font-weight: 500;
color: #cfcfcf;
margin: clamp(4px, 1vh, 10px) 0 clamp(4px, 0.8vh, 8px);
opacity: 1;
}

@keyframes hFadeUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}

/* -- Actions bar — pushed to bottom, centered -- */
.hero-actions {
margin-top: auto;
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
position: relative;
z-index: 2;
opacity: 1;
}

/* Thin gradient line above actions */
.hero-actions::before {
content: "";
display: block;
width: min(400px, 60vw);
height: 1px;
margin: 0 auto clamp(10px, 1.5vh, 16px);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
border-radius: 999px;
}

/* z-index layers */
.hero-eyebrow, .hero-headline, .hero-subheadline, .hero-actions {
position: relative; z-index: 2;
}

/* -- Orbit area: pills positioned around nexus -- */
.hero-orbit-area {
position: relative;
width: 100%;
height: clamp(200px, 26vw, 320px);
display: grid;
place-items: center;
}

/* -- Orbital pills -- */
.pill {
position: absolute;
display: flex; align-items: center; gap: 10px;
border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
padding: 14px 22px;
font-weight: 700; font-size: 14px; letter-spacing: .04em;
background: rgba(255,255,255,0.03);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #d4d4d4;
text-decoration: none;
transition: border-color .3s, background .3s, box-shadow .3s, transform .3s;
animation: pillFloat 6s ease-in-out infinite;
opacity: 0;
animation: pillFloat 6s ease-in-out infinite, pillReveal 0.6s ease forwards;
}
.pill.active {
border-color: rgba(14,165,233,0.35);
background: rgba(14,165,233,0.06);
color: #fff;
}
.pill:hover {
border-color: rgba(14,165,233,0.5);
background: rgba(14,165,233,0.08);
box-shadow: 0 0 30px rgba(14,165,233,0.12);
transform: translateY(-3px);
}

/* Positions — spread into the empty space */
.pill--pos-tl { top: 5%;  left: 6%;  animation-delay: 0s, 1.1s; }
.pill--pos-tr { top: 5%;  right: 6%; animation-delay: 1.5s, 1.3s; }
.pill--pos-bl { bottom: 5%; left: 6%;  animation-delay: 3s, 1.5s; }
.pill--pos-br { bottom: 5%; right: 6%; animation-delay: 4.5s, 1.7s; }

@keyframes pillFloat {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-8px); }
}
@keyframes pillReveal {
from { opacity: 0; transform: translateY(20px) scale(0.92); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Pill connecting lines (decorative) -- */
.pill::after {
content: "";
position: absolute;
width: 40px; height: 1px;
background: linear-gradient(90deg, rgba(14,165,233,0.25), transparent);
pointer-events: none;
}
.pill--pos-tl::after { right: -40px; top: 50%; }
.pill--pos-tr::after { left: -40px; top: 50%; background: linear-gradient(270deg, rgba(14,165,233,0.25), transparent); }
.pill--pos-bl::after { right: -40px; top: 50%; }
.pill--pos-br::after { left: -40px; top: 50%; background: linear-gradient(270deg, rgba(14,165,233,0.25), transparent); }

/* -- Pill icons -- */
.pill-ico {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(14,165,233,0.1);
border: 1px solid rgba(14,165,233,0.2);
flex-shrink: 0;
position: relative;
}

/* Cube icon (Text→3D) */
.ico-cube {
display: block; width: 12px; height: 12px;
border: 1.5px solid rgba(14,165,233,0.8);
border-radius: 2px;
transform: rotateX(25deg) rotateY(-25deg);
animation: icoCubeSpin 8s linear infinite;
}
@keyframes icoCubeSpin {
0%   { transform: rotateX(25deg) rotateY(-25deg); }
50%  { transform: rotateX(25deg) rotateY(25deg); }
100% { transform: rotateX(25deg) rotateY(-25deg); }
}

/* Image→3D icon: diamond */
.ico-img3d {
display: block; width: 12px; height: 12px;
background: rgba(14,165,233,0.5);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
animation: icoImg3dPulse 3s ease-in-out infinite;
}
@keyframes icoImg3dPulse {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
50%      { transform: scale(1.15) rotate(90deg); opacity: 1; }
}

/* Text→Image icon: frame */
.ico-frame {
display: block; width: 14px; height: 10px;
border: 1.5px solid rgba(236,72,153,0.7);
border-radius: 2px;
position: relative;
}
.ico-frame::after {
content: "";
position: absolute;
bottom: 2px; left: 2px;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(236,72,153,0.6);
animation: icoFrameDot 2.5s ease-in-out infinite;
}
@keyframes icoFrameDot {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.4); }
}

/* Image→Video icon: play triangle */
.ico-play {
display: block; width: 0; height: 0;
border-left: 9px solid rgba(14,165,233,0.8);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
animation: icoPlayPulse 2s ease-in-out infinite;
}
@keyframes icoPlayPulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50%      { opacity: 1; transform: scale(1.15); }
}

.pill-label { white-space: nowrap; }

.cta-row {
display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
margin-top: clamp(6px, 1vh, 12px);
margin-bottom: 0;
}

/* -- Responsive -- */
@media (max-width: 1024px) {
.hero {
  min-height: min(calc(100svh - var(--navH) - 100px), 640px);
  padding-bottom: 24px;
}
.hero-orbit-area { height: clamp(180px, 22vw, 260px); }
}

@media (max-width: 820px) {
.hero {
  min-height: min(calc(100svh - var(--navH) - 100px), 560px);
  padding-bottom: 20px;
}
.hero-headline { font-size: clamp(52px, 18vw, 128px); line-height: 0.9; }
.hw--accent { font-size: clamp(72px, 22vw, 160px); }
.cta-row { margin-bottom: clamp(12px, 4vh, 28px); }
.hero-orbit-area { height: clamp(160px, 20vw, 240px); }
}

@media (max-width: 768px) {
.hero {
  min-height: min(calc(100svh - var(--navH) - 100px), 500px);
}
.hero-figure-wrap { width: clamp(180px, 34vw, 280px); }
.hero-orbit-area { height: clamp(150px, 20vw, 220px); }
}

@media (max-width: 640px) {
.hero { align-items: center; min-height: 0; }
.hero::before { display: none; }
.hero-watermark { display: none; }
.hero-eyebrow-text { text-align: center; }
.hero-headline { text-align: center; max-width: 92vw; }
.hw--accent {
  font-size: inherit;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  filter: none;
}
.hero-subheadline { text-align: center; }
.hero-orbit-area {
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 20px;
  margin-top: 32px;
}
.pill {
  position: static;
  animation: none;
  opacity: 1;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.pill.active {
  border-color: rgba(14,165,233,0.3);
  background: rgba(14,165,233,0.08);
}
.pill::after { display: none; }
.pill-ico {
  width: 24px; height: 24px;
  border-radius: 6px;
}
.pill-label { font-size: 12px; }
.hero-figure-wrap { display: none; }
.hero-actions::before { display: none; }
.cta-row { margin-top: 32px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-figure-wrap,
.hero-eyebrow-text::after,
.ico-cube, .ico-img3d, .ico-frame, .ico-play,
.ico-frame::after {
  animation: none !important;
}
.hero-figure {
  transform: none !important;
  transition: none !important;
}
.hero-headline .hw,
.hero-eyebrow,
.hero-subheadline,
.hero-actions,
.hero-figure-wrap,
.wm-l,
.pill {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
}


/* ====================================================== */
/* INTERACTIVE STRIP WRAPPER (title + micro-animations)   */
/* ====================================================== */
/* ===== Thin divider with pulse (10px inset from screen edges) ===== */
.strip-divider{
  width: min(1600px, calc(100vw - 20px));  /* 10px inset per side */
  height: 1px;
  margin: 0 auto clamp(12px, 2vh, 22px);
  position: relative;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-radius: 999px;
  overflow: hidden;
}
.strip-divider .pulse{
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.65), 0 0 30px rgba(255,255,255,.35);
  will-change: transform, opacity;
  animation: dividerPulse 60s linear infinite;
}
/* Composited sweep — translateX along the .strip-divider parent width.
 Parent is min(1600px, 100vw - 20px); dot is 12px wide.
 overflow: hidden on the parent clips any overshoot at the edges. */
@keyframes dividerPulse{
0%   { transform: translate(0, -50%); opacity: .75; }
50%  { transform: translate(calc(min(1600px, 100vw - 20px) - 12px), -50%); opacity: 1; }
100% { transform: translate(0, -50%); opacity: .75; }
}

/* Make sure the big canvas covers ultra-wide strips nicely */
.strip-canvas{
  width: 100%;
  height: 100%;
  display: block;
  /* no CSS scaling; we resize pixels in JS for crispness */
}
.strip-wrap{
  padding: clamp(28px, 5vh, 56px) 0;
  background: #0b0b0b; /* page bg continuity */
}

.strip-head{
  text-align: center;
  margin-bottom: clamp(14px, 3vh, 26px);
}

.strip-title-anim{
  margin: 0 0 6px;
  font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.02;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* gradient "electric" text — composited shine via background-position sweep
   (replaces a filter: drop-shadow animation that triggered full paint each frame) */
.strip-title-anim .grad{
  position: relative;
  background: linear-gradient(90deg, #fff 0%, #b8b8b8 50%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.strip-title-anim .grad::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* tiny blinking "charge" dot — composited pulse via ::before scale+opacity
   (replaces a previous box-shadow animation that triggered paint each frame) */
.hint-dot{
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; position: relative;
  background: radial-gradient(circle at 30% 30%, #fff, #d9d9d9 55%, #aaa);
  will-change: transform;
  animation: hintDotPulse 1.8s ease-out infinite;
}
.hint-dot::before{
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(1);
  opacity: .8;
  pointer-events: none;
  will-change: transform, opacity;
  animation: hintDotRing 1.8s ease-out infinite;
}
@keyframes hintDotPulse {
  0%, 100% { transform: scale(1); }
  70%      { transform: scale(1.1); }
}
@keyframes hintDotRing {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

.strip-sub{
  margin: 0 auto;
  color: #cfcfcf;
  opacity: .9;
  font-size: clamp(13px, 2.2vw, 15px);
}

/* ensure white band still sits tight under the heading */
.strip-wrap .strip{
  margin-top: clamp(12px, 2vh, 18px);
}

/* motion-respect */
@media (prefers-reduced-motion: reduce){
  .strip-title-anim .grad,
  .hint-dot,
  .hint-dot::before { animation: none !important; }
  .hint-dot::before { opacity: 0 !important; }
}
/* ========================================================================== */
/* STRIP — animated ECG background + refined chips                            */
/* ========================================================================== */
/* ===== STRIP — white background + flash-like trail, spacious chips ===== */
/* ===== STRIP — white bg, spacious chips ===== */
.strip{
  position:relative; overflow:hidden;
  padding: clamp(30px, 4vh, 70px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.strip--light{ background:#ffffff; border-color:#ececec; color:#0b0b0b; }
.strip--light .strip-inner{ color:inherit; }

  /* FX canvas */
  .strip-fx{ position:absolute; inset:0; pointer-events:none; z-index:0; }
  .strip-canvas{ width:100%; height:100%; display:block; }
  
  /* Foreground */
  .strip-inner{ position:relative; z-index:1; }
  
  /* Wider layout & breathing room */
  .strip-list{
      display:grid;
      grid-template-columns: repeat(6, minmax(160px, 1fr));
      gap: clamp(18px, 3vw, 28px);
  }
.strip-list--big{ grid-auto-rows:1fr; }
@media (max-width:1200px){ .strip-list{ grid-template-columns:repeat(3, minmax(180px,1fr)); } }
@media (max-width:640px) { .strip-list{ grid-template-columns:repeat(2, minmax(150px,1fr)); } }

/* Chips */
.strip .item{
  appearance:none; cursor:pointer;
  border: none;
  background:#000000;
  color:#ffffff;
  border-radius:16px;
  padding:16px 18px;
  font-weight:800; letter-spacing:.02em; text-align:center;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.strip .item:hover{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,.16);
  box-shadow:0 14px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
.strip .item:active{ transform:translateY(-1px); }

/* Dark-theme fallback if strip not white */
.strip:not(.strip--light) .item{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0)), #0f0f0f;
  color:#ececec;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.30);
}
.strip:not(.strip--light) .item:hover{
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0)), #111;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px rgba(0,0,0,.42);
}
/* ========================================================================== */
/* LOGOS / PARTNERS — brighter, higher-contrast, clearer on dim displays     */
/* ========================================================================== */
.logos-wrap{
  background:#0b0b0b;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(80px,8vh,120px) 0;
  position:relative;
  overflow:hidden;
}
/* stronger vignette/bloom so tiles pop */
.logos-wrap::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 50% 10%, rgba(255,255,255,.16), transparent 72%),
    radial-gradient(900px 420px at 50% 60%, rgba(255,255,255,.10), transparent 72%);
  opacity:.70; /* was .55 */
  pointer-events:none;
}

.logos-head{ text-align:center; margin-bottom:clamp(40px,6vh,80px); }
.logos-head h2{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(38px,6vw,72px);
  margin:0; letter-spacing:.02em;
}
.logos-head .grad{
  background:linear-gradient(90deg,#fff,#dcdcdc 50%,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logos-head p{ color:#e6e6e6; font-size:clamp(14px,2.2vw,18px); margin-top:6px; }

/* grid */
.logos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:clamp(26px,3.2vw,54px);
  align-items:center; justify-items:center;
}

/* tiles: brighter surface + clearer border */
.logo{
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.28);                 /* was .18 */
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,0)) , #141414; /* was .08 / #101010 */
  padding:clamp(20px,2.2vw,28px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, filter .25s ease;
  box-shadow:0 8px 36px rgba(255,255,255,.08);            /* was .04 */
}

/* icons: flip to white and boost clarity */
.logo img{
  width:clamp(46px,5.2vw,70px);
  height:auto;
  /* Simple Icons are black by default; invert to bright white for dark bg */
  filter: invert(1) grayscale(0%) brightness(122%) contrast(118%);
  transition:filter .25s ease, transform .25s ease, opacity .25s ease;
  opacity:.98; /* slightly higher */
}

/* hover/focus: brighter without neon */
.logo:hover, .logo:focus-visible{
  transform:translateY(-6px) scale(1.06);
  border-color:rgba(255,255,255,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,0)), #171717;
  box-shadow:
    0 16px 68px rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.logo:hover img, .logo:focus-visible img{
  filter: invert(1) grayscale(0%) brightness(138%) contrast(125%);
  transform:scale(1.08);
}

/* accessibility: if user has very low screen brightness, give icons a base tint */
@media (prefers-contrast: more){
  .logo img{ filter:grayscale(0%) brightness(118%) contrast(115%); }
  .logo{ border-color:rgba(255,255,255,.45); }
}

/* medium screens */
@media (max-width:1024px){
  .logos-grid{ gap:clamp(18px,2.5vw,36px); }
  .logo{ padding:18px; }
  .logo img{ width:clamp(42px,5vw,60px); }
}
@media (max-width:820px){
  .logos-grid{
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    max-width:480px;
    margin-inline:auto;
  }
  .logo{ padding:18px; border-radius:14px; }
  .logo img{ width:48px; }
}
@media (max-width:720px){
  .logos-grid{ gap:14px; max-width:420px; }
  .logo{ padding:16px; }
  .logo img{ width:44px; }
}

/* ========================================================================== */
/* FEATURES                                                                   */
/* ========================================================================== */
.features{
position: relative;
overflow: hidden;
background: #ffffff;
border-top: 0;
border-bottom: 0;
padding: clamp(56px, 8vh, 96px) 0;
}

.features .container{
display: flex;
flex-direction: column;
gap: clamp(28px, 3.2vw, 40px);
width: calc(100vw - 56px);
max-width: none;
padding: 0;
}

.features-head{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}

.features-head h2{
margin: 0;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(48px, 6vw, 76px);
letter-spacing: 0.02em;
color: #0b0b0b;
text-transform: uppercase;
}

.features-head p{
margin: 0;
max-width: 58ch;
color: #666;
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.7;
}

.feature-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2vw, 24px);
}

.feature-card{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
gap: 10px 18px;
min-height: 100%;
padding: 24px 24px 22px;
border-radius: 24px;
border: 1px solid #e0e5ea;
background: #ffffff;
box-shadow:
  0 12px 26px rgba(15, 23, 42, 0.06),
  inset 0 1px 0 rgba(255,255,255,0.75);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.feature-card:nth-child(even){
border-color: rgba(255,255,255,0.08);
background: #111111;
box-shadow:
  0 14px 28px rgba(0, 0, 0, 0.16),
  inset 0 1px 0 rgba(255,255,255,0.03);
}

.feature-card:hover{
transform: translateY(-3px);
border-color: rgba(15, 23, 42, 0.14);
box-shadow:
  0 18px 34px rgba(15, 23, 42, 0.1);
}

.feature-card:nth-child(even):hover{
border-color: rgba(255,255,255,0.14);
box-shadow:
  0 18px 34px rgba(0, 0, 0, 0.22);
}

.feature-card__icon{
grid-column: 2;
grid-row: 1 / span 4;
align-self: center;
justify-self: end;
width: 78px;
height: 78px;
display: grid;
place-items: center;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(180deg, #f3f3f3, #ececec);
color: #0b0b0b;
box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.feature-card:nth-child(even) .feature-card__icon{
border-color: rgba(255,255,255,0.08);
background: linear-gradient(180deg, #2b2b2b, #1a1a1a);
color: #ffffff;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.feature-card__icon svg{
width: 32px;
height: 32px;
}

.feature-card__eyebrow{
grid-column: 1;
color: #0b0b0b;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(24px, 2vw, 34px);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
}

.feature-card:nth-child(even) .feature-card__eyebrow{
color: #ffffff;
}

.feature-card h3{
grid-column: 1;
margin: 0;
color: #20262c;
font-size: clamp(15px, 1vw, 17px);
line-height: 1.45;
letter-spacing: -0.01em;
font-weight: 700;
max-width: 30ch;
}

.feature-card p{
grid-column: 1;
margin: 0;
color: #505a65;
font-size: 13px;
line-height: 1.55;
max-width: 33ch;
}

.feature-card:nth-child(even) h3{
color: #f8fafc;
}

.feature-card:nth-child(even) p{
color: rgba(255,255,255,0.72);
}

.feature-points{
display: none;
}

.feature-link{
grid-column: 1;
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
margin-top: 8px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid #0b0b0b;
background: #ffffff;
color: #0b0b0b;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.feature-link:hover{
transform: translateY(-1px);
background: #0b0b0b;
border-color: #0b0b0b;
color: #ffffff;
}

.feature-card:nth-child(even) .feature-link{
border-color: rgba(255,255,255,0.8);
background: transparent;
color: #ffffff;
}

.feature-card:nth-child(even) .feature-link:hover{
background: #ffffff;
border-color: #ffffff;
color: #0b0b0b;
}

@media (max-width: 1100px){
.feature-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 700px){
.feature-grid{
  grid-template-columns: 1fr;
}

.feature-card{
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 22px 18px;
  border-radius: 20px;
  gap: 10px 14px;
}

.feature-card__icon{
  width: 66px;
  height: 66px;
  border-radius: 16px;
}

.feature-card__icon svg{
  width: 28px;
  height: 28px;
}

.feature-card h3,
.feature-card p{
  max-width: none;
}
}

/* ========================================================================== */
/* PRICING                                                                    */
/* ========================================================================== */
.pricing-wrap{
  background:#0b0b0b;
  border-top:1px solid var(--line);
  padding:clamp(32px,4vh,50px) 0;
}
.pricing-head{
  margin-bottom:clamp(28px,4vh,44px);
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(420px,560px) minmax(220px,1fr);
  align-items:end;
  column-gap:clamp(18px,3vw,42px);
  row-gap:0;
}
.pricing-copy{
  display:grid;
  gap:10px;
  justify-items:center;
  max-width:620px;
  margin:0 auto;
  align-self:end;
}
.pricing-eyebrow{
  color:#8ea3b6;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pricing-primary{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:10px;
  width:100%;
  margin-top:clamp(16px,2vw,24px);
  padding-top:0;
  text-align:center;
}
.pricing-support{
  display:grid;
  align-content:start;
  gap:8px;
  padding-top:0;
  color:rgba(255,255,255,.68);
}
.pricing-support-rail{
  align-self:end;
}
.pricing-support--auth{
  justify-self:start;
  justify-items:start;
  text-align:left;
}
.pricing-support--enterprise{
  justify-self:end;
  justify-items:end;
  text-align:right;
}
.pricing-support-state{
  display:grid;
  gap:8px;
  justify-items:inherit;
}
.pricing-support-state--verified{
  gap:6px;
}
.pricing-support-icon{
  display: flex;
  align-items: center;
  gap:8px;
  font-size:15px;
  color:rgba(125,211,252,.72);
  opacity:.92;
}
.pricing-support-icon svg{
  display:block;
}
.pricing-support-label{
  color:rgba(255,255,255,.46);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pricing-support p{
  margin:0;
  color:rgba(255,255,255,.64);
  font-size:13px;
  line-height:1.55;
  max-width:24ch;
  text-align:inherit;
}
.pricing-inline-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:none;
  background:none;
  color:#f4f4f4;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease, opacity .2s ease, transform .2s ease, text-decoration-color .2s ease;
}
.pricing-inline-cta:hover{
  color: #fff;
  opacity:1;
  text-decoration:none;
}
.pricing-inline-cta i{
  font-size:11px;
  transition:transform .2s ease;
}
.pricing-inline-cta:hover i{
  transform:translateX(2px);
}
#authBannerVerified .pricing-support-icon{
  color:rgba(52,211,153,.82);
}
#authBannerEmail{
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:500;
  overflow-wrap:anywhere;
}

.pricing-copy h2{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(42px,7vw,80px);
  background:linear-gradient(90deg,#fff,#ccc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0;
  text-align:center;
}
.pricing-copy p{
  margin:0;
  text-align:center;
  max-width:48ch;
}
.secure-toggle-btn.compact{
  width:auto; max-width:none; margin:0;
  padding:9px 16px; gap:8px;
  border-radius:999px; font-size:13px;
  border-color:rgba(255,255,255,.15);
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  animation:secure-btn-glow 3s ease-in-out infinite;
}
.secure-toggle-btn.compact i:first-child{
  font-size:17px;
}
.secure-toggle-btn.compact .toggle-chevron{
  font-size:11px;
}
@keyframes secure-btn-glow{
  0%, 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 12px 2px rgba(255,255,255,.06); }
}
.secure-alert-wrap{
  position:relative;
}
.secure-info-btn{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(148,163,184,.1);
  color:#94a3b8;
  padding:0;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.secure-info-btn:hover{
  transform:translateY(-1px) scale(1.06);
  box-shadow:0 4px 12px rgba(148,163,184,.2);
  border-color:rgba(148,163,184,.6);
  color:#e2e8f0;
}
.secure-info-btn::after{
  display:none; /* Remove pulsing ring — no longer an urgent alert */
}
.secure-alert-dot{
  font-size:13px; font-weight:700; line-height:1;
}
.secure-info-pop{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translate(-50%,-6px);
  width:260px;
  max-width:80vw;
  padding:12px 14px;
  background:#0f0f0f;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:12px;
  line-height:1.4;
  color:#dcdcdc;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:6;
}
.secure-info-pop::before{
  content:"";
  position:absolute;
  top:-6px; left:50%;
  width:10px; height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:#0f0f0f;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}
.secure-info-pop p{ margin:0; }
.secure-alert-wrap.open .secure-info-pop{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);
}
.price-card{
  background:#0f0f0f; border:1px solid var(--line);
  border-radius:20px; padding:22px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.pc-note{
  margin-top:auto;
  white-space:nowrap;
}
.price-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 60px rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}
.price-card.featured{
  position:relative;
  background:#111;
  border-color:rgba(125,211,252,.45);
  box-shadow:0 22px 70px rgba(125,211,252,.12), inset 0 1px 0 rgba(255,255,255,.12);
}
.price-card.featured::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:22px; pointer-events:none;
  box-shadow:0 0 24px rgba(125,211,252,.2);
}
.pc-top .badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); font-weight:800; font-size:12px; letter-spacing:.06em;
}
.pc-top .badge.hot{ border-color:#fff; }
.pc-top h3{ font-family:"Bebas Neue"; font-size:38px; margin:8px 0 2px; }
.pc-top .sub{ color:#bdbdbd; margin:0; }

.pc-price .big{ font-size:40px; font-weight:900; }
.pc-price small{ color:#bdbdbd; display:block; margin-top:4px; }

.pc-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; color:#dcdcdc }
.pc-list li::before{ content:"• "; color:#9f9f9f }
/* Highlight list item for premium features like resolution */
.pc-list li.highlight{ color:#7dd3fc; font-weight:500 }
.pc-list li.highlight::before{ content:"✓ "; color:#7dd3fc }

.btn.block{ width:100%; justify-content:center; text-align:center }
.price-card .btn.block{ margin-top:auto }
.price-card.featured .btn{
  background:#f7fbff; color:#0b0b0b; border-color:#f7fbff;
  box-shadow:0 10px 26px rgba(125,211,252,.25);
}
.price-card.featured .btn:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 14px 32px rgba(125,211,252,.35);
}
/* Video Studio card - slightly larger for premium positioning */
.price-card.video-studio-card{
  transform:scale(1.03);
  z-index:1;
}
.price-card.video-studio-card:hover{
  transform:scale(1.03) translateY(-6px);
}
/* Pricing toggle row with info icon */
.pricing-toggle-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

/* Credits Info Icon Trigger */
.credits-info-trigger{
  position: relative;
  cursor: pointer;
  color: #707070;
  font-size: 1.1rem;
  transition: color 0.2s, transform 0.2s;
  outline: none;
}
.credits-info-trigger:hover,
.credits-info-trigger:focus{
  color: #7dd3fc;
}
.credits-info-trigger i{
  animation: pulse-glow 2.5s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%, 100%{ opacity: 0.6; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.1); }
}
.credits-info-trigger:hover i,
.credits-info-trigger:focus i{
  animation: none;
  transform: scale(1.15);
}

/* Credits Info Popover */
.credits-info-popover{
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  width: 280px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 100;
  text-align: left;
}
.credits-info-trigger:hover .credits-info-popover,
.credits-info-trigger:focus .credits-info-popover,
.credits-info-trigger:focus-within .credits-info-popover{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.credits-info-popover .popover-arrow{
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: #1a1a1a;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.12);
  transform: rotate(45deg);
}
.credits-info-popover h4{
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7dd3fc;
  letter-spacing: 0.02em;
}
.credits-info-popover ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: #b0b0b0;
  line-height: 1.45;
}
.credits-info-popover ul li::before{
  content: "→ ";
  color: #7dd3fc;
  opacity: 0.7;
}
.credits-info-popover ul li strong{
  color: #e0e0e0;
}

.pricing-wrap .foot-note{
  text-align:center; color:#bdbdbd; margin-top:24px;
}
.pricing-wrap .foot-note a{ text-decoration:underline }

/* Pricing mode toggle */
.pricing-mode-toggle{
  display:inline-flex;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:3px;
  gap:2px;
  margin-top:4px;
}
.mode-pill{
  padding:7px 18px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:#999;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.mode-pill:hover{
  color:#ccc;
}
.mode-pill.active{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* Subscription modal details */
.sub-modal-card{
  width:min(440px,92vw) !important;
}
.sub-modal-card .modal-subtitle{
  color:#bdbdbd;
  margin:0 0 18px;
  font-size:14px;
}
.sub-modal-details{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.sub-detail-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sub-detail-row:last-child{
  border-bottom:none;
}
.sub-detail-label{
  color:#999;
  font-size:13px;
}
.sub-detail-value{
  color:#eaeaea;
  font-weight:700;
  font-size:14px;
}
.sub-detail-value small{
  font-weight:400;
  color:#999;
  font-size:12px;
}
.sub-detail-total{
  background:rgba(255,255,255,.03);
}
.sub-detail-total .sub-detail-value{
  font-size:18px;
}
.sub-modal-error{
  color:#ff6b7a;
  font-size:13px;
  margin:0 0 8px;
  padding:8px 12px;
  background:rgba(220,53,69,.12);
  border:1px solid rgba(220,53,69,.3);
  border-radius:8px;
}
.sub-modal-message{
  color:#60a5fa;
  font-size:13px;
  margin:0 0 8px;
  padding:8px 12px;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.3);
  border-radius:8px;
}
.sub-state{ margin-top:16px; }
.sub-verify-info{
  font-size:14px;
  color:#aaa;
  margin:0 0 12px;
  text-align:center;
}
.sub-verify-info strong{ color:#fff; }
#subVerifyCode{
  text-align:center;
  font-size:24px;
  font-weight:600;
  letter-spacing:8px;
  font-family:'SF Mono',Monaco,monospace;
}
.sub-resend-link,
.sub-back-link{
  display:block;
  background:none;
  border:none;
  color:#888;
  font-size:12px;
  cursor:pointer;
  margin-top:8px;
  text-align:center;
  width:100%;
}
.sub-resend-link:hover,
.sub-back-link:hover{ color:#fff; text-decoration:underline; }

/* responsive */
@media (max-width:1180px){
  .pricing-head{
    grid-template-columns:minmax(180px,1fr) minmax(340px,500px) minmax(180px,1fr);
    column-gap:clamp(16px,2vw,26px);
  }
}
@media (max-width:980px){
  .pricing-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:16px;
  }
  .pricing-copy{
    grid-column:1 / -1;
    max-width:none;
    order:0;
  }
  .pricing-primary{
    margin-top:16px;
  }
  .pricing-support{
    padding-top:0;
    justify-self:stretch;
    justify-items:center;
    text-align:center;
    width:100%;
    max-width:none;
    padding:24px 20px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
  }
  .pricing-support--auth{ order:1; }
  .pricing-support--enterprise{ order:2; }
  .pricing-support-state{
    justify-items:center;
  }
  .pricing-support-icon{
    justify-content:center;
    font-size:18px;
    margin-bottom:4px;
  }
  .pricing-support-label{
    font-size:11px;
    letter-spacing:.14em;
  }
  .pricing-support p{
    max-width:32ch;
    text-align:center;
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,.6);
  }
  .pricing-inline-cta{
    margin-top:4px;
    padding:10px 22px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.04);
    font-size:13px;
    font-weight:600;
    color:#fff;
    transition:all .2s ease;
  }
  .pricing-inline-cta:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.25);
    transform:translateY(-1px);
  }
  .pricing-grid{
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
  .price-card{
    padding:16px;
    gap:10px;
    border-radius:16px;
  }
  .pc-top h3{ font-size:24px; }
  .pc-top .sub{ font-size:12px; }
  .pc-price .big{ font-size:28px; }
  .pc-credits{ font-size:12px; }
  .pc-feat-list{ font-size:12px; gap:4px; }
  .pc-feat-list li{ font-size:12px; }
  .pc-note{ font-size:11px; }
  .pc-cta{ padding:10px 14px; font-size:12px; }
}
@media (max-width:640px){
  .pricing-head{
    grid-template-columns:1fr;
  }
  .pricing-grid{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .price-card{
    padding:12px;
    gap:8px;
    border-radius:14px;
  }
  .pc-top h3{ font-size:20px; }
  .pc-top .sub{ font-size:11px; }
  .pc-price .big{ font-size:24px; }
  .pc-credits{ font-size:11px; }
  .pc-feat-list{ font-size:11px; gap:3px; }
  .pc-feat-list li{ font-size:11px; }
  .pc-note{ font-size:10px; }
  .pc-cta{ padding:9px 12px; font-size:11px; border-radius:8px; }
  .pricing-eyebrow{
    font-size:10px;
  }
  .pricing-copy h2,
  .pricing-copy p{
    max-width:none;
  }
  .pricing-toggle-row{
    justify-content:center;
  }
  .pricing-support{
    max-width:100%;
    padding:20px 16px;
    border-radius:14px;
  }
  .pricing-support p{
    font-size:13px;
    max-width:none;
  }
  .pricing-inline-cta{
    font-size:12px;
    width:100%;
    justify-content:center;
    padding:12px 20px;
  }
}
@media (max-width:480px){
  .pricing-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .price-card{
    padding:18px;
    gap:12px;
    border-radius:16px;
  }
  .pc-top h3{ font-size:26px; }
  .pc-top .sub{ font-size:13px; }
  .pc-price .big{ font-size:30px; }
  .pc-credits{ font-size:13px; }
  .pc-feat-list li{ font-size:13px; }
  .pc-note{ font-size:12px; }
  .pc-cta{ padding:12px 18px; font-size:13px; border-radius:10px; }
  .pricing-support{
    padding:18px 14px;
    border-radius:12px;
    gap:6px;
  }
  .pricing-support-icon{
    font-size:16px;
  }
  .pricing-support-label{
    font-size:10px;
  }
  .pricing-support p{
    font-size:12px;
  }
  .pricing-inline-cta{
    padding:10px 16px;
    font-size:11px;
    border-radius:6px;
  }
}
@media (max-width:390px){
  .pricing-support{
    padding:16px 12px;
    border-radius:10px;
  }
  .pricing-support p{
    font-size:11px;
  }
  .pricing-inline-cta{
    padding:9px 14px;
    font-size:10px;
  }
}

/* ========================================================================== */
/* COMMUNITY                                                                  */
/* ========================================================================== */
.community-wrap {
  background: #ffffff;
  color: #0b0b0b;
  border-top: 1px solid #ececec;
  padding: clamp(40px, 5vh, 64px) 0;
}

/* Centered Header */
.comm-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}

.comm-header h2 {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: clamp(42px, 7vw, 72px);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}

.comm-header .muted {
  color: #5a5a5a;
  font-size: 16px;
  line-height: 1.6;
}

/* Resource Tabs */
.resource-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.resource-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #5a5a5a;
  cursor: pointer;
  transition: all 0.25s ease;
}

.resource-tab i {
  font-size: 14px;
}

.resource-tab:hover {
  background: #f0f0f0;
  border-color: #d0d0d0;
  color: #0b0b0b;
}

.resource-tab.active {
  background: #0b0b0b;
  border-color: #0b0b0b;
  color: #fff;
}

/* Resource Panels */
.resource-panels {
  margin-bottom: 48px;
}

.resource-panel {
  display: none;
  animation: panelFade 0.3s ease;
}

.resource-panel.active {
  display: block;
}

@keyframes panelFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panel Footer */
.panel-footer {
  margin-top: 24px;
  padding: 16px 20px;
  background: #f9f9f9;
  border-radius: 12px;
  text-align: center;
}

.footer-tip {
  margin: 0;
  color: #5a5a5a;
  font-size: 14px;
}

.footer-tip i {
  margin-right: 8px;
  color: #0b0b0b;
}

.footer-tip strong {
  color: #0b0b0b;
}

/* ─────────────── PROMPT TIPS PANEL ─────────────── */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.tip-card {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.tip-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.tip-number {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 24px;
  color: #d0d0d0;
  line-height: 1;
}

.tip-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0b0b0b;
}

.tip-card > p {
  margin: 0 0 12px;
  color: #5a5a5a;
  font-size: 14px;
  line-height: 1.5;
}

.tip-example {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 12px;
}

.example-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  margin-bottom: 6px;
}

.tip-example code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 12px;
  color: #0b0b0b;
  line-height: 1.5;
  word-break: break-word;
}

.tip-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compare-bad, .compare-good {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
}

.compare-bad {
  background: #fff5f5;
  color: #c53030;
  text-decoration: line-through;
  text-decoration-color: #c5303080;
}

.compare-good {
  background: #f0fff4;
  color: #276749;
}

.tip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-tag {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}

/* ─────────────── API SNIPPETS PANEL ─────────────── */
.snippet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.snippet-card {
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
}

.snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #252525;
  border-bottom: 1px solid #333;
}

.snippet-lang {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.copy-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #333;
  color: #fff;
}

.copy-btn.copied {
  color: #48bb78;
}

.snippet-code {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
}

.snippet-code code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #e8e8e8;
  white-space: pre;
}

/* ─────────────── SHOWCASE PANEL ─────────────── */
.showcase-intro {
  text-align: center;
  margin-bottom: 24px;
}

.showcase-intro p {
  color: #5a5a5a;
  font-size: 15px;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.showcase-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.showcase-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.showcase-preview {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.showcase-preview i {
  font-size: 24px;
  color: #888;
}

.showcase-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.showcase-info strong {
  font-size: 15px;
  font-weight: 800;
  color: #0b0b0b;
}

.showcase-author {
  font-size: 12px;
  color: #888;
}

.showcase-prompt {
  font-size: 12px;
  color: #5a5a5a;
  font-style: italic;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ─────────────── BUG REPORTS PANEL ─────────────── */
.bug-intro {
  text-align: center;
  margin-bottom: 24px;
}

.bug-intro p {
  color: #5a5a5a;
  font-size: 15px;
}

.bug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.bug-card {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bug-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.bug-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: #f0f0f0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bug-icon i {
  font-size: 24px;
  color: #555;
}

.bug-card h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #0b0b0b;
}

.bug-card p {
  margin: 0 0 16px;
  font-size: 13px;
  color: #5a5a5a;
  line-height: 1.5;
}

.bug-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0b0b0b;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.bug-link:hover {
  gap: 10px;
}

.bug-template {
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px 24px;
}

.bug-template h5 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: #0b0b0b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bug-template ul {
  margin: 0;
  padding-left: 20px;
}

.bug-template li {
  font-size: 13px;
  color: #5a5a5a;
  margin-bottom: 6px;
}

.bug-template li strong {
  color: #0b0b0b;
}

/* ─────────────── QUICK LINKS ─────────────── */
.comm-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.quick-link-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.quick-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
  border-color: #e1e1e1;
}

.ql-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f2f2f2;
}

.ql-icon i {
  font-size: 22px;
  color: #0b0b0b;
}

.ql-body strong {
  display: block;
  font-weight: 900;
  color: #0b0b0b;
  margin-bottom: 2px;
}

.ql-body p {
  margin: 0;
  font-size: 13px;
  color: #5a5a5a;
}

.ql-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #0b0b0b;
  opacity: 0.7;
  transition: opacity 0.2s ease, gap 0.2s ease;
}

.quick-link-card:hover .ql-cta {
  opacity: 1;
  gap: 10px;
}

/* ─────────────── CTA CENTERED ─────────────── */
.comm-cta-centered {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.community-wrap .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: #0b0b0b;
  color: #0b0b0b;
  padding: 14px 28px;
  font-size: 14px;
}

.community-wrap .btn:hover {
  background: #0b0b0b;
  color: #fff;
}

.community-wrap .btn.ghost {
  background: transparent;
}

/* ========================================================================== */
/* INFO SECTION (dark variant)                                                */
/* ========================================================================== */
.info-wrap {
  background: #0b0b0b;
  color: #f5f7fb;
  border-top: 1px solid #1a1a1a;
  padding: clamp(40px, 5vh, 64px) 0;
}

.info-wrap .comm-header .muted {
  color: #888;
}

.info-wrap .resource-tab {
  background: #161616;
  border-color: #2a2a2a;
  color: #999;
}

.info-wrap .resource-tab:hover {
  background: #1f1f1f;
  border-color: #444;
  color: #f5f7fb;
}

.info-wrap .resource-tab.active {
  background: #fff;
  border-color: #fff;
  color: #0b0b0b;
}

.info-wrap + [data-site-shell="footer"] .site-shell-footer {
  margin-top: 0;
}

/* ========================================================================== */
/* RESOURCE MODALS                                                            */
/* ========================================================================== */
.resource-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.resource-modal.open {
  opacity: 1;
  visibility: visible;
}

.resource-modal-card {
  position: relative;
  width: 94vw;
  max-width: 1600px;
  min-height: 600px;
  height: 75vh;
  max-height: 800px;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
  /* Hide scrollbar but allow scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.resource-modal-card::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.resource-modal.open .resource-modal-card {
  transform: translateY(0) scale(1);
}

.resource-modal-card .close-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
}

.resource-modal-card .close-x:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.resource-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px 18px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.resource-modal-header i {
  font-size: 24px;
  color: #00d4ff;
}

.resource-modal-header h4 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.resource-modal-body {
  padding: 24px 28px 32px;
  color: #e0e0e0;
}

/* Panel grid inside modal */
.resource-modal .panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.resource-modal .tip-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

.resource-modal .tip-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.resource-modal .tip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.resource-modal .tip-number {
  font-size: 10px;
  font-weight: 700;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.resource-modal .tip-card h4 {
  margin: 0;
  font-size: 0.95rem;
  color: #fff;
  font-weight: 600;
}

.resource-modal .tip-card p {
  margin: 0;
  color: #b8b8b8;
  line-height: 1.55;
  font-size: 0.875rem;
}

.resource-modal .tip-example {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.resource-modal .example-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #909090;
  margin-bottom: 5px;
}

.resource-modal .tip-example code {
  font-family: 'Monaco', monospace;
  font-size: 12px;
  color: #00d4ff;
  line-height: 1.4;
}

.resource-modal .tip-compare {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.875rem;
}

.resource-modal .compare-bad {
  color: #ff6b6b;
}

.resource-modal .compare-good {
  color: #51cf66;
}

.resource-modal .tip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.resource-modal .mini-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
  border-radius: 12px;
}

.resource-modal .panel-footer {
  margin-top: 18px;
  padding: 14px;
  background: rgba(0, 212, 255, 0.06);
  border-radius: 8px;
}

.resource-modal .footer-tip {
  margin: 0;
  font-size: 13px;
  color: #c0c0c0;
  line-height: 1.5;
}

.resource-modal .footer-tip i {
  color: #00d4ff;
  margin-right: 6px;
}

/* Snippet grid */
.resource-modal .snippet-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.resource-modal .snippet-card {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
}

.resource-modal .snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.resource-modal .snippet-lang {
  font-size: 10px;
  font-weight: 700;
  color: #00d4ff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.resource-modal .copy-btn {
  background: none;
  border: none;
  color: #909090;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.resource-modal .copy-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.resource-modal .copy-btn.copied {
  color: #51cf66;
}

.resource-modal .snippet-code {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
}

.resource-modal .snippet-code code {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #d0d0d0;
}

/* Showcase grid */
.resource-modal .showcase-intro {
  margin-bottom: 16px;
  color: #b0b0b0;
  font-size: 0.875rem;
}

.resource-modal .showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.resource-modal .showcase-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.resource-modal .showcase-item:hover {
  border-color: rgba(0, 212, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

.resource-modal .showcase-preview {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #222);
  border-radius: 10px;
}

.resource-modal .showcase-preview i {
  font-size: 22px;
  color: #00d4ff;
}

.resource-modal .showcase-info strong {
  display: block;
  color: #fff;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.resource-modal .showcase-author {
  display: block;
  font-size: 11px;
  color: #808080;
  margin-bottom: 6px;
}

.resource-modal .showcase-prompt {
  display: block;
  font-size: 11px;
  color: #00d4ff;
  font-style: italic;
  line-height: 1.4;
  opacity: 0.9;
}

/* Bug grid */
.resource-modal .bug-intro {
  margin-bottom: 16px;
  color: #b0b0b0;
  font-size: 0.875rem;
}

.resource-modal .bug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.resource-modal .bug-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
}

.resource-modal .bug-card:hover {
  border-color: rgba(0, 212, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.resource-modal .bug-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 10px;
}

.resource-modal .bug-icon i {
  font-size: 18px;
  color: #00d4ff;
}

.resource-modal .bug-card h4 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 0.9rem;
}

.resource-modal .bug-card p {
  margin: 0;
  color: #a8a8a8;
  font-size: 12px;
  line-height: 1.45;
  flex: 1;
}

.resource-modal .bug-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #00d4ff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: gap 0.2s;
  margin-top: auto;
  padding-top: 12px;
}

.resource-modal .bug-link:hover {
  gap: 8px;
}

.resource-modal .bug-template {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px;
}

.resource-modal .bug-template h5 {
  margin: 0 0 10px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.resource-modal .bug-template h5 i {
  color: #00d4ff;
  font-size: 14px;
}

.resource-modal .bug-template ul {
  margin: 0;
  padding-left: 18px;
  color: #a8a8a8;
  font-size: 12px;
}

.resource-modal .bug-template li {
  margin-bottom: 5px;
  line-height: 1.4;
}

.resource-modal .bug-template li strong {
  color: #e0e0e0;
}

.resource-modal .footer-tip strong {
  color: #fff;
}

.resource-modal .tip-card strong {
  color: #fff;
}

/* ─────────────── RESPONSIVE ─────────────── */

/* Tablet breakpoint */
@media (max-width: 900px) {
  .resource-modal .bug-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-modal .bug-grid .bug-card:last-child {
    grid-column: span 2;
  }

  .resource-modal .panel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .resource-modal-header {
    padding: 18px 18px 14px;
  }

  .resource-modal-header h4 {
    font-size: 1.2rem;
  }

  .resource-modal-body {
    padding: 18px;
  }

  .resource-tabs {
    gap: 8px;
  }

  .resource-tab {
    padding: 10px 16px;
    font-size: 13px;
  }

  .resource-tab span {
    display: none;
  }

  .resource-tab i {
    font-size: 16px;
  }

  .panel-grid,
  .showcase-grid,
  .bug-grid {
    grid-template-columns: 1fr;
  }

  .resource-modal .panel-grid,
  .resource-modal .showcase-grid,
  .resource-modal .bug-grid {
    grid-template-columns: 1fr;
  }

  .resource-modal .bug-grid .bug-card:last-child {
    grid-column: span 1;
  }

  .resource-modal .showcase-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .resource-modal .showcase-preview {
    margin-bottom: 10px;
  }

  .comm-quick-links {
    grid-template-columns: 1fr;
  }

  .comm-cta-centered {
    flex-direction: column;
    align-items: center;
  }

  .comm-cta-centered .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* ========================================================================== */
/* OVERVIEW SECTION — immersive full-bleed design                            */
/* ========================================================================== */

/* Section shell */
.overview-section{
  padding:56px 0 48px;
  background:#ffffff;
  color:#0b0b0b;
}
.overview-section .container{
  width:calc(100vw - 56px);
  max-width:calc(100vw - 56px);
  padding:0;
}
.overview-showcase-grid{
  align-items:stretch;
}
.overview-head p{
  max-width:60ch;
}
.overview-main{
  display:grid;
  grid-template-columns:minmax(300px,.5fr) minmax(420px,1fr);
  gap:clamp(18px,2vw,28px);
  align-items:start;
}
.overview-footer{
  display:block;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #e7edf3;
}
.overview-rail-wide{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px 20px;
  align-items:start;
  margin:0;
}
.overview-rail-wide .demo-rail-label{
  padding-top:12px;
  white-space:nowrap;
}
.overview-prompt-card{
  min-height:0;
}
.overview-summary-text{
  font-size:clamp(17px,1.22vw,21px);
  line-height:1.6;
  color:#1a1f24;
  max-width:30ch;
}
.overview-summary-points{
  display:grid;
  gap:12px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e7edf3;
}
.overview-summary-point strong{
  display:block;
  margin-bottom:5px;
  color:#8a96a3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.overview-summary-point span{
  display:block;
  color:#55616c;
  font-size:13px;
  line-height:1.6;
}
.overview-examples{
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  padding-top:6px;
  padding-bottom:14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.overview-examples::-webkit-scrollbar{
  display:none;
}
.overview-chip{
  cursor:default;
  user-select:none;
  flex:0 0 auto;
}
.overview-chip:hover{
  transform:none;
  border-color:#d8dde3;
  background:#fff;
  color:#59636d;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}
.overview-actions{
  gap:14px;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
}
.overview-section .btn{
  border:1px solid #0b0b0b;
  border-radius:999px;
  background:#fff;
  color:#0b0b0b;
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:12px 18px;
  box-shadow:0 10px 18px rgba(15,23,42,.04);
}
.overview-section .btn:hover{
  background:#0b0b0b;
  color:#fff;
  box-shadow:0 14px 26px rgba(15,23,42,.12);
  transform:translateY(-1px);
}
.overview-actions .btn{
  box-shadow:none;
}
.overview-actions .btn:first-child{
  background:#0b0b0b;
  color:#ffffff;
  border-color:#0b0b0b;
  min-width:188px;
  justify-content:center;
}
.overview-actions .btn:first-child:hover{
  background:#161b20;
  border-color:#161b20;
  color:#ffffff;
}
.overview-actions .btn.ghost{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#52606d;
  box-shadow:none;
  font-size:12px;
  letter-spacing:.12em;
  position:relative;
}
.overview-actions .btn.ghost::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background:currentColor;
  opacity:.35;
}
.overview-actions .btn.ghost:hover{
  background:transparent;
  color:#0b0b0b;
  box-shadow:none;
  transform:translateX(2px);
}
.overview-actions .btn.ghost:hover::after{
  opacity:.75;
}
.overview-visual{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.overview-result{
  min-height:430px;
  height:auto;
  padding:18px;
}
.overview-result-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  width:100%;
  height:100%;
}
.overview-result-card{
  padding:18px;
  border:1px solid #dfe5eb;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(249,251,253,.95) 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.overview-result-card__label{
  color:#8a96a3;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.overview-result-card strong{
  color:#0b0b0b;
  font-size:clamp(20px,1.8vw,26px);
  font-weight:900;
  line-height:1.05;
}
.overview-result-card p{
  margin:0;
  color:#5f6871;
  font-size:13px;
  line-height:1.58;
}
.overview-panel--workflow{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
}
.overview-steps{
  margin-top:0;
}
.overview-actions--section{
  margin-top:86px;
  padding-top:16px;
  justify-content:center;
  align-items:center;
  align-self:center;
  width:fit-content;
  max-width:100%;
}
@media(max-width:1180px){
  .overview-showcase-grid{
    grid-template-columns:1fr;
    gap:36px;
    align-items:start;
  }
  .overview-actions--section{
    margin-top:28px;
    padding-top:0;
    width:auto;
  }
  .overview-panel--workflow{
    padding-top:24px;
    border-top:1px solid #eef2f6;
  }
}
@media(max-width:960px){
  .overview-main{
    grid-template-columns:1fr;
    gap:20px;
  }
  .overview-rail-wide{
    grid-template-columns:1fr;
    gap:10px;
  }
  .overview-rail-wide .demo-rail-label{
    padding-top:0;
  }
  .overview-actions{
    justify-content:center;
    flex-wrap:wrap;
  }
  .overview-actions--section{
    justify-content:center;
  }
  .overview-result{
    min-height:0;
    height:auto;
    overflow:visible;
  }
  .overview-result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}
@media(max-width:640px){
  .overview-section .container{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
  .overview-section{
    padding:44px 0 38px;
  }
  .overview-summary-text{
    font-size:16px;
  }
  .overview-footer{
    margin-top:18px;
    padding-top:18px;
  }
  .overview-result{
    padding:14px;
    border-radius:20px;
    height:auto;
    overflow:visible;
  }
  .overview-result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .overview-result-card{
    padding:14px;
    border-radius:16px;
  }
  .overview-result-card strong{
    font-size:20px;
  }
  .overview-result-card p{
    font-size:12px;
  }
  .overview-actions .btn:first-child{
    min-width:0;
  }
}

/* ========================================================================== */
/* HERO SECTION (legacy — unused, kept for reference)                        */
/* ========================================================================== */
.print3d-hero {
  position: relative;
  padding: clamp(32px, 4vw, 56px) 0;
  background: linear-gradient(180deg, #f7f2ea 0%, #f3ede3 52%, #eee7dd 100%);
  border-top: 1px solid rgba(12, 12, 12, 0.08);
  border-bottom: 1px solid rgba(12, 12, 12, 0.08);
  z-index: 1;
}

/* Hero Content */
.print3d-hero .hero-content {
  position: relative;
  z-index: 1;
  width: min(1600px, calc(100vw - 20px));
  max-width: min(1600px, calc(100vw - 20px));
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  gap: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(15, 18, 21, 0.08);
  border-radius: 38px;
  background:
    radial-gradient(circle at top left, rgba(255, 203, 149, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(125, 211, 252, 0.12), transparent 28%),
    linear-gradient(180deg, #13181b 0%, #0d1114 55%, #0a0d10 100%);
  box-shadow:
    0 26px 80px rgba(67, 52, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
}

.print3d-hero .hero-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.025), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%);
  pointer-events: none;
  opacity: 1;
}

.print3d-hero .hero-content::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 28px;
  pointer-events: none;
}

.print3d-hero .hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: clamp(24px, 2.8vw, 38px);
  align-items: stretch;
}

.print3d-hero .hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 790px;
}

.print3d-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 238, 220, 0.14);
  border-radius: 999px;
  background: rgba(247, 241, 233, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  cursor: default;
}

.print3d-hero .hero-kicker {
  margin: 0;
  color: #b9a691;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.print3d-hero .hero-badge:hover {
  border-color: rgba(255, 238, 220, 0.22);
  background: rgba(247, 241, 233, 0.08);
}

.print3d-hero .hero-badge svg {
  width: 15px;
  height: 15px;
  color: #f4c78f;
  position: relative;
  z-index: 1;
}

.print3d-hero .hero-content h1,
.print3d-hero .hero-content .title-xl {
  max-width: 11.25ch;
  font-size: clamp(44px, 4.8vw, 74px);
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.045em;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #edf1f4 62%, #b4bec6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.print3d-hero .hero-content h1::after,
.print3d-hero .hero-content .title-xl::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 0;
  transform: none;
  width: 112px;
  height: 2px;
  background: linear-gradient(90deg, #f4c78f 0%, #7dd3fc 65%, rgba(125, 211, 252, 0) 100%);
  opacity: 0.82;
}

.print3d-hero .hero-description {
  max-width: 61ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  color: #d7dde1;
  margin: 0;
}

.print3d-hero .hero-capabilities {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: fit-content;
  margin: 0;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: #ecf2f5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.print3d-hero .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}

.print3d-hero .hero-cta-row .btn:not(.ghost) {
  background: #f5ede4;
  color: #0e1215;
  border-color: #f5ede4;
  box-shadow: none;
}

.print3d-hero .hero-cta-row .btn:not(.ghost):hover {
  background: #ffffff;
  color: #0b0b0b;
  border-color: #ffffff;
}

.print3d-hero .hero-cta-row .btn.ghost {
  border-color: rgba(255, 255, 255, 0.14);
  color: #edf6fb;
  background: transparent;
}

.print3d-hero .hero-cta-row .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.print3d-hero .hero-proof-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 860px;
}

.print3d-hero .hero-proof-card {
  min-height: 112px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.015);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.print3d-hero .hero-proof-card__label {
  display: block;
  margin-bottom: 10px;
  color: #f4c78f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.print3d-hero .hero-proof-card strong {
  display: block;
  color: #f6f8fa;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.print3d-hero .hero-workspace {
  min-width: 0;
  display: flex;
}

.print3d-hero .hero-panel {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.print3d-hero .hero-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 199, 143, 0), rgba(244, 199, 143, 0.35), rgba(125, 211, 252, 0.18), rgba(125, 211, 252, 0));
  opacity: 0.95;
  pointer-events: none;
}

.print3d-hero .hero-panel__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.print3d-hero .hero-panel__eyebrow {
  color: #f4c78f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.print3d-hero .hero-panel__title {
  margin: 0;
  color: #f5fbff;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.print3d-hero .hero-rail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.print3d-hero .hero-rail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 17, 0.56);
  color: #e2ebf1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.print3d-hero .hero-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.print3d-hero .hero-mini-card {
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015)),
    rgba(6, 9, 12, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.print3d-hero .hero-mini-card:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 211, 252, 0.18);
  background-color: rgba(10, 14, 18, 0.82);
}

.print3d-hero .hero-mini-card__label {
  display: block;
  margin-bottom: 10px;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.print3d-hero .hero-mini-card h4 {
  margin: 0 0 8px;
  color: #f4fbff;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.print3d-hero .hero-mini-card p {
  margin: auto 0 0;
  color: #aebbc4;
  font-size: 13px;
  line-height: 1.6;
}

.print3d-hero .hero-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12), rgba(125, 211, 252, 0.08), rgba(255, 255, 255, 0));
}

.print3d-hero .hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.print3d-hero .stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  min-height: 126px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(8, 11, 14, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
  cursor: default;
}

.print3d-hero .stat-item:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 199, 143, 0.18);
  background-color: rgba(12, 16, 20, 0.9);
}

.print3d-hero .stat-value {
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 800;
  color: #f4fbff;
  letter-spacing: -0.01em;
  text-shadow: none;
  transition: color 0.24s ease;
}

.print3d-hero .stat-item:hover .stat-value {
  color: #f4c78f;
}

.print3d-hero .stat-label {
  font-size: 13px;
  color: #a7b2ba;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.6;
  transition: color 0.24s ease;
}

.print3d-hero .stat-item:hover .stat-label {
  color: #dfe8ed;
}

.print3d-hero .hero-seo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.print3d-hero .hero-seo-card {
  position: relative;
  overflow: hidden;
  min-height: 216px;
  padding: 20px 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.015);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.print3d-hero .hero-seo-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(244, 199, 143, 0.9), rgba(125, 211, 252, 0.35), rgba(125, 211, 252, 0));
}

.print3d-hero .hero-seo-card__label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(244, 199, 143, 0.08);
  border: 1px solid rgba(244, 199, 143, 0.16);
  color: #f4c78f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.print3d-hero .hero-seo-card h3 {
  margin: 0 0 10px;
  color: #f4fbff;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.print3d-hero .hero-seo-card p {
  margin: 0;
  color: #acb8c0;
  font-size: 14px;
  line-height: 1.65;
}

.print3d-hero .stat-divider {
  display: none;
}

/* Footer — styles now in footer.css */
.site-footer {
  margin-top: clamp(60px, 10vh, 100px);
}

/* ========================================================================== */
/* MODALS — frosted glass cards + accessible focus + subtle motion            */
/* ========================================================================== */
/* Social row */
.oauth-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:6px 0 4px;
}
@media (max-width:520px){ .oauth-row{ grid-template-columns:1fr; } }

.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:#0e0e0e; color:#ececec; font-weight:800; letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.oauth-btn img{ width:18px; height:18px; filter:invert(1) contrast(120%); opacity:.95 }
.oauth-btn:hover{ transform:translateY(-1px); border-color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.35) }
.modal .card .or-sep{ display:flex; align-items:center; gap:10px; margin:10px 0 6px; opacity:.8 }
.modal .card .or-sep::before,
.modal .card .or-sep::after{
  content:""; height:1px; flex:1; background:rgba(255,255,255,.14); border-radius:1px;
}
.modal .card .or-sep span{ font-size:12px; text-transform:uppercase; letter-spacing:.12em }

/* brand tints */
.oauth-google{ background:linear-gradient(180deg, rgba(255,255,255,.06), transparent), #0e0e0e; }
.oauth-github{ background:linear-gradient(180deg, rgba(255,255,255,.06), transparent), #0e0e0e; }

/* Close X already styled as .close-x in your CSS */
.modal{
  position: fixed; inset: 0;
  display: none;                       /* toggled with .open */
  place-items: center;
  background: radial-gradient(1200px 700px at 50% 10%, rgba(255,255,255,.06), transparent 60%),
              rgba(0,0,0,.62);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  z-index: 120;
}
.modal.open{ display: grid; }

.modal .card{
  width: min(880px, 92vw);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0)) , #0f0f0f;
  box-shadow:
    0 24px 80px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.10);
  padding: 22px;
  animation: modalPop .22s ease-out;
  color:#eaeaea;
}

.modal .card h4{
  margin: 2px 0 10px;
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: .5px;
}

/* Fields */
.modal .field{ margin: 12px 0; }
.modal .field input{
  width: 100%; height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0c0c0c;
  color: #f1f1f1;
  padding: 0 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.modal .field input::placeholder{ color:#a8a8a8; }
.modal .field input:focus{
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.35);
  background:#0e0e0e;
}

/* CTA row */
.modal .cta-row{
  margin-top: 12px;
  display:flex; gap:10px; justify-content:flex-end;
}
.modal .btn{ padding:12px 18px; font-weight:800; letter-spacing:.04em; }
.modal .btn:hover{ transform: translateY(-1px); }

/* Close (optional X) */
.modal .close-x{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:#cfcfcf;
  font-size:22px; line-height:1; cursor:pointer; padding:6px;
  border-radius:10px;
}
.modal .close-x:hover{ background:rgba(255,255,255,.06); }

/* Backdrop click feedback (subtle) */
.modal:active{ cursor: pointer; }
.modal .card:active{ cursor: default; }

/* Motion */
@keyframes modalPop{
  from{ transform: translateY(8px) scale(.98); opacity:.0 }
  to  { transform: translateY(0)   scale(1);    opacity:1  }
}

/* High contrast users */
@media (prefers-contrast: more){
  .modal .card{ border-color:#fff; }
  .modal .field input:focus{ box-shadow: 0 0 0 3px #fff; }
}

/* ========================================================================== */
/* AUTH UI                                                                      */
/* ========================================================================== */

/* Auth error messages */
.auth-error {
background: rgba(220, 53, 69, 0.15);
border: 1px solid rgba(220, 53, 69, 0.4);
color: #ff6b7a;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 12px;
text-align: center;
}

/* Button loading state */
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn .btn-loader {
display: inline-flex;
align-items: center;
}

/* User menu in nav */
.user-menu {
display: flex;
align-items: center;
position: relative;
}

.user-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 6px;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
cursor: pointer;
transition: all 0.2s ease;
}
.user-btn:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.2);
}

.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #333, #555);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
color: #fff;
}

.user-name {
font-weight: 600;
font-size: 13px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.user-chevron {
font-size: 10px;
opacity: 0.6;
transition: transform 0.2s ease;
}
.user-btn[aria-expanded="true"] .user-chevron {
transform: rotate(180deg);
}

/* User dropdown */
.user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
z-index: 200;
}
.user-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
font-size: 13px;
color: var(--ink);
background: transparent;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.dropdown-item:hover {
background: rgba(255,255,255,0.05);
}
.dropdown-item i {
width: 16px;
opacity: 0.7;
}
.dropdown-item.logout {
color: #ff6b7a;
}
.dropdown-item.logout:hover {
background: rgba(220, 53, 69, 0.1);
}

.dropdown-divider {
border: none;
border-top: 1px solid var(--line);
margin: 6px 0;
}

/* Hide user name on small screens */
@media (max-width: 640px) {
.user-name { display: none; }
.user-chevron { display: none; }
}

/* ========================================================================== */
/* RESPONSIVE                                                                  */
/* ========================================================================== */
@media (max-width:980px){
  .row, .row.reverse{grid-template-columns:1fr}

  .print3d-hero .hero-layout {
    grid-template-columns: 1fr;
  }

  .print3d-hero .hero-copy {
    max-width: none;
  }

  .print3d-hero .hero-proof-list,
  .print3d-hero .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .print3d-hero .hero-workspace {
    display: block;
  }

  .print3d-hero .hero-seo-grid {
    grid-template-columns: 1fr;
  }
}

/* Hero Section Responsive */
@media (max-width: 768px) {
  .print3d-hero {
    padding: 20px 0;
  }

  .print3d-hero .hero-content {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 20px 16px;
    border-radius: 26px;
  }

  .print3d-hero .hero-content::after {
    inset: 12px;
    border-radius: 18px;
  }

  .print3d-hero .hero-copy {
    align-items: center;
    max-width: 100%;
    text-align: center;
  }

  .print3d-hero .hero-content h1::after,
  .print3d-hero .hero-content .title-xl::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .print3d-hero .hero-capabilities {
    justify-content: center;
    max-width: 100%;
  }

  .print3d-hero .hero-proof-list {
    grid-template-columns: 1fr;
  }

  .print3d-hero .hero-cta-row {
    justify-content: center;
  }

  .print3d-hero .hero-panel {
    padding: 18px;
  }

  .print3d-hero .hero-panel__head,
  .print3d-hero .hero-rail-list {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .print3d-hero .hero-workspace-grid,
  .print3d-hero .hero-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  .print3d-hero .hero-seo-grid {
    grid-template-columns: 1fr;
  }

  .print3d-hero .stat-item {
    min-height: 100px;
  }

  .print3d-hero .hero-mini-card,
  .print3d-hero .hero-seo-card {
    min-height: 0;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .print3d-hero .hero-content h1,
  .print3d-hero .hero-content .title-xl {
    font-size: clamp(34px, 10vw, 48px);
  }

  .print3d-hero .hero-kicker {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .print3d-hero .hero-description {
    font-size: 15px;
  }

  .print3d-hero .hero-capabilities {
    font-size: 11px;
    padding: 9px 12px;
    line-height: 1.45;
  }

  .print3d-hero .hero-proof-card,
  .print3d-hero .stat-item,
  .print3d-hero .hero-seo-card {
    padding-inline: 16px;
  }
}

/* ==========================================================================
 SECURE CREDITS SECTION
 ========================================================================== */
.secure-credits-wrap {
padding: 0;
background: transparent;
}

.secure-credits-wrap.is-open {
padding: 24px 0 40px;
background: linear-gradient(180deg, var(--bg) 0%, #0d0d0d 100%);
}

/* Toggle Button */
.secure-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 340px;
margin: 0 auto 0;
padding: 12px 20px;
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--ink);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}

.secure-toggle-btn:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.04) 100%);
border-color: rgba(255,255,255,0.2);
transform: translateY(-1px);
}

.secure-toggle-btn:active {
transform: translateY(0);
}

.secure-toggle-btn i:first-child {
font-size: 18px;
color: var(--muted);
}

.secure-toggle-btn .toggle-chevron {
font-size: 12px;
color: var(--muted);
transition: transform 0.3s ease;
}

.secure-toggle-btn.expanded .toggle-chevron {
transform: rotate(180deg);
}

/* Modal Backdrop */
.secure-modal-backdrop {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 999998;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}

.secure-modal-backdrop.visible {
opacity: 1;
visibility: visible;
}

/* Modal Card */
.secure-credits-card {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: calc(100% - 32px);
max-width: 460px;
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 28px 24px;
background: var(--surface, #1a1a1a);
border: 1px solid var(--line);
border-radius: 14px;
text-align: center;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.secure-credits-card.collapsed {
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%) scale(0.95);
pointer-events: none;
}

.secure-credits-card.expanded {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}

/* Modal close button */
.secure-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 6px;
color: var(--muted);
font-size: 18px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}

.secure-modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--ink);
}

.secure-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
border-radius: 50%;
font-size: 24px;
color: var(--ink);
}

.secure-state h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: var(--ink);
}

.secure-subtitle {
margin: 0 0 16px;
font-size: 14px;
color: var(--muted);
}

.secure-subtitle i.fa-circle-check {
color: #4ade80;
margin-right: 6px;
}

.secure-helper {
margin: 10px 0;
font-size: 13px;
color: var(--muted);
}

.secure-form {
display: flex;
flex-direction: column;
gap: 8px;
}

.secure-input-group {
display: flex;
gap: 10px;
max-width: 400px;
margin: 0 auto;
}

.secure-input-group input {
flex: 1;
min-width: 0;
padding: 12px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink);
font-size: 15px;
transition: border-color 0.2s, background 0.2s;
}

.secure-input-group input:focus {
outline: none;
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.08);
}

.secure-input-group input::placeholder {
color: var(--muted);
}

.code-input-group input {
text-align: center;
letter-spacing: 4px;
font-size: 20px;
font-weight: 600;
max-width: 180px;
}

.secure-input-group .btn {
white-space: nowrap;
padding: 12px 20px;
font-size: 13px;
}

.secure-error {
margin: 0;
font-size: 13px;
color: #ef4444;
min-height: 20px;
}

.secure-message {
margin: 0;
font-size: 13px;
color: #4ade80;
min-height: 20px;
}

.secure-actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 8px;
}

.btn.small {
padding: 8px 16px;
font-size: 12px;
}

.restore-panel {
margin-top: 12px;
padding-top: 12px;
}

.restore-divider {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}

.restore-divider::before,
.restore-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}

.restore-divider span {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}

/* Loading state for buttons */
.btn.loading {
pointer-events: none;
opacity: 0.7;
}

.btn.loading::after {
content: '';
width: 14px;
height: 14px;
margin-left: 8px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* ── Subscription Section (inside modal) ────────────────────── */
.subscription-section {
margin-top: 20px;
}

.subscription-section.hidden {
display: none;
}

.modal-divider {
height: 1px;
background: var(--line);
margin: 20px 0;
}

.subscription-inline {
text-align: center;
}

.subscription-inline.hidden {
display: none;
}

.subscription-header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
}

.subscription-header i {
font-size: 20px;
color: var(--accent, #60a5fa);
}

.subscription-header.warning i {
color: #f59e0b;
}

.subscription-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--ink);
}

.subscription-info {
margin-bottom: 12px;
}

.subscription-plan {
margin: 0 0 8px;
font-size: 14px;
color: var(--ink);
}

.subscription-plan i.fa-circle-check {
color: #4ade80;
margin-right: 6px;
}

.subscription-plan.warning {
color: #f59e0b;
}

.subscription-details {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 8px;
}

.subscription-credits {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--muted);
}

.subscription-credits i {
color: #fbbf24;
}

.subscription-status {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 4px;
background: rgba(74, 222, 128, 0.15);
color: #4ade80;
}

.subscription-status.past-due {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
}

.subscription-next {
margin: 0;
font-size: 12px;
color: var(--muted);
}

.subscription-ending {
margin: 8px 0;
font-size: 14px;
color: var(--ink);
}

.subscription-ending strong {
color: #f59e0b;
}

.subscription-helper {
margin: 0;
font-size: 12px;
color: var(--muted);
}

/* Responsive */
@media (max-width: 540px) {
.secure-credits-card {
  padding: 32px 20px;
}

.secure-input-group {
  flex-direction: column;
  max-width: none;
}

.secure-input-group .btn {
  width: 100%;
}

.code-input-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.code-input-group input {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-inline: 14px;
  font-size: 18px;
  letter-spacing: 3px;
}

.secure-input-group.code-input-group .btn {
  width: auto;
  min-width: 108px;
  padding-inline: 16px;
}

.secure-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.secure-actions .btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

.modal-content.modal-sm {
  padding: 32px 20px;
}

.modal-content.modal-sm .modal-actions {
  align-items: stretch;
}

.modal-content.modal-sm .modal-actions .btn {
  width: 100%;
  min-width: 0;
}

.ra-input-group.ra-code-input-group {
  width: 100%;
  justify-content: stretch;
}

.ra-input-group.ra-code-input-group input {
  width: 100%;
  max-width: none;
  letter-spacing: 4px;
  font-size: 20px;
}

.ra-code-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.ra-code-actions .btn {
  width: 100%;
  min-width: 0;
}
}

/* ========================================================================== */
/* SUBSCRIPTION MANAGEMENT CARD                                               */
/* ========================================================================== */

/* Uses same base styling as .secure-credits-card */
.subscription-card {
max-width: 460px;
margin: 16px auto 0;
padding: 28px 24px;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--line);
border-radius: 14px;
text-align: center;
}

.subscription-card.hidden {
display: none;
}

.subscription-card.cancelled {
/* Same base styling, content changes via text */
}

/* Warning icon for cancelled state */
.secure-icon.warning {
color: #f59e0b;
}

.secure-subtitle.warning {
color: #f59e0b;
}

.subscription-state h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: var(--ink);
}

.subscription-details {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 12px;
}

.subscription-credits {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--muted);
}

.subscription-credits i {
color: #fbbf24;
}

.subscription-status {
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
}

.subscription-status.past-due {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}

.subscription-ending {
font-size: 14px;
color: var(--muted);
margin: 0 0 8px 0;
}

.subscription-ending strong {
color: #f59e0b;
}

.subscription-state .btn {
margin-top: 16px;
}

@media (max-width: 540px) {
.subscription-card {
  padding: 24px 20px;
}

.subscription-details {
  flex-direction: column;
  gap: 8px;
}
}

/* ========================================================================== */
/* ABOUT & FAQ MODALS                                                         */
/* ========================================================================== */

/* About Modal Content */
.about-content {
line-height: 1.7;
font-size: 0.95rem;
color: #444;
}

.about-content p {
margin-bottom: 1rem;
color: #fff;
}

.about-features {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}

.about-feature {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #f8f8f8;
border-radius: 12px;
border: 1px solid #e8e8e8;
}

.about-feature i {
font-size: 20px;
color: #0b0b0b;
width: 24px;
flex-shrink: 0;
margin-top: 2px;
}

.about-feature div {
display: flex;
flex-direction: column;
gap: 4px;
}

.about-feature strong {
font-size: 0.95rem;
font-weight: 700;
color: #0b0b0b;
}

.about-feature span {
font-size: 0.88rem;
color: #5a5a5a;
line-height: 1.5;
}

.about-feature a {
color: #0ea5e9;
text-decoration: underline;
}

.about-feature a:hover {
color: #0284c7;
}

/* FAQ Modal Content */
.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
}

.faq-item {
padding: 16px 20px;
background: #f8f8f8;
border-radius: 12px;
border: 1px solid #e8e8e8;
}

.faq-item h5 {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 700;
color: #0b0b0b;
margin: 0 0 8px 0;
}

.faq-item h5 i {
font-size: 14px;
color: #5a5a5a;
}

.faq-item p {
font-size: 0.88rem;
color: #5a5a5a;
line-height: 1.6;
margin: 0;
padding-left: 24px;
}

/* Responsive */
@media (max-width: 600px) {
.about-feature {
  flex-direction: column;
  gap: 10px;
}

.about-feature i {
  font-size: 18px;
}

.faq-item p {
  padding-left: 0;
}
}

/* ==========================================================================
 Email Verification & Billing Error Modals
 ========================================================================== */

/* Blocking modal overlay (session expired) */
.modal.blocking-modal {
z-index: 10001;
}
.modal.blocking-modal .modal-content {
text-align: center;
}

/* ==========================================================================
 MODAL-SM — Unified style (matches secure-credits-card)
 ========================================================================== */

.modal-content.modal-sm {
position: relative;
width: calc(100% - 32px);
max-width: 460px;
padding: 28px 24px;
background: var(--surface, #1a1a1a);
border: 1px solid var(--line);
border-radius: 14px;
text-align: center;
}

/* ── Close button ── */
.modal-content.modal-sm .modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 6px;
color: var(--muted);
font-size: 18px;
cursor: pointer;
padding: 0;
transition: background 0.15s ease, color 0.15s ease;
}

.modal-content.modal-sm .modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--ink);
}

/* ── Typography — reuse secure-credits-card patterns ── */
.modal-content.modal-sm h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: var(--ink);
}

.modal-content.modal-sm .modal-note {
color: var(--muted);
font-size: 13px;
margin-bottom: 10px;
line-height: 1.55;
}

/* ── Buttons ── */
.modal-content.modal-sm .modal-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 16px;
}

.modal-content.modal-sm .modal-actions .btn {
width: auto;
min-width: 180px;
justify-content: center;
}

/* ── Manage Subscription Modal detail rows ── */
.manage-sub-details {
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
overflow: hidden;
margin: 16px 0;
}
.manage-sub-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
font-size: 13px;
color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.manage-sub-row:last-child { border-bottom: none; }
.manage-sub-row strong { color: var(--ink); }

/* ==========================================================================
 Restore Account Modal (logged-in 4-step flow)
 ========================================================================== */

.ra-step {
animation: raStepIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes raStepIn {
from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.ra-input-group {
margin-bottom: 0.75rem;
}

.ra-input-group input {
width: 100%;
padding: 12px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink);
font-size: 15px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}

.ra-input-group input:focus {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.08);
}

.ra-input-group input::placeholder {
color: var(--muted);
}

.ra-input-group.ra-code-input-group {
display: flex;
justify-content: center;
}

.ra-input-group.ra-code-input-group input {
width: auto;
max-width: 200px;
text-align: center;
letter-spacing: 6px;
font-size: 22px;
font-weight: 600;
border-radius: 12px;
padding: 14px 20px;
}

.ra-code-actions {
display: flex;
gap: 0.25rem;
justify-content: center;
}

.ra-code-actions .btn {
font-size: 12px;
}

/* Confirm modal must stack above all other modals */
#confirmModal {
z-index: 10000;
}

/* Restore modal logout option */
.ra-logout-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0 10px;
}

.ra-logout-divider::before,
.ra-logout-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}

.ra-logout-divider span {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}

.ra-logout-btn {
width: auto;
margin: 0 auto;
justify-content: center;
gap: 5px;
color: rgba(255,255,255,.35) !important;
border-color: transparent !important;
background: transparent !important;
font-size: 11px !important;
padding: 6px 16px !important;
letter-spacing: .04em;
transition: all 0.25s ease;
}

.ra-logout-btn:hover {
color: rgba(255,120,120,.7) !important;
border-color: transparent !important;
background: rgba(255,120,120,.06) !important;
}

.ra-logout-btn.armed {
color: rgba(255,100,100,.95) !important;
border-color: rgba(255,100,100,.35) !important;
background: rgba(255,60,60,.12) !important;
animation: armed-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes armed-pulse {
from { box-shadow: 0 0 0 0 rgba(255,80,80,0); }
to   { box-shadow: 0 0 8px 2px rgba(255,80,80,.15); }
}

.ra-logout-btn.loading {
pointer-events: none;
opacity: .5;
}

/* ==========================================================================
 Guest Chooser Modal
 ========================================================================== */

.guest-chooser-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}

.chooser-option {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 18px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
text-align: left;
color: var(--ink);
transition: border-color 0.2s ease, background 0.2s ease;
}

.chooser-option:hover {
border-color: rgba(255,255,255,0.2);
background: rgba(255,255,255,0.06);
}

.chooser-option:active {
background: rgba(255,255,255,0.08);
}

.chooser-option-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
font-size: 16px;
color: var(--ink);
}

.chooser-option-text {
flex: 1;
min-width: 0;
}

.chooser-option-text strong {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 3px;
color: var(--ink);
}

.chooser-option-text span {
display: block;
font-size: 13px;
color: var(--muted);
line-height: 1.45;
}

.chooser-arrow {
flex-shrink: 0;
font-size: 12px;
color: var(--muted);
transition: transform 0.2s ease;
}

.chooser-option:hover .chooser-arrow {
transform: translateX(3px);
}

/* ==========================================================================
 Toast Notifications
 ========================================================================== */

.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 10002;
display: flex;
flex-direction: column-reverse;
gap: 12px;
pointer-events: none;
}

.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
font-size: 0.95rem;
pointer-events: auto;
transform: translateX(120%);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.show {
transform: translateX(0);
opacity: 1;
}

.toast.dismissing {
transform: translateX(120%);
opacity: 0;
}

.toast-success {
border-color: #22c55e;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), #1a1a1a);
}

.toast-error {
border-color: #ef4444;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), #1a1a1a);
}

.toast-info {
border-color: #3b82f6;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), #1a1a1a);
}

.toast-settings {
border-color: #8b5cf6;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), #1a1a1a);
}

.toast-message {
flex: 1;
color: #f5f5f5;
}

.toast-close {
background: none;
border: none;
color: #888;
font-size: 1.2rem;
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s;
}

.toast-close:hover {
color: #fff;
}

@media (max-width: 480px) {
.toast-container {
  left: 16px;
  right: 16px;
  bottom: 16px;
}

.toast {
  width: 100%;
}
}

/* ==========================================================================
 Subscription Paused Banner
 ========================================================================== */

.subscription-paused-banner {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 12px;
padding: 16px 20px;
margin-top: 16px;
}

.subscription-paused-banner.hidden {
display: none;
}

.paused-banner-content {
display: flex;
align-items: center;
gap: 16px;
}

.paused-icon {
flex-shrink: 0;
color: #fbbf24;
}

.paused-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}

.paused-text strong {
color: #fbbf24;
font-size: 0.95rem;
}

.paused-text span {
color: var(--muted);
font-size: 0.85rem;
}

.paused-banner-content .btn-sm {
padding: 8px 16px;
font-size: 0.8rem;
flex-shrink: 0;
}

@media (max-width: 600px) {
.paused-banner-content {
  flex-wrap: wrap;
}

.paused-banner-content .btn-sm {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}
}

/* Payment failed banner (past_due) */
.payment-failed-banner {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(234, 88, 12, 0.05));
border-color: rgba(251, 146, 60, 0.3);
}
.payment-failed-banner .paused-icon {
color: #fb923c;
}
.payment-failed-banner .paused-text strong {
color: #fb923c;
}

/* Subscription status paused state */
.subscription-status.paused {
color: #fbbf24;
}

/* ==========================================================================
 Button Disabled State (email verification required hint)
 ========================================================================== */

.btn[data-requires-verified-email]:disabled {
position: relative;
}

.btn[data-requires-verified-email]:disabled::after {
content: attr(data-hint);
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: var(--muted);
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}

.btn[data-requires-verified-email]:disabled:hover::after {
opacity: 1;
}

/* ====================================================== */
/* Mobile notice popup                                     */
/* ====================================================== */

/* ========================================================================== */
/* DEMO + HOW IT WORKS                                                         */
/* ========================================================================== */
.demo-section{
padding:56px 0 48px;
background:#ffffff;
color:#0b0b0b
}
.demo-section .container{
width:calc(100vw - 56px);
max-width:calc(100vw - 56px);
padding:0;
}
.demo-how-grid{
display:grid;
grid-template-columns:minmax(0,1.32fr) minmax(320px,.78fr);
gap:clamp(28px,3.6vw,56px);
align-items:start
}
.demo-panel{
position:relative;
min-width:0
}
.demo-head,
.hiw-head{
text-align:left;
margin-bottom:24px
}
.demo-head h2,
.hiw-head h2{
font-size:clamp(26px,3vw,38px);
margin:0 0 8px;
font-weight:900;
line-height:1.05
}
.demo-head h2{color:#0b0b0b}
.demo-head p,
.hiw-head p{
margin:0;
font-size:15px;
line-height:1.6
}
.demo-head p{color:#666;max-width:56ch}
.hiw-head p{color:#666;max-width:40ch}
.demo-eyebrow{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 12px;
margin-bottom:12px;
border:1px solid rgba(14,165,233,.16);
border-radius:999px;
background:rgba(14,165,233,.06);
color:#0ea5e9;
font-size:10px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase
}
.demo-eyebrow--light{
border-color:#e2e7ec;
background:#fff;
color:#727c86
}
.demo-main{
display:grid;
grid-template-columns:minmax(300px,.5fr) minmax(420px,1fr);
gap:clamp(18px,2vw,28px);
align-items:start
}
.demo-copy-rail{
display:flex;
flex-direction:column;
gap:18px
}
.demo-prompt-area{
min-height:208px;
padding:18px 20px;
border:1px solid #dfe5eb;
border-radius:20px;
background:linear-gradient(180deg,#ffffff 0%, #fafcfe 100%);
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-start;
box-shadow:0 10px 28px rgba(15,23,42,.04)
}
.demo-prompt-label{
font-size:10px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:#0ea5e9;
margin-bottom:8px
}
.demo-prompt-text{
font-size:clamp(17px,1.25vw,20px);
line-height:1.65;
color:#1a1f24;
font-style:italic;
max-width:28ch
}
.demo-prompt-cursor{display:inline-block;width:2px;height:16px;background:#0ea5e9;margin-left:2px;animation:blink 1s step-end infinite;vertical-align:text-bottom}
@keyframes blink{50%{opacity:0}}
.demo-rail-block{
display:flex;
flex-direction:column;
gap:10px
}
.demo-rail-label{
font-size:10px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:#8a96a3
}
.demo-examples{
display:flex;
gap:10px;
justify-content:flex-start;
flex-wrap:wrap
}
.demo-chip{
padding:10px 14px;
border:1px solid #d8dde3;
border-radius:999px;
background:#fff;
color:#59636d;
font-size:12px;
font-weight:700;
cursor:pointer;
transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
box-shadow:0 4px 12px rgba(15,23,42,.04)
}
.demo-chip:hover{
color:#0b0b0b;
border-color:#0ea5e9;
background:#f7fbff;
transform:translateY(-1px);
box-shadow:0 10px 18px rgba(14,165,233,.08)
}
.demo-chip.active{
color:#0ea5e9;
border-color:#0ea5e9;
background:rgba(14,165,233,.06);
box-shadow:0 8px 16px rgba(14,165,233,.10);
text-decoration:none
}
.demo-actions{
display:flex;
justify-content:flex-start
}
.demo-actions--workflow{
justify-content:center;
margin-top:126px;
padding-left:0;
padding-right:0
}
.demo-section .btn{
border:1px solid #0b0b0b;
border-radius:999px;
background:#fff;
color:#0b0b0b;
font-size:13px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
padding:12px 18px;
box-shadow:0 10px 18px rgba(15,23,42,.04)
}
.demo-section .btn:hover{
background:#0b0b0b;
color:#fff;
box-shadow:0 14px 26px rgba(15,23,42,.12);
transform:translateY(-1px)
}
.demo-visual{
display:flex;
flex-direction:column;
gap:12px;
min-width:0
}
.demo-result-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 4px
}
.demo-result-meta__label{
color:#8a96a3;
font-size:10px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase
}
.demo-result-meta__hint{
color:#8a96a3;
font-size:12px;
font-weight:600
}
.demo-result{
position:relative;
width:100%;
height:430px;
border:1px solid #dfe5eb;
border-radius:28px;
overflow:hidden;
background:
  radial-gradient(circle at 50% 42%, rgba(125,211,252,.14), rgba(125,211,252,0) 34%),
  linear-gradient(180deg,#fbfdff 0%, #f7f4ef 100%);
box-shadow:
  inset 0 1px 0 rgba(255,255,255,.85),
  0 22px 40px rgba(15,23,42,.06)
}
.demo-result model-viewer{
position:relative;
z-index:1
}
.demo-result::before{
content:'';
position:absolute;
left:14%;
right:14%;
bottom:34px;
height:28px;
border-radius:999px;
background:radial-gradient(ellipse at center, rgba(15,23,42,.12), rgba(15,23,42,0) 70%);
filter:blur(8px);
pointer-events:none
}
.how-it-works{padding:0}
.hiw-head .grad{
background:linear-gradient(90deg,#0b0b0b 0%, #161b20 72%, #0ea5e9 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent
}
.demo-panel--workflow .muted{color:#666}
.hiw-steps{
position:relative;
display:grid;
gap:0
}
.hiw-steps::before{
content:'';
position:absolute;
left:61px;
top:24px;
bottom:24px;
width:1px;
background:linear-gradient(180deg, #edf2f7 0%, #dfe8ef 100%)
}
.hiw-step{
max-width:none;
text-align:left;
padding:18px 0;
border-radius:0;
border-top:1px solid #eef2f6;
background:none;
display:grid;
grid-template-columns:40px 48px minmax(0,1fr);
grid-template-areas:
  "number icon title"
  ". icon desc";
column-gap:14px;
row-gap:8px;
transition:border-color .22s ease
}
.hiw-step:hover{
transform:none;
border-color:#dbe7f1;
background:none
}
.hiw-step:first-child{
padding-top:0;
border-top:0
}
.hiw-step:last-child{
padding-bottom:0
}
.hiw-number{
grid-area:number;
font-size:11px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
color:#8a96a3;
opacity:1;
margin:0;
line-height:1.2;
align-self:center
}
.hiw-icon{
grid-area:icon;
margin:0;
width:44px;
height:44px;
border-radius:14px;
border:1px solid #dbe5ee;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#0ea5e9;
box-shadow:0 8px 16px rgba(14,165,233,.08);
transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease
}
.hiw-step:hover .hiw-icon{
border-color:#0ea5e9;
color:#0ea5e9;
background:#fff;
transform:translateY(-1px);
box-shadow:0 12px 20px rgba(14,165,233,.12)
}
.hiw-step h3{
grid-area:title;
font-size:17px;
font-weight:800;
line-height:1.25;
margin:0;
color:#0b0b0b;
align-self:center
}
.hiw-step p{
grid-area:desc;
color:#666;
font-size:13px;
line-height:1.65;
margin:0
}
.hiw-connector{display:none}
@media(max-width:1180px){
.demo-how-grid{
  grid-template-columns:1fr;
  gap:36px
}
.demo-panel--workflow{
  padding-top:24px;
  border-top:1px solid #eef2f6
}
.demo-actions--workflow{
  justify-content:flex-start
}
}
@media(max-width:960px){
.demo-main{
  grid-template-columns:1fr;
  gap:20px
}
.demo-result{
  height:360px
}
.demo-result.overview-result{
  height:auto;
  overflow:visible;
}
}
@media(max-width:640px){
.demo-section .container{
  width:calc(100vw - 24px);
  max-width:calc(100vw - 24px)
}
.demo-section{padding:44px 0 38px}
.demo-head h2,
.hiw-head h2{font-size:clamp(24px,7vw,32px)}
.demo-prompt-area{
  min-height:0;
  padding:16px;
  border-radius:18px
}
.demo-prompt-text{
  font-size:16px
}
.demo-chip{
  padding:8px 12px;
  font-size:12px
}
.demo-section .btn{
  padding:11px 16px;
  font-size:12px
}
.demo-result{
  height:280px;
  border-radius:22px
}
.demo-result.overview-result{
  height:auto;
  overflow:visible;
  border-radius:20px;
}
.demo-result-meta{
  flex-wrap:wrap
}
.demo-examples{
  justify-content:flex-start
}
.demo-actions--workflow{
  justify-content:flex-start;
  padding-right:0
}
.hiw-steps::before{
  left:51px;
  top:18px;
  bottom:18px
}
.hiw-step{
  grid-template-columns:32px 44px minmax(0,1fr);
  column-gap:12px
}
.hiw-step h3{
  font-size:16px
}
}

/* ========================================================================== */
/* LIVE SHOWCASE                                                               */
/* ========================================================================== */
.live-showcase{padding:56px 0 48px}
.ls-head{
display:grid;
justify-items:center;
gap:10px;
text-align:center;
margin-bottom:28px
}
.ls-head h2{font-size:clamp(24px,2.9vw,40px);margin:0}
.ls-head .muted{max-width:680px}
.ls-actions{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:6px
}
.ls-shuffle i{font-size:12px}
.ls-scroll{
display:flex;
gap:18px;
overflow-x:auto;
padding:8px 0 18px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
perspective:1200px
}
.ls-scroll::-webkit-scrollbar{display:none}
.ls-scroll.is-refreshing .ls-card{
opacity:.6;
transform:translateY(8px) scale(.985)
}
.ls-card{
flex:0 0 272px;
min-height:356px;
display:flex;
flex-direction:column;
scroll-snap-align:start;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
background:
  linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),
  var(--panel);
box-shadow:0 14px 42px rgba(0,0,0,.24);
text-decoration:none;
transition:
  transform .35s cubic-bezier(.16,1,.3,1),
  border-color .3s ease,
  box-shadow .3s ease,
  opacity .25s ease;
animation:lsCardIn .55s cubic-bezier(.16,1,.3,1) both;
animation-delay:calc(var(--ls-index, 0) * 55ms)
}
.ls-card:hover{
transform:translateY(-8px);
border-color:rgba(125,211,252,.34);
box-shadow:0 20px 52px rgba(0,0,0,.34)
}
.ls-card-media{
position:relative;
height:214px;
overflow:hidden;
background:#111
}
.ls-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .55s cubic-bezier(.16,1,.3,1),filter .4s ease
}
.ls-card:hover img{
transform:scale(1.06);
filter:saturate(1.05) contrast(1.03)
}
.ls-card-media::after{
content:"";
position:absolute;
inset:auto 0 0;
height:68%;
background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.2) 32%,rgba(8,8,10,.86) 100%);
pointer-events:none
}
.ls-card-topline{
position:absolute;
top:12px;
left:12px;
right:12px;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px
}
.ls-card-badge,
.ls-card-time{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
backdrop-filter:blur(14px)
}
.ls-card-badge{
background:rgba(10,12,16,.8);
border:1px solid rgba(255,255,255,.12);
color:#eef7ff
}
.ls-card-time{
background:rgba(10,12,16,.62);
border:1px solid rgba(255,255,255,.09);
color:rgba(245,247,251,.78)
}
.ls-card.is-model .ls-card-badge{border-color:rgba(125,211,252,.28);color:#9ddcff}
.ls-card.is-image .ls-card-badge{border-color:rgba(244,114,182,.26);color:#f7b7d8}
.ls-card.is-video .ls-card-badge{border-color:rgba(251,191,36,.28);color:#fbd27a}
.ls-card.is-animated .ls-card-badge{border-color:rgba(167,139,250,.28);color:#d6c6ff}
.ls-card-hover{
position:absolute;
left:14px;
right:14px;
bottom:14px;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:11px 13px;
border-radius:14px;
background:rgba(9,10,14,.72);
border:1px solid rgba(255,255,255,.1);
color:#f5f7fb;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
opacity:0;
transform:translateY(12px);
transition:opacity .26s ease,transform .32s cubic-bezier(.16,1,.3,1)
}
.ls-card:hover .ls-card-hover{
opacity:1;
transform:translateY(0)
}
.ls-card-info{
display:flex;
flex-direction:column;
gap:12px;
padding:14px 14px 16px;
flex:1
}
.ls-card-info strong{
display:block;
font-size:17px;
line-height:1.24;
color:#f5f7fb;
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden
}
.ls-card-excerpt{
margin:0;
color:rgba(226,232,240,.74);
font-size:13px;
line-height:1.55;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:40px
}
.ls-card-bottom{
margin-top:auto;
display:grid;
gap:12px
}
.ls-card-author,
.ls-card-stats{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap
}
.ls-card-author{
color:rgba(245,247,251,.82);
font-size:13px;
font-weight:600
}
.ls-card-avatar{
width:28px;
height:28px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,rgba(125,211,252,.24),rgba(14,165,233,.44));
color:#ecf9ff;
font-size:11px;
font-weight:800;
letter-spacing:.08em
}
.ls-card-stats{
color:rgba(226,232,240,.66);
font-size:12px;
font-weight:700
}
.ls-card-stats span{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08)
}
.ls-card-stats i{font-size:11px;color:rgba(125,211,252,.88)}
.ls-empty{
width:100%;
padding:54px 18px;
text-align:center;
color:var(--muted);
border:1px dashed rgba(255,255,255,.12);
border-radius:18px
}
.ls-skeleton{
flex:0 0 272px;
height:356px;
border-radius:18px;
background:
  linear-gradient(90deg,var(--panel) 18%,#181818 46%,var(--panel) 74%);
background-size:400% 100%;
animation:shimmer 1.5s ease infinite
}
@keyframes lsCardIn{
from{opacity:0;transform:translateY(18px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width: 1100px){
.ls-card{flex-basis:248px;min-height:340px}
.ls-card-media{height:196px}
}

@media (max-width: 720px){
.ls-actions{width:100%}
.ls-actions .btn{width:auto}
.ls-scroll{gap:14px}
.ls-card{flex-basis:230px;min-height:330px}
.ls-card-media{height:184px}
.ls-card-info strong{font-size:15px}
}