/* ============ TOKENS ============ */
  :root{
    --ink:#0F1611;
    --ink-2:#151F19;
    --ink-3:#1E2B22;
    --pine:#1B4D3E;
    --pine-2:#123328;
    --canvas:#F7F8F3;
    --canvas-2:#EEF1E7;
    --spring:#35D68C;
    --spring-soft:#7CEBB0;
    --spring-dim:#1F8F5C;
    --amber:#FFB25B;
    --amber-dim:#D98A3D;
    --teal:#4FC7C4;
    --text-on-dark:#EAF3EC;
    --text-muted-dark:#9FB3A6;
    --text-ink:#10231B;
    --text-muted:#5C6B61;
    --border-dark: rgba(234,243,238,0.12);
    --border-dark-soft: rgba(234,243,238,0.07);
    --border-light: rgba(16,35,27,0.10);
    --shadow-lg: 0 30px 70px -25px rgba(10,15,12,0.45);
    --shadow-sm: 0 10px 24px -12px rgba(10,15,12,0.30);
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:26px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --ease: cubic-bezier(.16,.84,.44,1);
    --container: 1180px;
    --nav-h: 76px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{
    font-family:var(--font-body);
    background:var(--canvas);
    color:var(--text-ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  input{ font-family:inherit; }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; color:inherit; }
  section{ position:relative; }
  .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }

  :focus-visible{ outline:2px solid var(--spring); outline-offset:3px; border-radius:4px; }

  .skip-link{
    position:absolute; left:-999px; top:0; z-index:999;
    background:var(--spring); color:var(--ink); padding:10px 16px; border-radius:8px;
  }
  .skip-link:focus{ left:12px; top:12px; }

  .eyebrow{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
    font-weight:500; display:inline-flex; align-items:center; gap:8px;
  }
  .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--spring); box-shadow:0 0 0 4px rgba(53,214,140,0.18); }

  /* ============ SVG SYMBOL DEFS ============ */
  .defs-svg{ position:absolute; width:0; height:0; overflow:hidden; }

  /* ============ REVEAL ANIMATION ============ */
  [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  [data-reveal].is-visible{ opacity:1; transform:translateY(0); }
  [data-reveal="fade"]{ transform:none; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
    [data-reveal]{ opacity:1; transform:none; }
  }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--font-body); font-weight:600; font-size:15px;
    padding:13px 24px; border-radius:999px; white-space:nowrap;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    will-change:transform;
  }
  .btn:hover{ transform:translateY(-3px); }
  .btn:active{ transform:translateY(-1px); }
  .btn-primary{ background:var(--spring); color:#0B1B12; box-shadow:0 14px 30px -10px rgba(53,214,140,0.55); }
  .btn-primary:hover{ background:var(--spring-soft); box-shadow:0 18px 40px -10px rgba(53,214,140,0.65); }
  .btn-ghost-dark{ background:transparent; color:var(--text-on-dark); border:1.5px solid var(--border-dark); }
  .btn-ghost-dark:hover{ border-color:rgba(234,243,238,0.35); background:rgba(234,243,238,0.05); }
  .btn-ink{ background:var(--ink); color:var(--text-on-dark); }
  .btn-ink:hover{ background:var(--ink-3); box-shadow:var(--shadow-sm); }
  .btn-outline-ink{ background:transparent; color:var(--text-ink); border:1.5px solid var(--border-light); }
  .btn-outline-ink:hover{ border-color:var(--pine); background:rgba(27,77,62,0.05); }
  .btn-sm{ padding:10px 18px; font-size:13.5px; }
  .btn-block{ width:100%; }
  .icon{ width:18px; height:18px; flex-shrink:0; }

  /* ============ NAVBAR ============ */
  .nav{
    position:sticky; top:0; z-index:200; height:var(--nav-h);
    display:flex; align-items:center;
    background:rgba(15,22,17,0.66);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid var(--border-dark-soft);
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .nav.is-scrolled{ background:rgba(12,18,14,0.86); border-color:var(--border-dark); }
  .nav__inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
  .brand{ display:flex; align-items:center; gap:11px; color:var(--text-on-dark); }
  .brand__mark{ width:34px; height:34px; flex-shrink:0; }
  .brand__word{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-0.01em; }
  .nav__links{ display:flex; align-items:center; gap:36px; }
  .nav__link{
    position:relative; font-size:14.5px; font-weight:500; color:var(--text-muted-dark);
    padding:6px 0; transition:color .2s var(--ease);
  }
  .nav__link::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--spring);
    transition:width .3s var(--ease);
  }
  .nav__link:hover{ color:var(--text-on-dark); }
  .nav__link:hover::after{ width:100%; }
  .nav__actions{ display:flex; align-items:center; gap:18px; }
  .nav__cta{ display:inline-flex; }

  .nav-toggle{
    display:none; flex-direction:column; gap:5px; width:34px; height:34px;
    align-items:center; justify-content:center;
  }
  .nav-toggle span{ width:20px; height:2px; background:var(--text-on-dark); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav__mobile-panel{ display:none; }

  @media (max-width: 900px){
    .nav__links{ display:none; }
    .nav__actions .nav__cta.desktop-only{ display:none; }
    .nav-toggle{ display:flex; }
    .nav.is-open .nav__mobile-panel{
      display:flex; position:absolute; top:var(--nav-h); left:0; right:0;
      background:rgba(12,18,14,0.98); backdrop-filter:blur(18px);
      flex-direction:column; padding:14px 28px 26px; gap:4px;
      border-bottom:1px solid var(--border-dark);
    }
    .nav__mobile-panel a{ padding:13px 4px; color:var(--text-on-dark); font-size:15.5px; font-weight:500; border-bottom:1px solid var(--border-dark-soft); }
    .nav__mobile-panel .btn{ margin-top:14px; }
  }

  /* ============ HERO ============ */
  .hero{
    background:radial-gradient(ellipse 90% 60% at 18% 0%, var(--pine-2) 0%, var(--ink) 55%), var(--ink);
    color:var(--text-on-dark);
    padding:96px 0 110px;
    overflow:hidden;
  }
  .hero__mark-bg{
    position:absolute; top:-60px; right:-120px; width:640px; height:640px; opacity:0.07;
    transform:rotate(8deg); pointer-events:none;
  }
  .hero__inner{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
    position:relative; z-index:2;
  }
  .hero__eyebrow{ color:var(--spring-soft); margin-bottom:22px; }
  .hero__title{
    font-size:clamp(34px, 5vw, 58px); line-height:1.06; font-weight:700;
    letter-spacing:-0.025em; margin-bottom:22px;
  }
  .hero__title em{ font-style:normal; color:var(--spring-soft); }
  .hero__sub{
    font-size:18px; color:var(--text-muted-dark); max-width:520px; margin-bottom:36px;
  }
  .hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
  .hero__proof{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .hero__proof-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-muted-dark); }
  .hero__proof-item .icon{ width:16px; height:16px; color:var(--spring); }

  /* Abstract UI mockup, pure CSS */
  .device{
    position:relative; border-radius:22px;
    background:linear-gradient(160deg, rgba(234,243,238,0.06), rgba(234,243,238,0.02));
    border:1px solid var(--border-dark);
    box-shadow:var(--shadow-lg);
    padding:0; overflow:hidden;
    transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
    animation:deviceFloat 7s ease-in-out infinite;
  }
  @keyframes deviceFloat{ 0%,100%{ transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(0); } 50%{ transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(-10px); } }
  .device__head{ display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--border-dark-soft); background:rgba(0,0,0,0.15); }
  .device__dot{ width:9px; height:9px; border-radius:50%; background:rgba(234,243,238,0.18); }
  .device__dot:nth-child(1){ background:var(--amber); }
  .device__title{ margin-left:8px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted-dark); letter-spacing:0.05em; }
  .device__body{ display:grid; grid-template-columns:64px 1fr; min-height:280px; }
  .device__side{ border-right:1px solid var(--border-dark-soft); padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .device__side-item{ width:30px; height:30px; border-radius:9px; background:rgba(234,243,238,0.06); }
  .device__side-item.active{ background:var(--spring); box-shadow:0 0 0 4px rgba(53,214,140,0.16); }
  .device__main{ padding:22px 22px 18px; position:relative; }
  .device__stat-row{ display:flex; gap:10px; margin-bottom:20px; }
  .device__chip{
    font-family:var(--font-mono); font-size:11px; color:var(--text-on-dark);
    background:rgba(234,243,238,0.07); border:1px solid var(--border-dark-soft);
    padding:7px 11px; border-radius:8px; display:flex; align-items:center; gap:6px;
  }
  .device__chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--spring); animation:pulseDot 1.8s ease-in-out infinite; }
  @keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
  .device__chart{ display:flex; align-items:flex-end; gap:9px; height:120px; }
  .device__bar{ flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--spring), var(--spring-dim)); }
  .device__bar:nth-child(2){ background:linear-gradient(180deg, var(--amber), var(--amber-dim)); }
  .device__bar:nth-child(5){ background:linear-gradient(180deg, var(--teal), #2E9A97); }
  .device__float{
    position:absolute; right:-14px; bottom:-18px; width:150px;
    background:var(--canvas); color:var(--text-ink); border-radius:14px; padding:14px;
    box-shadow:var(--shadow-lg); animation:deviceFloat 6s ease-in-out infinite reverse;
  }
  .device__float .num{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--pine); }
  .device__float .lbl{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

  /* ============ FEATURES ============ */
  .features{ background:var(--canvas); padding:100px 0 90px; }
  .features__head{ max-width:640px; margin-bottom:56px; }
  .features__head .eyebrow{ color:var(--spring-dim); margin-bottom:16px; }
  .features__head h2{ font-size:clamp(26px,3.4vw,38px); color:var(--text-ink); line-height:1.16; }
  .features__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; background:var(--border-light); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-light); }
  .feature-card{ background:var(--canvas); padding:30px 26px; }
  .feature-card__icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--pine-2); color:var(--spring-soft); margin-bottom:20px; }
  .feature-card__icon .icon{ width:19px; height:19px; }
  .feature-card h3{ font-size:16.5px; margin-bottom:9px; color:var(--text-ink); }
  .feature-card p{ font-size:14px; color:var(--text-muted); }

  @media (max-width:900px){ .features__grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .features__grid{ grid-template-columns:1fr; } }

  /* ============ SHOWCASE ============ */
  .showcase{ background:var(--ink); color:var(--text-on-dark); padding:110px 0 100px; position:relative; }
  .showcase__head{ max-width:680px; margin-bottom:52px; }
  .showcase__head .eyebrow{ color:var(--spring-soft); margin-bottom:16px; }
  .showcase__head h2{ font-size:clamp(26px,3.6vw,40px); margin-bottom:18px; }
  .showcase__head p{ color:var(--text-muted-dark); font-size:16.5px; max-width:600px; }

  .tabs{ display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
  .tab-btn{
    display:flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px;
    border:1.5px solid var(--border-dark); color:var(--text-muted-dark); font-weight:600; font-size:14.5px;
    transition:all .3s var(--ease);
  }
  .tab-btn .icon{ width:18px; height:18px; }
  .tab-btn:hover{ border-color:rgba(234,243,238,0.3); color:var(--text-on-dark); }
  .tab-btn[aria-selected="true"]{ background:var(--text-on-dark); color:var(--ink); border-color:var(--text-on-dark); }
  .tab-btn[data-accent="pixeler"][aria-selected="true"]{ background:var(--amber); color:#2B1B08; border-color:var(--amber); }
  .tab-btn[data-accent="flura"][aria-selected="true"]{ background:var(--teal); color:#092322; border-color:var(--teal); }

  .panel{ display:none; }
  .panel.is-active{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
  .panel__role{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:14px; display:inline-block; }
  .panel__role.hitum{ color:var(--spring-soft); }
  .panel__role.pixeler{ color:var(--amber); }
  .panel__role.flura{ color:var(--teal); }
  .panel h3{ font-size:30px; margin-bottom:16px; }
  .panel p{ color:var(--text-muted-dark); font-size:15.5px; margin-bottom:26px; max-width:480px; }
  .panel__tools-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted-dark); letter-spacing:0.06em; display:block; margin-bottom:12px; }
  .chip-row{ display:flex; gap:9px; flex-wrap:wrap; }
  .chip{
    font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px;
    background:rgba(234,243,238,0.06); border:1px solid var(--border-dark-soft); color:var(--text-on-dark);
    display:inline-flex; align-items:center; gap:7px;
  }
  .chip .icon{ width:12px; height:12px; }
  .chip.hitum .icon{ color:var(--spring-soft); }
  .chip.pixeler .icon{ color:var(--amber); }
  .chip.flura .icon{ color:var(--teal); }

  .panel__visual{
    border-radius:20px; border:1px solid var(--border-dark); background:linear-gradient(160deg, rgba(234,243,238,0.05), transparent);
    aspect-ratio:4/3.1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  }
  .panel__visual .glow{ position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(50px); opacity:0.35; }
  .panel[data-product="hitum"] .glow{ background:var(--spring); }
  .panel[data-product="pixeler"] .glow{ background:var(--amber); }
  .panel[data-product="flura"] .glow{ background:var(--teal); }
  .panel__visual .icon-big{ width:74px; height:74px; position:relative; z-index:1; }
  .panel[data-product="hitum"] .icon-big{ color:var(--spring-soft); }
  .panel[data-product="pixeler"] .icon-big{ color:var(--amber); }
  .panel[data-product="flura"] .icon-big{ color:var(--teal); }

  @media (max-width:820px){
    .panel.is-active{ grid-template-columns:1fr; }
    .panel__visual{ order:-1; aspect-ratio:16/9; }
  }

  /* ============ PRICING ============ */
  .pricing{ background:var(--canvas-2); padding:100px 0 100px; }
  .pricing__head{ text-align:center; max-width:600px; margin:0 auto 54px; }
  .pricing__head .eyebrow{ color:var(--spring-dim); justify-content:center; margin-bottom:16px; }
  .pricing__head h2{ font-size:clamp(26px,3.4vw,38px); }
  .pricing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
  .plan{
    background:var(--canvas); border:1.5px solid var(--border-light); border-radius:var(--radius-md);
    padding:32px 28px; display:flex; flex-direction:column;
  }
  .plan--highlight{ border-color:var(--spring-dim); box-shadow:0 24px 50px -20px rgba(31,143,92,0.35); position:relative; transform:translateY(-8px); }
  .plan__badge{ position:absolute; top:-13px; left:28px; background:var(--spring); color:#0B1B12; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:0.02em; }
  .plan__name{ font-size:18px; margin-bottom:6px; }
  .plan__price{ font-family:var(--font-display); font-size:38px; font-weight:700; margin:10px 0 4px; }
  .plan__price span{ font-size:14px; font-family:var(--font-body); font-weight:500; color:var(--text-muted); }
  .plan__desc{ font-size:14px; color:var(--text-muted); margin-bottom:24px; }
  .plan__features{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1; }
  .plan__features li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-ink); }
  .plan__features .icon{ width:15px; height:15px; color:var(--spring-dim); margin-top:2px; flex-shrink:0; }

  @media (max-width:860px){ .pricing__grid{ grid-template-columns:1fr; } .plan--highlight{ transform:none; } }

  /* ============ CTA BAND ============ */
  .cta-band{ background:var(--ink); color:var(--text-on-dark); padding:80px 0; text-align:center; position:relative; overflow:hidden; }
  .cta-band__mark{ position:absolute; left:50%; top:50%; width:900px; height:900px; transform:translate(-50%,-50%); opacity:0.05; }
  .cta-band h2{ font-size:clamp(26px,3.6vw,40px); margin-bottom:14px; position:relative; z-index:1; }
  .cta-band p{ color:var(--text-muted-dark); margin-bottom:32px; position:relative; z-index:1; }
  .cta-band .btn{ position:relative; z-index:1; }

  /* ============ FOOTER ============ */
  .site-footer{ background:var(--ink-2); color:var(--text-muted-dark); padding:70px 0 30px; }
  .footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--border-dark-soft); margin-bottom:26px; }
  .footer__brand .brand{ margin-bottom:14px; }
  .footer__brand p{ font-size:14px; max-width:240px; }
  .footer__col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-dark); margin-bottom:16px; font-weight:500; }
  .footer__col ul{ display:flex; flex-direction:column; gap:11px; }
  .footer__col a{ font-size:14px; transition:color .2s var(--ease); }
  .footer__col a:hover{ color:var(--text-on-dark); }
  .footer__bottom{ display:flex; align-items:center; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:12px; }

  @media (max-width:800px){ .footer__top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .footer__top{ grid-template-columns:1fr; } }

  /* ============ MODAL (Watch Demo) ============ */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(8,12,10,0.72); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; z-index:500; padding:24px;
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .modal-overlay.is-open{ opacity:1; visibility:visible; }
  .modal-card{
    background:var(--ink-2); border:1px solid var(--border-dark); border-radius:var(--radius-md);
    width:100%; max-width:560px; padding:28px; transform:scale(0.94) translateY(10px); transition:transform .35s var(--ease);
    box-shadow:var(--shadow-lg);
  }
  .modal-overlay.is-open .modal-card{ transform:scale(1) translateY(0); }
  .modal-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .modal-card__head h3{ color:var(--text-on-dark); font-size:17px; }
  .modal-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted-dark); transition:background .2s var(--ease), color .2s var(--ease); }
  .modal-close:hover{ background:rgba(234,243,238,0.08); color:var(--text-on-dark); }
  .modal-close .icon{ width:16px; height:16px; }
  .demo-player{
    aspect-ratio:16/9; border-radius:12px; background:linear-gradient(150deg, var(--pine-2), var(--ink)); border:1px solid var(--border-dark-soft);
    display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:14px;
  }
  .demo-player__play{
    width:60px; height:60px; border-radius:50%; background:var(--spring); color:#0B1B12;
    display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
  }
  .demo-player__play .icon{ width:22px; height:22px; margin-left:2px; }
  .demo-player:hover .demo-player__play{ transform:scale(1.08); }
  .demo-caption{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted-dark); font-family:var(--font-mono); }

  /* ============ AUTH TRANSITION OVERLAY ============ */
  #main, .site-footer{ transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease); }
  body.is-leaving #main, body.is-leaving .site-footer{ opacity:0; transform:scale(0.98) translateY(6px); filter:blur(6px); pointer-events:none; }
  body.is-leaving .nav{ opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }

  .auth-transition{
    position:fixed; inset:0; background:var(--ink); z-index:600;
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; visibility:hidden; transition:opacity .5s var(--ease) .15s, visibility .5s var(--ease) .15s;
  }
  .auth-transition.is-open{ opacity:1; visibility:visible; }
  .auth-card{ width:100%; max-width:400px; text-align:center; }
  .auth-card .brand{ justify-content:center; margin-bottom:28px; color:var(--text-on-dark); }
  .auth-card h2{ color:var(--text-on-dark); font-size:24px; margin-bottom:8px; }
  .auth-card p.sub{ color:var(--text-muted-dark); font-size:14.5px; margin-bottom:28px; }
  .auth-field{ margin-bottom:14px; text-align:left; }
  .auth-field label{ display:block; font-size:12.5px; color:var(--text-muted-dark); margin-bottom:7px; font-family:var(--font-mono); letter-spacing:0.04em; }
  .auth-field input{
    width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--border-dark);
    background:rgba(234,243,238,0.04); color:var(--text-on-dark); font-size:14.5px; transition:border-color .2s var(--ease);
  }
  .auth-field input:focus{ border-color:var(--spring); outline:none; }
  .auth-note{ font-size:12.5px; color:var(--text-muted-dark); margin-top:18px; line-height:1.5; }
  .auth-back{ display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:13.5px; color:var(--text-muted-dark); font-weight:500; }
  .auth-back:hover{ color:var(--text-on-dark); }
  .auth-back .icon{ width:14px; height:14px; }