/* ==========================================================================
   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:100;
    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; gap:18px}

  /* Brand with swap animation */
  .brand{
    display:inline-grid;
    align-items:center;
    font-weight:900;
    letter-spacing:.03em;
    cursor:pointer;
  }
  .brand .swap{
    grid-area: 1/1;
    transition: opacity .35s ease, transform .35s ease, letter-spacing .25s ease;
    will-change: opacity, transform;
  }
  .brand .swap.out{ opacity:0; transform: translateY(-6px); pointer-events: none; }

  /* "Timr" normal, the "X" in accent gradient with soft glow */
  .b-tim{ color: #eaeaea; }
  .b-x{
    margin-left:2px;
    background: linear-gradient(90deg, #fff, #bbb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 16px rgba(255,255,255,.18);
    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;
  }
  .nav-left{display:flex; align-items:center; gap:18px}
  .nav-right{display:flex; align-items:center; gap:12px}
  .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: 8px 14px;
  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;
}

.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);
}

/* 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: 8px 14px;
  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);
}

/* Hide on mobile */
@media (max-width: 940px) {
  .credits-group { display: none; }
}

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

.buy-credits-card .modal-sub {
  color: #a8a8a8;
  font-size: 14px;
  margin: 0 0 20px;
}

.credits-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 16px;
}

@media (max-width: 560px) {
  .credits-plans {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), #0c0c0c;
  color: #eaeaea;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  overflow: visible;
}

.plan-card:hover {
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

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

.plan-card.featured {
  border-color: rgba(125,211,252,.5);
  background: linear-gradient(180deg, rgba(125,211,252,.08), transparent), #0c0c0c;
  box-shadow: 0 8px 24px rgba(125,211,252,.12);
}

.plan-card.featured:hover {
  border-color: rgba(125,211,252,.7);
  box-shadow: 0 14px 36px rgba(125,211,252,.2);
}

.plan-popular {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: #7dd3fc;
  color: #0b0b0b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
}

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

.plan-credits {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.plan-price {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.plan-note {
  font-size: 11px;
  color: #888;
}

/* 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: 12px;
  color: #666;
  margin: 16px 0 0;
}

/* Selected plan card */
.plan-card.selected {
  border-color: #7dd3fc;
  background: linear-gradient(180deg, rgba(125,211,252,.12), transparent), #0c0c0c;
  box-shadow: 0 0 0 2px rgba(125,211,252,.3), 0 12px 32px rgba(125,211,252,.15);
}

/* Checkout section (hidden until plan selected) */
.checkout-section {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}

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

/* Selected plan display */
.selected-plan-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(125,211,252,.08);
  border: 1px solid rgba(125,211,252,.25);
  border-radius: 10px;
}

.selected-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.selected-plan-name {
  font-weight: 700;
  color: #fff;
  flex: 1;
}

.selected-plan-price {
  font-weight: 800;
  color: #7dd3fc;
}

/* Checkout error */
.checkout-error {
  display: none;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ff6b7a;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

/* Checkout button */
.checkout-btn {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  background: #fff;
  color: #0b0b0b;
  border-color: #fff;
  font-size: 14px;
}

.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] {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

/* ========================================================================== */
/* SUCCESS MODAL                                                               */
/* ========================================================================== */
.success-card {
  width: min(420px, 92vw);
  text-align: center;
  padding: 40px 32px 32px;
}

.success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.1));
  border: 2px solid rgba(74, 222, 128, 0.5);
  animation: successPulse 2s ease-in-out infinite;
}

.success-icon i {
  font-size: 32px;
  color: #4ade80;
  filter: drop-shadow(0 0 8px rgba(74,222,128,.5));
}

@keyframes successPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(74, 222, 128, 0);
  }
}

.success-card h4 {
  color: #4ade80;
  margin-bottom: 8px;
}

.success-credits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
  padding: 16px 24px;
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-radius: 12px;
}

.success-label {
  color: #a8a8a8;
  font-size: 14px;
}

.success-value {
  font-size: 28px;
  font-weight: 800;
  color: #7dd3fc;
  letter-spacing: 0.02em;
}

.success-unit {
  color: #a8a8a8;
  font-size: 14px;
}

.success-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.success-actions .btn {
  min-width: 140px;
}

  .menu{display:flex; gap:18px}
  .menu > li{position:relative; list-style:none}
  .menu > li > button{
    appearance:none; background:transparent; border:none; color:var(--ink);
    font-weight:800; letter-spacing:.04em; cursor:pointer; padding:10px 8px;
  }
  .menu > li:hover > button{opacity:.9}
  .drop{
    position:absolute; top:calc(100% + 10px); left:0; min-width:160px;
    border:1px solid var(--line); border-radius:12px;
    background:rgba(16,16,16,.92); backdrop-filter: blur(12px);
    box-shadow:0 24px 60px rgba(0,0,0,.6); display:none; pointer-events: auto;
    max-height: 70vh; overflow-y: auto;
  }
  .menu > li.open .drop{display:block}
  .drop a{display:block; padding:10px 12px; border-bottom:1px solid var(--line); color:#eaeaea}
  .drop a:last-child{border-bottom:none}
  .drop a:hover{background:#121212}
  
  .burger{display:none; background:transparent; border:none; color:#eaeaea; font-size:26px}
  
  @media (max-width: 940px){
    .menu{display:none}
    .burger{display:block}
    .nav-credits{display:none}
  }
  .mnav{
    position:fixed; inset:var(--navH) 0 auto 0; display:none;
    background:rgba(12,12,12,.98); border-bottom:1px solid var(--line); z-index:99
  }
  .mnav.open{display:block}
  .mnav .col{padding:16px; border-top:1px solid var(--line)}
  .mnav .col strong{display:block; margin-bottom:8px}
  .mnav a{display:block; padding:8px 0; color:#e1e1e1}
  
/* ========================================================================== */
/* HERO — *true* full screen under fixed nav, bigger headline, hero-only FX   */
/* ========================================================================== */

/* Anchor jumps won’t hide behind the fixed nav */
html { scroll-padding-top: var(--navH); }

/* Make the header span the viewport below the nav and center content */
header.container{                      /* header has class="container" in HTML */
  max-width: none;                     /* allow full-bleed hero */
  padding-left: 0; padding-right: 0; padding-top: 30px;  /* horizontal padding handled by .hero */
}

header{
  min-height: calc(100svh - var(--navH));
  display: grid;
  place-items: center;                 /* center the .hero block */
  padding-top: clamp(8px, 1.5vh, 24px);
  padding-bottom: clamp(16px, 4vh, 40px);
  position: relative;
}

/* The hero fills the width but keeps comfy side gutters */
.hero{
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%;
  max-width: none;                     /* allow giant headline */
  padding-inline: clamp(16px, 4vw, 48px);
  display: grid; gap: clamp(14px, 2.2vw, 28px); justify-items: center;
}

/* Text sizing — much larger, still safe across screens */
.hero .kicker{
  font-weight: 900; letter-spacing: .22em; color: #b8b8b8;
  text-transform: uppercase; font-size: 12px; text-align: center;
}
.hero h1{
  font-family: "Bebas Neue", Inter, system-ui;
  font-size: clamp(72px, 15vw, 200px);   /* ↑ bigger max */
  line-height: .86;
  letter-spacing: .005em;
  margin: 0;
  text-align: center;
  max-width: 92vw;                      /* prevents accidental overflow */
}
.hero p{
  max-width: min(980px, 92vw);
  text-align: center; color: #cfcfcf;
  margin: clamp(8px, 1.5vh, 14px) 0 clamp(6px, 1.2vh, 10px);
}

/* Text layers above FX */
.hero .kicker, .hero h1, .hero p, .hero .hero-slider, .hero .cta-row{
  position: relative; z-index: 1;
}

/* Options (chips) and CTAs */
.hero-slider{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top: 2px;
}
.pill{
  border:1px solid var(--line); border-radius:999px; padding:10px 14px;
  font-weight:800; letter-spacing:.06em; background:#0f0f0f; color:#eaeaea;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pill.active{border-color:#e5e5e5}
.pill:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.35)}

.cta-row{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top: clamp(10px, 1.6vh, 16px);
  margin-bottom: clamp(16px, 4vh, 44px);
}

/* ---------------- HERO FX: full-bleed behind hero, but clipped to it ---------------- */
/* .hero-fx{
  pointer-events:none; position:absolute; inset:0; z-index:0;
} */

/* ----- Four-corner placement (within hero only) ----- */
.hero-fx { perspective: 1200px; pointer-events:none; position:absolute; inset:0; z-index:0; }  /* gives subtle depth to zoom */

.corner-tl{ top: 10%; left: 9%; }
.corner-tr{ top: 10%; right: 5%; }
.corner-bl{ bottom: 0%; left: 10%; }
.corner-br{ bottom: 0%; right: 10%; }

@media (max-width: 900px){
    .corner-tl{ top: 6%; left: 4%; }
    .corner-tr{ top: 6%; right: 4%; }
    .corner-bl{ bottom: 6%; left: 4%; }
    .corner-br{ bottom: 6%; right: 4%; }
    .floater{ width: clamp(120px, 24vw, 120px); }
  }

/* ---------- ENHANCED: Dramatic zoom + chaotic movement ----------
   Customize per element via CSS vars set inline:
   --sFar (min scale), --sNear (max scale), --zFar, --zNear, --yaw, --t, --delay */
   .motion-zoomZ{
    animation:
      zoomZChaos var(--t, 12s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
      chaoticDrift calc(var(--t, 12s) * 1.5) cubic-bezier(0.4, 0, 0.6, 1) infinite,
      yawSwayEnhanced calc(var(--t, 12s) * 2) ease-in-out infinite,
      chaosRotate calc(var(--t, 12s) * 0.7) linear infinite;
    animation-delay: var(--delay, 0s), calc(var(--delay, 0s) * 1.3), calc(var(--delay, 0s) * 0.7), var(--delay, 0s);
    transform-style: preserve-3d;
  }

  /* Extreme zoom with chaotic depth changes */
  @keyframes zoomZChaos{
    0%   { transform: translateZ(var(--zFar,-360px)) scale(var(--sFar,.48)); opacity:.22; }
    15%  { transform: translateZ(-180px) scale(.75); opacity:.32; }
    35%  { transform: translateZ(var(--zNear,280px)) scale(var(--sNear,1.58)); opacity:.52; }
    50%  { transform: translateZ(320px) scale(1.72); opacity:.58; }
    65%  { transform: translateZ(var(--zNear,280px)) scale(var(--sNear,1.58)); opacity:.52; }
    85%  { transform: translateZ(-180px) scale(.75); opacity:.32; }
    100% { transform: translateZ(var(--zFar,-360px)) scale(var(--sFar,.48)); opacity:.22; }
  }

  /* Chaotic X/Y movement with unpredictable pattern */
  @keyframes chaoticDrift{
    0%   { translate: 0px 0px; }
    12%  { translate: -18px 22px; }
    28%  { translate: 25px -15px; }
    44%  { translate: -12px -28px; }
    60%  { translate: 30px 12px; }
    76%  { translate: -22px 18px; }
    88%  { translate: 15px -20px; }
    100% { translate: 0px 0px; }
  }

  /* Enhanced yaw with more dramatic rotation */
  @keyframes yawSwayEnhanced{
    0%   { rotate: 0 1 0 calc(var(--yaw,12deg) * -1.2); }
    25%  { rotate: 0 1 0 calc(var(--yaw,12deg) * 0.6); }
    50%  { rotate: 0 1 0 calc(var(--yaw,12deg) * 1.4); }
    75%  { rotate: 0 1 0 calc(var(--yaw,12deg) * -0.8); }
    100% { rotate: 0 1 0 calc(var(--yaw,12deg) * -1.2); }
  }

  /* Continuous subtle rotation for added chaos */
  @keyframes chaosRotate{
    from { rotate: 0 0 1 0deg; }
    to   { rotate: 0 0 1 360deg; }
  }

/* ---------- BOTTOM CORNERS: Enhanced chaotic movement ---------- */
   .corner-bl, .corner-br{
    animation:
      chaosBounce 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
      chaosSwirl 13s ease-in-out infinite,
      spinShadowEnhanced 8s ease-in-out infinite;
    transform-style: preserve-3d;
  }

  /* Dramatic bounce with scale changes */
  @keyframes chaosBounce{
    0%   { transform: translate(0, 0) scale(1); opacity:.38; }
    18%  { transform: translate(-25px, -30px) scale(1.32); opacity:.48; }
    36%  { transform: translate(20px, 25px) scale(.72); opacity:.28; }
    54%  { transform: translate(-15px, 30px) scale(1.18); opacity:.44; }
    72%  { transform: translate(28px, -20px) scale(.85); opacity:.32; }
    90%  { transform: translate(-10px, 15px) scale(1.12); opacity:.40; }
    100% { transform: translate(0, 0) scale(1); opacity:.38; }
  }

  /* Swirling motion with depth */
  @keyframes chaosSwirl{
    0%   { translate: 0 0 0; rotate: 1 1 0 0deg; }
    25%  { translate: 15px -20px -80px; rotate: 1 1 0 90deg; }
    50%  { translate: -20px 15px 60px; rotate: 1 1 0 180deg; }
    75%  { translate: 18px 22px -80px; rotate: 1 1 0 270deg; }
    100% { translate: 0 0 0; rotate: 1 1 0 360deg; }
  }

  /* Enhanced shadow breathing with more drama */
  @keyframes spinShadowEnhanced{
    0%   { filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
    25%  { filter: drop-shadow(8px 20px 40px rgba(0,0,0,.65)); }
    50%  { filter: drop-shadow(0 28px 52px rgba(0,0,0,.70)); }
    75%  { filter: drop-shadow(-8px 20px 40px rgba(0,0,0,.65)); }
    100% { filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
  }

/* Alternate bottom-right for variety */
.corner-br{
  animation-duration: 11s, 15s, 10s;
  animation-delay: -2s, -4s, -1s;
}
  

/* Floaters (stay inside hero) */
.floater{
  position:absolute; width:clamp(120px, 12vw, 240px);
  opacity:.32; filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  will-change:transform;
}
.floater-3d{ background:transparent!important; pointer-events:none; }
model-viewer{ --poster-color:transparent; --progress-bar-color:rgba(255,255,255,.25); }

/* Accessibility & small screens */
@media (prefers-reduced-motion: reduce){
  .hero-fx::before, .floater{ animation: none !important; }
}
@media (max-width: 820px){
  .hero h1{ font-size: clamp(52px, 18vw, 128px); line-height: .9; }
  .cta-row{ margin-bottom: clamp(12px, 4vh, 28px); }
}
  

/* ====================================================== */
/* 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%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,.65), 0 0 30px rgba(255,255,255,.35);
    animation: dividerPulse 60s linear infinite;
}
@keyframes dividerPulse{
  0%   { left: 0%;   opacity: .75; }
  50%  { left: 100%; opacity: 1;    }
  100% { left: 0%;   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 */
  .strip-title-anim .grad{
    background: linear-gradient(90deg, #fff 0%, #b8b8b8 50%, #fff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: shine 3.6s ease-in-out infinite;
  }
  @keyframes shine {
    0%,100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50%     { filter: drop-shadow(0 6px 16px rgba(255,255,255,.18)); }
  }
  
  /* tiny blinking “charge” dot */
  .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);
    box-shadow: 0 0 0 0 rgba(255,255,255,.45);
    animation: ping 1.8s ease-out infinite;
  }
  @keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); transform: scale(1); }
    70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
  }
  
  .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 { animation: none !important; box-shadow: none !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); }
  }
  
  /* small screens */
  @media (max-width:720px){
    .logos-grid{ gap:20px; }
    .logo{ padding:16px; }
    .logo img{ width:56px; }
  }
  
/* ========================================================================== */
/* FEATURES — 2-column pills with logo-style tiles (like Logos section)       */
/* ========================================================================== */
.features{
    background:#0b0b0b;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:clamp(56px,8vh,96px) 0;
  }
  .features .container{
    display:grid;
    grid-template-columns: repeat(2, 1fr);      /* 2-up */
    gap:clamp(16px,2.2vw,22px);
    align-items:start;
  }
  .features-head{
    grid-column:1/-1; text-align:center; margin-bottom:clamp(18px,3vh,28px);
  }
  .features-head h2{
    font-family:"Bebas Neue",sans-serif;
    font-size:clamp(36px,6vw,64px);
    background:linear-gradient(90deg,#fff,#dcdcdc 50%,#fff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .features-head p{ color:#cfcfcf; font-size:clamp(14px,2vw,16px); margin-top:6px }
  
  /* Card shell (baseline = DARK) */
  .feature-card{
    display:flex; align-items:center; gap:18px;
    padding:20px 22px; border:1px solid var(--line); border-radius:20px;
    background:#0f0f0f;
    box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    color:#eaeaea;    /* controls icon tint for dark card */
  }
  .feature-card.reverse{ flex-direction:row-reverse }
  
  /* Generic EVEN = LIGHT (will make 2 & 4 white by default) */
  .feature-card:nth-of-type(even){
    background:#ffffff; border-color:#e9e9e9; color:#0b0b0b;
    box-shadow:0 8px 26px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.85);
  }
  
  .feature-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 16px 50px rgba(255,255,255,.08);
  }
  .feature-card:nth-of-type(even):hover{
    border-color:#dcdcdc; box-shadow:0 16px 50px rgba(0,0,0,.08);
  }
  
  /* Text stack */
  .feature-body{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0 }
  .feature-body h3{
    margin:0; font-family:"Bebas Neue",sans-serif;
    font-size:clamp(22px,3vw,28px); line-height:1;
  }
  .feature-body p{
    margin:0; font-size:15px; line-height:1.55; opacity:.9; max-width:60ch;
  }
  .feature-card .btn{ margin-top:6px; width:max-content; padding:10px 16px; font-size:13px }
  .feature-card:nth-of-type(even) .btn{ border-color:#0b0b0b; color:#0b0b0b }
  .feature-card:nth-of-type(even) .btn:hover{ background:#0b0b0b; color:#fff }
  
  /* Logo-style icon tile */
  .feature-icon-tile{
    position:relative; flex:0 0 72px; height:72px; border-radius:16px;
    display:grid; place-items:center; overflow:hidden; isolation:isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0)), #101010;                /* dark tile */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.28);
  }
  .feature-card:nth-of-type(even) .feature-icon-tile{
    background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(255,255,255,0)), #f2f2f2;               /* light tile */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(0,0,0,.08);
  }
  
  /* Icon IMG inside tile */
  .tile-svg{
    width:38px; height:38px; display:block; opacity:.96;
    filter: invert(1) grayscale(100%) contrast(120%);     /* white on dark */
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  }
  .feature-card:nth-of-type(even) .tile-svg{
    filter: invert(0) grayscale(100%) contrast(120%);     /* black on light */
  }
  .feature-card:hover .tile-svg{ transform:scale(1.08); opacity:1 }
  
  /* ============================ SPECIFIC COLOR MAP ============================ */
  /* Target: 1 WHITE, 2 BLACK, 3 BLACK, 4 WHITE */

  /* 1) Text → 3D — force WHITE */
  .features .container .feature-card:nth-of-type(1){
    background:#ffffff; border-color:#e9e9e9; color:#0b0b0b;
    box-shadow:0 8px 26px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.85);
  }
  .features .container .feature-card:nth-of-type(1) .feature-icon-tile{
    background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(255,255,255,0)), #f2f2f2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(0,0,0,.08);
  }
  .features .container .feature-card:nth-of-type(1) .tile-svg{
    filter: invert(0) grayscale(100%) contrast(120%);
  }
  .features .container .feature-card:nth-of-type(1) .btn{
    border-color:#0b0b0b; color:#0b0b0b;
  }
  .features .container .feature-card:nth-of-type(1) .btn:hover{
    background:#0b0b0b; color:#fff;
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }

  /* 2) Image → 3D — force BLACK (override even=white) */
  .features .container .feature-card:nth-of-type(2){
    background:#0f0f0f; border-color:var(--line); color:#eaeaea;
    box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  }
  .features .container .feature-card:nth-of-type(2) .feature-icon-tile{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0)), #101010;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.28);
  }
  .features .container .feature-card:nth-of-type(2) .tile-svg{
    filter: invert(1) grayscale(100%) contrast(120%);
  }
  /* Fix contrast for the Image → 3D button (card #2 on dark background) */
.features .container .feature-card:nth-of-type(2) .btn{
    border-color: rgba(255,255,255,.88);
    color:#ffffff;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .features .container .feature-card:nth-of-type(2) .btn:hover{
    background:#ffffff;
    color:#0b0b0b;
    border-color:#ffffff;
  }
  .features .container .feature-card:nth-of-type(2) .btn:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:2px;
  }

  /* 3) Text → Image — stays BLACK (explicit to be safe) */
  .features .container .feature-card:nth-of-type(3){
    background:#0f0f0f; border-color:var(--line); color:#eaeaea;
    box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  }
  .features .container .feature-card:nth-of-type(3) .feature-icon-tile{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0)), #101010;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.28);
  }
  .features .container .feature-card:nth-of-type(3) .tile-svg{
    filter: invert(1) grayscale(100%) contrast(120%);
  }
  .features .container .feature-card:nth-of-type(3) .btn{
    border-color: rgba(255,255,255,.88);
    color:#ffffff;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .features .container .feature-card:nth-of-type(3) .btn:hover{
    background:#ffffff;
    color:#0b0b0b;
    border-color:#ffffff;
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 24px rgba(255,255,255,.3);
  }

  /* 4) 3D → Video — stays WHITE (even rule already sets) — ensure buttons */
  .features .container .feature-card:nth-of-type(4) .btn{
    border-color:#0b0b0b; color:#0b0b0b;
  }
  .features .container .feature-card:nth-of-type(4) .btn:hover{
    background:#0b0b0b; color:#fff;
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  
  /* Responsive */
  @media (max-width:960px){
    .features .container{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .feature-card{ flex-wrap:wrap }
    .feature-card.reverse{ flex-direction:column-reverse }
    .feature-icon-tile{ order:-1 } /* icon on top for small screens */
  }

  /* ========================================================================== */
/* PRICING                                                                    */
/* ========================================================================== */
.pricing-wrap{
    background:#0b0b0b;
    border-top:1px solid var(--line);
    padding:clamp(80px,10vh,130px) 0;
  }
  .pricing-head{
    text-align:center; margin-bottom:clamp(44px,6vh,70px);
  }
  .pricing-head 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;
  }
  .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;
  }
  .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 }
  
  .btn.block{ width:100%; justify-content:center; text-align:center }
  .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);
  }
  .pricing-wrap .foot-note{
    text-align:center; color:#bdbdbd; margin-top:24px;
  }
  .pricing-wrap .foot-note a{ text-decoration:underline }
  
  /* responsive */
  @media (max-width:980px){
    .pricing-grid{ grid-template-columns:1fr; }
  }
  
  /* ========================================================================== */
  /* COMMUNITY                                                                  */
  /* ========================================================================== */
  .community-wrap{
    background:#ffffff;
    color:#0b0b0b;
    border-top:1px solid #ececec;
    padding:clamp(80px,10vh,130px) 0;
  }
  .community-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:clamp(24px,3vw,40px);
    align-items:start;
  }
  .comm-cards{ display:grid; gap:14px; }
  .comm-card{
    display:grid; grid-template-columns:auto 1fr auto; gap:14px;
    align-items:center; background:#fff; color:#0b0b0b;
    border:1px solid #eaeaea; border-radius:16px; padding:14px 16px;
    transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .comm-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 50px rgba(0,0,0,.08);
    border-color:#e1e1e1;
  }
  .cc-icon{ width:42px; height:42px; display:grid; place-items:center;
    border-radius:12px; background:#f2f2f2; }
  .cc-icon svg{ width:26px; height:26px }
  .cc-body strong{ display:block; font-weight:900 }
  .cc-body p{ margin:2px 0 0; color:#4b4b4b }
  .cc-cta{ font-weight:800; color:#0b0b0b; opacity:.8 }
  
  .comm-copy h2{
    font-family:"Bebas Neue"; font-size:clamp(36px,6vw,64px); margin:0 0 8px;
  }
  .comm-copy .muted{ color:#5a5a5a }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 18px }
  .chip{ border:1px solid #e6e6e6; border-radius:999px; padding:8px 12px; font-weight:800 }
  
  .community-wrap .btn{ border-color:#0b0b0b; color:#0b0b0b }
  .community-wrap .btn:hover{ background:#0b0b0b; color:#fff }
  
  /* responsive */
  @media (max-width:980px){
    .community-grid{ grid-template-columns:1fr; }
  }

  /* ========================================================================== */
  /* HERO SECTION (from 3D Print Hub)                                          */
  /* ========================================================================== */
  .print3d-hero {
    position: relative;
    min-height: clamp(400px, 50vh, 600px);
    display: flex;
    align-items: center;
    overflow: visible;
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.95) 0%, rgba(15, 15, 15, 0.98) 100%);
    border-bottom: 1px solid var(--line);
    z-index: 1;
  }

  /* Geometric Background */
  .hero-geometric-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.35;
  }

  .geo-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(14, 165, 233, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
    animation: gridFloat 20s ease-in-out infinite;
  }

  @keyframes gridFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
  }

  .geo-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.25), transparent);
    height: 1px;
    width: 100%;
  }

  .geo-line-1 { top: 20%; animation: lineSlide 8s ease-in-out infinite; }
  .geo-line-2 { top: 50%; animation: lineSlide 10s ease-in-out infinite; animation-delay: -3s; }
  .geo-line-3 { top: 80%; animation: lineSlide 12s ease-in-out infinite; animation-delay: -6s; }

  @keyframes lineSlide {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    50% { transform: translateX(100%); opacity: 1; }
  }

  .geo-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(139, 92, 246, 0.12);
  }

  .geo-circle-1 {
    width: 400px; height: 400px;
    top: -10%; right: 10%;
    animation: circleFloat 15s ease-in-out infinite;
  }

  .geo-circle-2 {
    width: 300px; height: 300px;
    bottom: -5%; left: 5%;
    animation: circleFloat 18s ease-in-out infinite;
    animation-delay: -8s;
  }

  @keyframes circleFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(25px, -25px) rotate(180deg); }
  }

  /* Hero Content */
  .hero-content {
    position: relative;
    z-index: 2;
    padding-top: clamp(50px, 7vh, 80px);
    padding-bottom: clamp(50px, 7vh, 80px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vh, 28px);
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(139, 92, 246, 0.12));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    animation: fadeInScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
      0 4px 16px rgba(14, 165, 233, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
  }

  .hero-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(139, 92, 246, 0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .hero-badge:hover {
    border-color: rgba(14, 165, 233, 0.4);
    transform: translateY(-2px);
    box-shadow:
      0 8px 24px rgba(14, 165, 233, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .hero-badge:hover::before {
    opacity: 1;
  }

  .hero-badge svg {
    width: 18px;
    height: 18px;
    color: #0ea5e9;
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.6));
    animation: iconFloat 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
  }

  @keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
  }

  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  .hero-content h1,
  .hero-content .title-xl {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #b8b8b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.8s ease 0.2s both;
    position: relative;
  }

  .hero-content h1::after,
  .hero-content .title-xl::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
    opacity: 0;
    animation: lineGrow 0.8s ease 0.6s forwards;
  }

  @keyframes lineGrow {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 100px;
      opacity: 0.6;
    }
  }

  .hero-description {
    max-width: 720px;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.7;
    color: #c8c8c8;
    margin: 0;
    animation: fadeInUp 0.8s ease 0.4s both;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .hero-stats {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 40px);
    margin-top: clamp(8px, 2vh, 16px);
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeInUp 0.8s ease 0.3s both;
  }

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

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.3s ease;
    cursor: default;
  }

  .stat-item:hover {
    transform: translateY(-4px);
  }

  .stat-value {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 800;
    color: #0ea5e9;
    letter-spacing: -0.01em;
    text-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
    transition: all 0.3s ease;
  }

  .stat-item:hover .stat-value {
    text-shadow: 0 0 30px rgba(14, 165, 233, 0.6);
    transform: scale(1.1);
  }

  .stat-label {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    transition: color 0.3s ease;
  }

  .stat-item:hover .stat-label {
    color: #0ea5e9;
  }

  .stat-divider {
    width: 1px;
    height: 32px;
    background: var(--line);
    position: relative;
  }

  .stat-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #0ea5e9, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .hero-stats:hover .stat-divider::before {
    opacity: 0.5;
  }

  /* ========================================================================== */
  /* FOOTER                                                                      */
  /* ========================================================================== */
  .site-footer {
    margin-top: clamp(60px, 10vh, 100px);
    padding: 24px 0;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.3);
  }

  .footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
  }

  .footer-brand,
  .footer-meta,
  .footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .footer-logo {
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .footer-text {
    color: var(--muted);
  }

  .footer-divider {
    color: rgba(255, 255, 255, 0.2);
  }

  .footer-meta {
    color: var(--muted);
  }

  .footer-meta strong {
    color: #0ea5e9;
    font-weight: 800;
  }

  .footer-links {
    gap: 14px;
  }

  .footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .footer-links a:hover {
    color: #fff;
  }

/* ========================================================================== */
/* 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(480px, 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}
  }

  /* Hero Section Responsive */
  @media (max-width: 768px) {
    .hero-stats {
      flex-direction: column;
      gap: 16px;
    }

    .stat-divider {
      width: 40px;
      height: 1px;
    }

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

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