/* =============================================================================
   MODAL — Theme
   Phosphor terminal in a darkened server room: near-black canvas, phosphor-pale
   green type, one rationed lime accent that behaves like an LED status light.

   This file provides:
     1. Font faces / imports
     2. Design tokens (:root custom properties)
     3. Base reset + element defaults (the "base theme")
     4. Typography scale utilities

   Fonts:
     - Goga (display/headings)  -> substitute: Space Grotesk  (var: --font-goga)
     - Inter Variable (UI/body) -> Inter                      (var: --font-inter-variable)
     - Fira Mono (code windows)                               (var: --font-mono)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. FONTS
   Goga is proprietary and not shipped with the repo; Space Grotesk is the
   documented substitute (geometric, tight apertures, squared terminals).
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&family=Fira+Mono:wght@400;500;700&display=swap');

/* -----------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* --- Colors --- */
  --color-void-black: #000000;
  --color-ground-iron: #181818;
  --color-carbon-veil: #212525;
  --color-circuit-border: #485346;
  --color-phosphor-blue-black: #1f2a33;
  --color-charcoal-rust: #231c1c;
  --color-lime-pulse: #7fee64;
  --color-phosphor-white: #ddffdc;
  --color-mint-frost: #def0dd;
  --color-sage-60: #8cab87;
  --color-sage-40: #677d64;
  --color-moss-70: #9cbf93;
  --color-moss-80: #aed2a4;
  --color-fern-link: #859984;
  --color-deep-fern: #697368;
  --color-pine-15: #3e4a3c;

  /* --- Semantic color roles --- */
  --bg: var(--color-void-black);
  --surface-1: var(--color-ground-iron);
  --surface-2: var(--color-carbon-veil);
  --border: var(--color-circuit-border);
  --border-subtle: var(--color-phosphor-blue-black);
  --accent: var(--color-lime-pulse);
  --text-primary: var(--color-phosphor-white);   /* headings, icons, button text */
  --text-body: var(--color-sage-60);             /* default paragraph copy */
  --text-muted: var(--color-sage-40);            /* helper / secondary */
  --text-lead: var(--color-moss-80);             /* lead paragraph / hero subhead */
  --text-eyebrow: var(--color-moss-70);          /* uppercase eyebrow labels */
  --text-link: var(--color-fern-link);           /* inline links */
  --text-micro: var(--color-deep-fern);          /* footer / micro-copy */

  /* --- Typography: families --- */
  --font-goga: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-variable: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Typography: scale --- */
  --text-caption: 12px;      --leading-caption: 1.33;      --tracking-caption: 0.6px;
  --text-body-sm: 14px;      --leading-body-sm: 1.43;      --tracking-body-sm: -0.364px;
  --text-body-md: 16px;      --leading-body-md: 1.5;       --tracking-body-md: -0.352px;
  --text-subheading: 20px;   --leading-subheading: 1.5;    --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;   --leading-heading-sm: 1.3;    --tracking-heading-sm: -0.312px;
  --text-heading: 30px;      --leading-heading: 1.2;       --tracking-heading: -0.36px;
  --text-heading-lg: 42px;   --leading-heading-lg: 1.05;   --tracking-heading-lg: -0.336px;
  --text-display: 64px;      --leading-display: 1;         --tracking-display: -0.448px;

  /* --- Typography: weights --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* --- Spacing (4px base) --- */
  --spacing-unit: 4px;
  --spacing-4: 4px;    --spacing-8: 8px;    --spacing-12: 12px;  --spacing-16: 16px;
  --spacing-20: 20px;  --spacing-24: 24px;  --spacing-28: 28px;  --spacing-32: 32px;
  --spacing-36: 36px;  --spacing-40: 40px;  --spacing-48: 48px;  --spacing-56: 56px;
  --spacing-64: 64px;  --spacing-96: 96px;  --spacing-128: 128px; --spacing-160: 160px;

  /* --- Layout --- */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 32px;
  --element-gap: 20px;

  /* --- Border radius --- */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 25px;
  --radius-cards: 8px;
  --radius-icons: 0px;
  --radius-pills: 9999px;
  --radius-inputs: 8px;
  --radius-buttons: 12px;

  /* --- Shadows (used only on the nav bar) --- */
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;

  /* --- Surfaces --- */
  --surface-void: #000000;
  --surface-ground: #181818;
  --surface-carbon: #212525;
  --surface-mint-frost: #def0dd;
  --surface-lime-pulse: #7fee64;

  /* --- Motion --- */
  --transition-base: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* reserved for 3D/brand visuals */
}

/* -----------------------------------------------------------------------------
   3. BASE THEME
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text-body);
  font-family: var(--font-inter-variable);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
  letter-spacing: var(--tracking-body-md);
  font-weight: var(--font-weight-regular);
  font-feature-settings: 'cv11' 1;   /* Inter character variant — part of brand identity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — Goga (Space Grotesk) is mandatory for H1–H4 and card titles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-goga);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  font-feature-settings: 'ss01' 1;   /* Goga stylistic set — brand identity */
  line-height: var(--leading-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
h3 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
h4 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-regular);
}
h5 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-regular);
}
h6 {
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
  letter-spacing: var(--tracking-body-md);
}

/* Body copy — muted sage on the void; never phosphor-white or lime */
p {
  color: var(--text-body);
  text-wrap: pretty;
}
p + p {
  margin-top: var(--spacing-16);
}

/* Links — fern, with a unified color/decoration transition */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-base) var(--ease-out),
              text-decoration-color var(--transition-base) var(--ease-out);
}
a:hover {
  color: var(--text-primary);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Emphasis */
strong, b { color: var(--text-primary); font-weight: var(--font-weight-medium); }
small { font-size: var(--text-body-sm); }

/* Lists */
ul, ol { list-style-position: inside; color: var(--text-body); }

/* Media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inline + block code — monospace phosphor */
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}
code {
  color: var(--color-phosphor-white);
}
pre {
  overflow-x: auto;
  line-height: 1.5;
}

/* Horizontal rule / dividers */
hr {
  border: 0;
  height: 1px;
  background-color: var(--border-subtle);
  width: 100%;
}

/* Forms inherit type */
input, button, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Selection uses the rationed lime as a status highlight */
::selection {
  background-color: var(--accent);
  color: var(--color-void-black);
}

/* Scrollbar — dark with a green-tinted thumb */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: var(--radius-pills);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-sage-40); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHY SCALE UTILITIES
   Reusable classes that map 1:1 to the design's type tokens.
   -------------------------------------------------------------------------- */
.text-display   { font-family: var(--font-goga); font-size: var(--text-display);    line-height: var(--leading-display);    letter-spacing: var(--tracking-display);    font-feature-settings: 'ss01' 1; }
.text-heading-lg{ font-family: var(--font-goga); font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); font-feature-settings: 'ss01' 1; }
.text-heading   { font-family: var(--font-goga); font-size: var(--text-heading);    line-height: var(--leading-heading);    letter-spacing: var(--tracking-heading);    font-feature-settings: 'ss01' 1; }
.text-heading-sm{ font-family: var(--font-goga); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-feature-settings: 'ss01' 1; }
.text-subheading{ font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }
.text-body      { font-size: var(--text-body-md);    line-height: var(--leading-body-md);    letter-spacing: var(--tracking-body-md); }
.text-body-sm   { font-size: var(--text-body-sm);    line-height: var(--leading-body-sm);    letter-spacing: var(--tracking-body-sm); }
.text-caption   { font-size: var(--text-caption);    line-height: var(--leading-caption);    letter-spacing: var(--tracking-caption); }

/* Eyebrow label — uppercase, widely tracked, muted green (counter-rhythm) */
.eyebrow {
  font-family: var(--font-inter-variable);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

/* Color helpers keyed to semantic roles */
.text-primary { color: var(--text-primary); }
.text-lead    { color: var(--text-lead); }
.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent); }   /* fills only — do not use on body copy */

/* Accent phrase — the "status LED" first words of a hero headline */
.accent-phrase { color: var(--accent); }

/* Layout container */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}
/* ---- HEADER STYLES ---- */
/* ---- Preloader (Modern Tech Motion Graphics) ----------------------------- */
#preloader{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;transition:opacity .8s ease,visibility .8s;overflow:hidden}
#preloader::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center, rgba(127,238,100,.04) 0%, transparent 70%);pointer-events:none}
.loader-core{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:50px;perspective:1000px}
  .orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(127,238,100,.15);transform-style:preserve-3d}
  .orbit-1{border-top-color:var(--color-lime-pulse);border-right-color:transparent;animation:orbit-spin-1 2s linear infinite}
  .orbit-2{inset:20px;border-bottom-color:var(--color-lime-pulse);border-left-color:transparent;animation:orbit-spin-2 3s linear infinite reverse}
  .orbit-3{inset:40px;border-top-color:var(--color-lime-pulse);border-bottom-color:var(--color-lime-pulse);border-left-color:transparent;border-right-color:transparent;opacity:.5;animation:orbit-spin-3 1.5s ease-in-out infinite alternate}
  @keyframes orbit-spin-1{100%{transform:rotate3d(1,1,0,360deg)}}
  @keyframes orbit-spin-2{100%{transform:rotate3d(0,1,1,360deg)}}
  @keyframes orbit-spin-3{100%{transform:rotate3d(1,0,1,360deg)}}
  .loader-logo-wrap{position:relative;z-index:10;background:#000;border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(127,238,100,.1)}
  .pulse-logo{height:30px;width:auto;animation:logo-pulse 1.5s ease-in-out infinite alternate}
  @keyframes logo-pulse{
    0%{transform:scale(.95);filter:drop-shadow(0 0 5px rgba(127,238,100,.2))}
    100%{transform:scale(1.05);filter:drop-shadow(0 0 18px rgba(127,238,100,.8))}
  }
  .loader-text-wrapper{display:flex;flex-direction:column;align-items:center;gap:18px;width:220px}
  .glitch-text{font-family:var(--font-mono);color:var(--color-phosphor-white);font-size:13px;letter-spacing:3px;text-transform:uppercase;position:relative}
  .glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}
  .glitch-text::before{left:2px;text-shadow:-1px 0 rgba(127,238,100,.5);animation:glitch-anim-1 2.5s infinite linear alternate-reverse}
  .glitch-text::after{left:-2px;text-shadow:-1px 0 rgba(0,200,255,.5);animation:glitch-anim-2 3s infinite linear alternate-reverse}
  @keyframes glitch-anim-1{
    0%{clip-path:inset(20% 0 80% 0)}20%{clip-path:inset(60% 0 10% 0)}
    40%{clip-path:inset(40% 0 50% 0)}60%{clip-path:inset(80% 0 5% 0)}
    80%{clip-path:inset(10% 0 70% 0)}100%{clip-path:inset(30% 0 20% 0)}
  }
  @keyframes glitch-anim-2{
    0%{clip-path:inset(10% 0 60% 0)}20%{clip-path:inset(30% 0 20% 0)}
    40%{clip-path:inset(70% 0 10% 0)}60%{clip-path:inset(20% 0 50% 0)}
    80%{clip-path:inset(50% 0 30% 0)}100%{clip-path:inset(5% 0 80% 0)}
  }
  .loader-progress{width:100%;height:1px;background:var(--color-circuit-border);position:relative;overflow:hidden}
  .progress-fill{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-lime-pulse);transform:translateX(-100%);animation:load-fill 2s cubic-bezier(.8,0,.2,1) infinite}
  @keyframes load-fill{
    0%{transform:translateX(-100%)}
    50%{transform:translateX(0%)}
    100%{transform:translateX(100%)}
  }
  .status-codes{display:flex;justify-content:space-between;width:100%;font-family:var(--font-mono);font-size:10px;color:var(--color-sage-60);opacity:.5}
  .status-codes span{animation:code-flicker 1.5s infinite step-end}
  .status-codes span:nth-child(2){animation-delay:.5s}
  .status-codes span:nth-child(3){animation-delay:1s}
  @keyframes code-flicker{0%,100%{opacity:1}50%{opacity:.3}}

  /* ---- Back to top ------------------------------------------------ */
  #backto-top{position:fixed;right:24px;bottom:24px;z-index:900;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pills);background:var(--color-carbon-veil);border:1px solid var(--color-circuit-border);color:var(--color-phosphor-white);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease-out),visibility .3s var(--ease-out),transform .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
  #backto-top.show{opacity:1;visibility:visible;transform:translateY(0)}
  #backto-top:hover{background:var(--color-ground-iron);border-color:var(--color-lime-pulse);color:var(--color-lime-pulse)}
  #backto-top svg{width:18px;height:18px}

  /* ---- Desktop header pill --------------------------------------- */
  .vh{position:sticky;top:0;z-index:800;padding:16px 24px 0}
  .vh-inner{display:flex;align-items:center;gap:24px;max-width:var(--page-max-width);height:64px;margin:0 auto;padding:8px 8px 8px 20px;background:rgba(24,24,24,.72);border:1px solid var(--color-phosphor-blue-black);border-radius:var(--radius-3xl);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
  .vh.scrolled .vh-inner{background:rgba(18,18,18,.9);border-color:var(--color-circuit-border);box-shadow:var(--shadow-md)}

  /* Logo */
  .vh-logo{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
  .vh-logo img{height: 44px;width:180px;object-fit:contain;display:block;margin-left:4px;transform:scale(1.2)}

  /* Center nav */
  .vh-nav{display:flex;align-items:center;gap:2px;margin:0 auto}
  .vh-link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-pills);font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-medium);letter-spacing:-.28px;color:var(--color-sage-60);white-space:nowrap;cursor:pointer;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vh-link:hover{color:var(--color-phosphor-white);background:rgba(72,83,70,.16)}
  .vh-link.active{color:var(--color-phosphor-white)}
  .vh-link svg{width:12px;height:12px;opacity:.7;transition:transform .3s var(--ease-out)}
  .vh-dropdown:hover>.vh-link svg{transform:rotate(180deg)}

  /* Right-side tools */
  .vh-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .vh-tool-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius-pills);font-family:var(--font-inter-variable);font-size:13px;font-weight:var(--font-weight-medium);letter-spacing:-.26px;color:var(--color-fern-link);cursor:pointer;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vh-tool-link:hover{color:var(--color-phosphor-white);background:rgba(72,83,70,.16)}
  .vh-tool-link svg{width:11px;height:11px;opacity:.6;transition:transform .3s var(--ease-out)}
  .vh-dropdown:hover>.vh-tool-link svg{transform:rotate(180deg)}
  .vh-credits{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-pills);border:1px solid var(--color-circuit-border);font-family:var(--font-inter-variable);font-size:13px;font-weight:var(--font-weight-medium);color:var(--color-moss-80)}
  .vh-credits b{color:var(--color-lime-pulse);font-weight:var(--font-weight-medium)}

  /* Icon button (cart / account) */
  .vh-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pills);color:var(--color-phosphor-white);cursor:pointer;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vh-icon-btn:hover{background:rgba(72,83,70,.16)}
  .vh-icon-btn svg{width:20px;height:20px}
  .vh-badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pills);background:var(--color-lime-pulse);color:var(--color-void-black);font-family:var(--font-inter-variable);font-size:10px;font-weight:600;line-height:1;border:2px solid var(--color-ground-iron)}

  /* Auth actions — the reference look */
  .vh-login{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--radius-pills);font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-medium);letter-spacing:-.28px;color:var(--color-phosphor-white);cursor:pointer;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vh-login:hover{color:var(--color-phosphor-white);background:rgba(72,83,70,.16)}
  .vh-signup{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:var(--radius-pills);font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-medium);letter-spacing:-.28px;color:var(--color-lime-pulse);cursor:pointer;transition:color .3s var(--ease-out)}
  .vh-signup:hover{color:var(--color-phosphor-white)}
  .vh-signup-arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-pills);background:var(--color-lime-pulse);color:var(--color-void-black);transition:transform .3s var(--ease-spring)}
  .vh-signup:hover .vh-signup-arrow{transform:translate(2px,-2px)}
  .vh-signup-arrow svg{width:15px;height:15px}

  /* ---- Dropdown panels (redesigned) ------------------------------ */
  .vh-dropdown{position:relative}
  .vh-dropdown-menu{position:absolute;top:calc(100% + 14px);left:0;z-index:50;min-width:224px;padding:8px;background:rgba(33,37,37,.96);border:1px solid var(--color-circuit-border);border-radius:var(--radius-xl);box-shadow:0 24px 48px -16px rgba(0,0,0,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility .25s var(--ease-out)}
  .vh-dropdown--right .vh-dropdown-menu{left:auto;right:0}
  .vh-dropdown:hover>.vh-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  /* invisible hover bridge so the menu doesn't close in the 14px gap */
  .vh-dropdown-menu::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:16px}
  .vh-dropdown-item{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-lg);font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-regular);letter-spacing:-.28px;color:var(--color-sage-60);white-space:nowrap;transition:color .25s var(--ease-out),background-color .25s var(--ease-out),padding-left .25s var(--ease-out)}
  .vh-dropdown-item::before{content:'';position:absolute;left:6px;top:50%;width:3px;height:16px;border-radius:var(--radius-pills);background:var(--color-lime-pulse);transform:translateY(-50%) scaleY(0);transition:transform .25s var(--ease-out)}
  .vh-dropdown-item:hover{color:var(--color-phosphor-white);background:rgba(127,238,100,.08);padding-left:18px}
  .vh-dropdown-item:hover::before{transform:translateY(-50%) scaleY(1)}

  /* Mega menu (game categories) */
  .vh-mega-menu{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:2px;min-width:460px}

  /* Flags */
  .flag{display:inline-block;width:18px;height:13px;border-radius:2px;background:var(--color-pine-15);flex:0 0 auto}
  .flag-gb{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E") center/cover}
  .flag-jp{background:radial-gradient(circle at 50% 50%,#d0454f 0 30%,#e8eef0 31% 100%)}

  /* ---- Mobile header --------------------------------------------- */
  .vh-mobile{display:none;position:sticky;top:0;z-index:800;padding:12px 16px 0}
  .vh-mobile-inner{display:flex;align-items:center;justify-content:space-between;height:58px;padding:8px 12px 8px 16px;background:rgba(24,24,24,.82);border:1px solid var(--color-phosphor-blue-black);border-radius:var(--radius-3xl);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .vh-mobile-logo img{height:46px;width:150px;object-fit:contain;display:block;margin-left:4px;transform:scale(1.2)}
  .vh-burger{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-pills);border:1px solid var(--color-circuit-border);cursor:pointer;transition:background-color .3s var(--ease-out)}
  .vh-burger:hover{background:rgba(72,83,70,.16)}
  .vh-burger-bar{position:relative}
  .vh-burger-bar,.vh-burger-bar::before,.vh-burger-bar::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--color-phosphor-white);transition:transform .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vh-burger-bar::before,.vh-burger-bar::after{content:'';position:absolute;left:0}
  .vh-burger-bar::before{top:-6px}
  .vh-burger-bar::after{top:6px}
  .vh-burger.active .vh-burger-bar{background:transparent}
  .vh-burger.active .vh-burger-bar::before{transform:translateY(6px) rotate(45deg)}
  .vh-burger.active .vh-burger-bar::after{transform:translateY(-6px) rotate(-45deg)}

  .vh-mobile-nav{position:fixed;inset:82px 16px auto;z-index:790;max-height:calc(100vh - 100px);overflow-y:auto;padding:8px 20px 20px;background:var(--color-carbon-veil);border:1px solid var(--color-circuit-border);border-radius:var(--radius-3xl);box-shadow:0 24px 48px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility .3s var(--ease-out)}
  .vh-mobile-nav.active{opacity:1;visibility:visible;transform:translateY(0)}
  .vh-mob-section{padding:14px 0;border-bottom:1px solid var(--color-phosphor-blue-black)}
  .vh-mob-section:last-child{border-bottom:0}
  .vh-mob-label{display:block;margin-bottom:10px;font-family:var(--font-inter-variable);font-size:12px;font-weight:var(--font-weight-medium);letter-spacing:.6px;text-transform:uppercase;color:var(--color-moss-70)}
  .vh-mob-links{display:flex;flex-direction:column;gap:2px}
  .vh-mob-links a{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:var(--radius-lg);font-family:var(--font-inter-variable);font-size:15px;font-weight:var(--font-weight-medium);color:var(--color-sage-60);transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vh-mob-links a:hover,.vh-mob-links a:active{color:var(--color-phosphor-white);background:rgba(127,238,100,.1)}
  .vh-mob-links--sm a{font-size:14px;font-weight:var(--font-weight-regular)}
  .vh-mob-actions{display:flex;gap:8px;padding-top:4px}
  .vh-mob-btn{position:relative;display:inline-flex;align-items:center;gap:8px;flex:1;justify-content:center;padding:12px;border-radius:var(--radius-buttons);border:1px solid var(--color-circuit-border);font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-medium);color:var(--color-phosphor-white);transition:background-color .3s var(--ease-out)}
  .vh-mob-btn:hover{background:rgba(72,83,70,.16)}
  .vh-mob-btn svg{width:18px;height:18px}
  .vh-mob-btn .vh-badge{position:static;border:0;margin-left:2px}

  /* Mobile accordion dropdowns */
  .vh-mob-acc-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 0;background:none;border:0;cursor:pointer;font-family:var(--font-inter-variable);font-size:12px;font-weight:var(--font-weight-medium);letter-spacing:.6px;text-transform:uppercase;color:var(--color-moss-70)}
  .vh-mob-acc-head svg{width:16px;height:16px;color:var(--color-sage-40);transition:transform .3s var(--ease-out)}
  .vh-mob-accordion.open .vh-mob-acc-head svg{transform:rotate(180deg)}
  .vh-mob-acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}
  .vh-mob-acc-body .vh-mob-links{padding-top:10px}

  /* ---- Side cart -------------------------------------------------- */
  .sideCart-wrapper{position:fixed;inset:0;z-index:1000;display:flex;justify-content:flex-end;background:rgba(0,0,0,0);visibility:hidden;transition:background-color .4s var(--ease-out),visibility .4s var(--ease-out)}
  .sideCart-wrapper.show{background:rgba(0,0,0,.6);visibility:visible;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .sideCart-panel{position:relative;display:flex;flex-direction:column;width:400px;max-width:90vw;height:100%;padding:28px;background:var(--color-ground-iron);border-left:1px solid var(--color-circuit-border);transform:translateX(105%);transition:transform .4s var(--ease-out)}
  .sideCart-wrapper.show .sideCart-panel{transform:translateX(0)}
  .sideCart-close{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pills);background:transparent;border:1px solid var(--color-circuit-border);color:var(--color-phosphor-white);cursor:pointer;transition:background-color .3s var(--ease-out)}
  .sideCart-close:hover{background:rgba(72,83,70,.16)}
  .sideCart-close svg{width:16px;height:16px}
  .sideCart-title{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--color-phosphor-white)}
  .sideCart-title svg{width:20px;height:20px}
  .sideCart-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;margin:-6px -6px 6px;padding:6px}
  .sideCart-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--radius-lg);background:var(--color-carbon-veil);border:1px solid var(--color-phosphor-blue-black)}
  .sideCart-item>a img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-md)}
  .sideCart-item>div{flex:1;min-width:0}
  .sideCart-item-title{display:block;font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-medium);color:var(--color-phosphor-white)}
  .sideCart-meta{margin-top:6px;font-size:13px;color:var(--color-sage-60)}
  .sideCart-meta b{color:var(--color-lime-pulse);font-weight:var(--font-weight-medium)}
  .sideCart-remove{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-md);color:var(--color-sage-40);flex:0 0 auto;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .sideCart-remove:hover{color:#ff6a6a;background:rgba(255,80,80,.1)}
  .sideCart-remove svg{width:15px;height:15px}
  .sideCart-footer{padding-top:18px;border-top:1px solid var(--color-phosphor-blue-black)}
  .sideCart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-family:var(--font-inter-variable);font-size:14px;color:var(--color-sage-60)}
  .sideCart-total span{font-size:18px;font-weight:var(--font-weight-medium);color:var(--color-phosphor-white)}
  .sideCart-buttons{display:flex;flex-direction:column;gap:10px}
  .sideCart-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px;border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:15px;font-weight:var(--font-weight-medium);letter-spacing:-.3px;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out)}
  .sideCart-btn-primary{background:var(--color-lime-pulse);color:var(--color-void-black)}
  .sideCart-btn-primary:hover{color:var(--color-void-black);background:#93f47a}
  .sideCart-btn-secondary{background:transparent;border:1px solid var(--color-circuit-border);color:var(--color-phosphor-white)}
  .sideCart-btn-secondary:hover{background:rgba(72,83,70,.16);color:var(--color-phosphor-white)}
  .sideCart-empty{margin:auto;text-align:center;color:var(--color-sage-40)}
  .sideCart-empty svg{width:48px;height:48px;opacity:.5;margin:0 auto 18px}
  .sideCart-empty p{font-family:var(--font-goga);font-size:var(--text-subheading);color:var(--color-phosphor-white);margin-bottom:6px}
  .sideCart-empty span{font-size:14px}

  /* ---- Responsive switch ----------------------------------------- */
  @media (max-width:991px){
    .vh{display:none}
    .vh-mobile{display:block}
    .sideCart-panel{width:360px}
  }

/* ---- FOOTER STYLES ---- */
/* ---- Shell + ambient bloom ------------------------------------- */
  .vf{position:relative;background:var(--color-void-black);border-top:1px solid var(--color-phosphor-blue-black);overflow:hidden}
  .vf::before{content:'';position:absolute;top:-10%;right:-5%;width:520px;height:520px;background:radial-gradient(circle,rgba(127,238,100,.08),transparent 68%);pointer-events:none;z-index:0}
  .vf-inner{position:relative;z-index:1;max-width:var(--page-max-width);margin:0 auto;padding-inline:24px}

  /* ---- Band A: intro + terminal newsletter ----------------------- */
  .vf-top{padding:72px 0;border-bottom:1px solid var(--color-phosphor-blue-black)}
  .vf-top .vf-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}

  .vf-logo{display:inline-block;margin-bottom:22px}
  .vf-logo img{height:70px;width:220px;object-fit:contain;display:block;transform-origin:left center;transition:transform .45s var(--ease-spring),filter .45s var(--ease-out)}
  .vf-logo:hover img{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(127,238,100,.45))}
  .vf-headline{font-family:var(--font-goga);font-size:var(--text-heading-lg);line-height:var(--leading-heading-lg);letter-spacing:var(--tracking-heading-lg);color:var(--color-phosphor-white);margin-bottom:16px;max-width:12ch}
  .vf-headline .accent-phrase{color:var(--color-lime-pulse)}
  .vf-blurb{font-size:15px;line-height:1.6;color:var(--color-sage-40);max-width:42ch;margin-bottom:24px}
  .vf-status{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid var(--color-circuit-border);border-radius:var(--radius-pills);font-family:var(--font-mono);font-size:12px;letter-spacing:.4px;color:var(--color-moss-80)}
  .vf-status__dot{width:8px;height:8px;border-radius:var(--radius-pills);background:var(--color-lime-pulse);box-shadow:0 0 8px rgba(127,238,100,.8);animation:vf-pulse 2s ease-in-out infinite}
  @keyframes vf-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}

  /* Terminal card */
  .vf-term{background:var(--color-ground-iron);border:1px solid var(--color-circuit-border);border-radius:var(--radius-xl);overflow:hidden;transition:border-color .3s var(--ease-out),transform .4s var(--ease-out)}
  .vf-term:hover{border-color:var(--color-sage-40);transform:translateY(-3px)}
  .vf-term__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:var(--color-carbon-veil);border-bottom:1px solid var(--color-phosphor-blue-black)}
  .vf-term__dot{width:11px;height:11px;border-radius:var(--radius-pills)}
  .vf-term__dot--r{background:#e05d5d}.vf-term__dot--y{background:#d8b24a}.vf-term__dot--g{background:var(--color-lime-pulse)}
  .vf-term__file{margin-left:6px;font-family:var(--font-mono);font-size:12px;color:var(--color-deep-fern)}
  .vf-term__body{padding:24px 22px}
  .vf-term__cmt{font-family:var(--font-mono);font-size:12px;color:var(--color-sage-40);margin-bottom:16px}
  .vf-term__cmt::before{content:'// ';color:var(--color-moss-70)}
  .vf-term__row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;background:var(--color-void-black);border:1px solid var(--color-circuit-border);border-radius:var(--radius-lg);transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
  .vf-term__row:focus-within{border-color:var(--color-lime-pulse);box-shadow:0 0 0 3px rgba(127,238,100,.12)}
  .vf-term__row::before{content:'>';font-family:var(--font-mono);font-weight:700;color:var(--color-lime-pulse);flex:0 0 auto}
  .vf-form__input{flex:1;min-width:0;padding:9px 4px;background:transparent;border:0;outline:0;color:var(--color-phosphor-white);font-family:var(--font-mono);font-size:14px;caret-color:var(--color-lime-pulse)}
  .vf-form__input::placeholder{color:var(--color-sage-40)}
  .vf-sub-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border:0;border-radius:var(--radius-buttons);background:var(--color-lime-pulse);color:var(--color-void-black);font-family:var(--font-inter-variable);font-size:14px;font-weight:var(--font-weight-medium);letter-spacing:-.28px;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease-out)}
  .vf-sub-btn:hover{transform:translateY(-1px)}
  .vf-sub-btn::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
  .vf-sub-btn:hover::after{left:150%}
  .vf-sub-btn svg{width:14px;height:14px;position:relative;z-index:1}
  .vf-term__success{max-height:0;overflow:hidden;opacity:0;font-family:var(--font-mono);font-size:13px;color:var(--color-lime-pulse);transition:max-height .35s var(--ease-out),opacity .35s var(--ease-out),margin-top .35s var(--ease-out)}
  .vf-term__success.show{max-height:32px;opacity:1;margin-top:14px}
  .vf-term__success::before{content:'✓ ';font-weight:700}

  /* ---- Band B: link columns -------------------------------------- */
  .vf-links{padding:56px 0;border-bottom:1px solid var(--color-phosphor-blue-black)}
  .vf-links .vf-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px 48px}
  .vf-col{flex:0 1 auto;min-width:160px}
  .vf-col__label{display:block;margin-bottom:20px;font-family:var(--font-inter-variable);font-size:12px;font-weight:var(--font-weight-medium);letter-spacing:.6px;text-transform:uppercase;color:var(--color-moss-70)}
  .vf-col ul{list-style:none;display:flex;flex-direction:column;gap:4px}
  .vf-col a{position:relative;display:inline-flex;align-items:center;padding:6px 0 6px 0;font-family:var(--font-inter-variable);font-size:15px;letter-spacing:-.3px;color:var(--color-sage-60);transition:color .3s var(--ease-out),padding-left .3s var(--ease-out)}
  .vf-col a::before{content:'';position:absolute;left:0;top:50%;width:0;height:1.5px;border-radius:2px;background:var(--color-lime-pulse);transform:translateY(-50%);transition:width .3s var(--ease-out)}
  .vf-col a:hover{color:var(--color-phosphor-white);padding-left:24px}
  .vf-col a:hover::before{width:16px}
  .vf-contact li{font-family:var(--font-inter-variable);font-size:14px;color:var(--color-sage-60);margin-bottom:14px;line-height:1.5}
  .vf-contact li span{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--color-deep-fern)}
  .vf-contact a{color:var(--color-sage-60);transition:color .3s var(--ease-out)}
  .vf-contact a:hover{color:var(--color-lime-pulse)}

  /* ---- Band D: bottom bar ---------------------------------------- */
  .vf-bottom{border-top:1px solid var(--color-phosphor-blue-black)}
  .vf-bottom__grid{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px}
  .vf-copy{font-size:13px;color:var(--color-deep-fern)}
  .vf-copy a{position:relative;color:var(--color-sage-60);transition:color .3s var(--ease-out)}
  .vf-copy a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--color-lime-pulse);transition:width .3s var(--ease-out)}
  .vf-copy a:hover{color:var(--color-phosphor-white)}
  .vf-copy a:hover::after{width:100%}
  .vf-bottom__right{display:flex;align-items:center;gap:20px}
  .vf-pay img{height:26px;width:auto}
  .vf-toplink{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--color-circuit-border);border-radius:var(--radius-pills);font-family:var(--font-inter-variable);font-size:13px;font-weight:var(--font-weight-medium);color:var(--color-phosphor-white);white-space:nowrap;transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .vf-toplink:hover{color:var(--color-lime-pulse);border-color:var(--color-lime-pulse);background:rgba(127,238,100,.08)}
  .vf-toplink svg{width:14px;height:14px;transition:transform .3s var(--ease-spring)}
  .vf-toplink:hover svg{transform:translateY(-3px)}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:991px){
    .vf-top{padding:56px 0}
    .vf-top .vf-inner{grid-template-columns:1fr;gap:36px}
    .vf-links{padding:48px 0}
    .vf-links .vf-inner{justify-content:flex-start;gap:36px 56px}
  }
  @media (max-width:575px){
    .vf-top{padding:44px 0}
    .vf-links .vf-inner{flex-direction:column;align-items:flex-start;gap:32px}
    .vf-term__row{flex-wrap:wrap}
    .vf-sub-btn{width:100%;justify-content:center}
    .vf-bottom__grid{flex-direction:column;text-align:center;gap:18px}
    .vf-bottom__right{flex-direction:column-reverse;gap:16px}
  }


/* ---- PAGE: about-us.blade.php ---- */
/* Base Reset for New Layout */
  .au-modern {
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--font-inter-variable);
    overflow-x: hidden;
  }
  .au-container {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-24);
  }
  
  /* Eyebrow / Badges */
  .au-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(127, 238, 100, 0.08);
    border: 1px solid rgba(127, 238, 100, 0.2);
    border-radius: var(--radius-pills);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    margin-bottom: var(--spacing-24);
  }
  .au-badge::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 2s infinite;
  }

  @keyframes pulse-dot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(127, 238, 100, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(127, 238, 100, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(127, 238, 100, 0); }
  }

  /* 1. Hero Section (Split Asymmetric) */
  .au-hero {
    position: relative;
    padding: 140px 0 100px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .au-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  }
  .au-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .au-hero__content {
    max-width: 600px;
  }
  .au-hero__content h1 {
    font-family: var(--font-goga);
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: var(--spacing-24) 0;
  }
  .au-hero__content p {
    font-size: var(--text-subheading);
    color: var(--text-lead);
    margin-bottom: var(--spacing-40);
  }
  
  /* Abstract CSS Art replacing the old console */
  .au-hero__art {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .au-cube {
    position: relative;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(127, 238, 100, 0.1), rgba(127, 238, 100, 0.02));
    border: 1px solid var(--accent);
    transform: rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
    box-shadow: 0 0 60px rgba(127, 238, 100, 0.2), inset 0 0 40px rgba(127, 238, 100, 0.2);
    animation: float-cube 6s ease-in-out infinite alternate;
  }
  .au-cube::before, .au-cube::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid var(--accent);
    background: rgba(127, 238, 100, 0.05);
  }
  .au-cube::before {
    transform: translateZ(-100px);
    filter: blur(20px);
  }
  .au-cube::after {
    transform: translateZ(100px);
  }
  @keyframes float-cube {
    0% { transform: rotateX(45deg) rotateZ(45deg) translateY(0); }
    100% { transform: rotateX(55deg) rotateZ(55deg) translateY(-30px); }
  }

  /* 2. Mission Statement (Giant Type) */
  .au-mission {
    padding: 120px 0;
    position: relative;
  }
  .au-mission__text {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }
  .au-mission__text h2 {
    font-family: var(--font-goga);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: var(--spacing-32);
    letter-spacing: -0.02em;
  }
  .au-mission__text p {
    font-size: var(--text-heading-sm);
    color: var(--text-muted);
    font-weight: var(--font-weight-regular);
  }

  /* 3. Bento Grid Pillars */
  .au-bento {
    padding: 80px 0;
  }
  .au-bento__header {
    margin-bottom: var(--spacing-64);
  }
  .au-bento__header h2 {
    font-family: var(--font-goga);
    font-size: var(--text-display);
    color: var(--text-primary);
  }
  .au-grid-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(300px, auto));
    gap: var(--spacing-24);
  }
  
  .au-bento-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-40);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base) var(--ease-out);
  }
  .au-bento-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(127, 238, 100, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
  }
  .au-bento-card:hover {
    border-color: var(--border-subtle);
    transform: translateY(-4px);
    background: var(--surface-2);
  }
  .au-bento-card:hover::before {
    opacity: 1;
  }
  .au-bento-card__icon {
    position: absolute;
    top: var(--spacing-32);
    right: var(--spacing-32);
    width: 48px;
    height: 48px;
    color: var(--accent);
  }
  .au-bento-card h4 {
    font-family: var(--font-goga);
    font-size: var(--text-heading);
    color: var(--text-primary);
    margin-bottom: var(--spacing-12);
    max-width: 80%;
  }
  .au-bento-card p {
    color: var(--text-muted);
  }
  
  /* Specific Bento Placements */
  .bento-1 { grid-column: 1 / 3; grid-row: 1; }
  .bento-2 { grid-column: 3 / 4; grid-row: 1; }
  .bento-3 { grid-column: 1 / 2; grid-row: 2; }
  .bento-4 { grid-column: 2 / 4; grid-row: 2; }
  
  /* 4. Vertical Timeline Steps */
  .au-timeline {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--surface-1) 100%);
    border-top: 1px solid var(--border-subtle);
  }
  .au-timeline__header {
    text-align: center;
    margin-bottom: 80px;
  }
  .au-timeline__header h2 {
    font-family: var(--font-goga);
    font-size: var(--text-display);
    color: var(--text-primary);
  }
  
  .au-track {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
  }
  .au-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
  }
  
  .au-track-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
    margin-bottom: var(--spacing-64);
    position: relative;
  }
  .au-track-item:nth-child(even) {
    margin-left: auto;
    justify-content: flex-start;
  }
  .au-track-item:last-child {
    margin-bottom: 0;
  }
  
  .au-track-node {
    position: absolute;
    right: -11px;
    width: 20px;
    height: 20px;
    background: var(--bg);
    border: 2px solid var(--accent);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 15px rgba(127, 238, 100, 0.5);
  }
  .au-track-item:nth-child(even) .au-track-node {
    left: -11px;
    right: auto;
  }
  
  .au-track-content {
    width: 85%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: var(--spacing-32);
    border-radius: var(--radius-lg);
  }
  .au-track-item:nth-child(even) .au-track-content {
    margin-left: 15%;
    width: 85%;
  }
  
  .au-track-num {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: var(--text-body-sm);
    margin-bottom: var(--spacing-12);
    display: block;
  }
  .au-track-content h4 {
    font-family: var(--font-goga);
    font-size: var(--text-subheading);
    color: var(--text-primary);
    margin-bottom: var(--spacing-8);
  }
  
  /* 5. Edge CTA (Inverted / Bold) */
  .au-edge-cta {
    background: var(--accent);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .au-edge-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.4) 0%, transparent 60%);
    pointer-events: none;
  }
  .au-edge-cta__inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .au-edge-cta h2 {
    font-family: var(--font-goga);
    font-size: var(--text-display);
    color: var(--surface-void);
    margin-bottom: var(--spacing-24);
  }
  .au-edge-cta p {
    font-size: var(--text-heading-sm);
    color: var(--surface-ground);
    margin-bottom: var(--spacing-40);
  }
  .au-btn-inverted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: var(--surface-void);
    color: var(--text-primary);
    font-family: var(--font-inter-variable);
    font-size: var(--text-body-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.352px;
    border-radius: var(--radius-buttons);
    text-decoration: none;
    transition: all var(--transition-base) var(--ease-out);
  }
  .au-btn-inverted:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,0.4);
  }

  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .au-grid-bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    .bento-1, .bento-2, .bento-3, .bento-4 {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  @media (max-width: 768px) {
    .au-hero__grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .au-hero__content {
      margin: 0 auto;
    }
    .au-badge {
      margin: 0 auto var(--spacing-24);
    }
    .au-hero__art {
      height: 300px;
    }
    .au-track::before {
      left: 20px;
    }
    .au-track-item, .au-track-item:nth-child(even) {
      width: 100%;
      justify-content: flex-start;
      padding-left: 50px;
    }
    .au-track-node, .au-track-item:nth-child(even) .au-track-node {
      left: 10px;
      right: auto;
    }
    .au-track-content, .au-track-item:nth-child(even) .au-track-content {
      width: 100%;
      margin-left: 0;
    }
  }

/* ---- PAGE: cart.blade.php ---- */
/* ---- Shell ----------------------------------------------------- */
  .ck{background:var(--bg);color:var(--text-body);font-family:var(--font-inter-variable)}
  .ck-section{position:relative;padding:56px 0 120px;background:var(--bg)}
  .ck-inner{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}

  /* ---- Top bar --------------------------------------------------- */
  .ck-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--spacing-32);flex-wrap:wrap}
  .ck-back{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--border);border-radius:var(--radius-pills);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .ck-back:hover{color:var(--accent);border-color:var(--accent);background:rgba(127,238,100,.08)}
  .ck-back svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
  .ck-back:hover svg{transform:translateX(-3px)}
  .ck-count{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--text-muted)}
  .ck-count b{color:var(--accent);font-weight:var(--font-weight-medium)}

  /* ---- Layout ---------------------------------------------------- */
  .ck-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--spacing-32);align-items:start}
  .ck-items{display:flex;flex-direction:column;gap:14px}

  /* ---- Item card ------------------------------------------------- */
  .ck-item{display:flex;align-items:center;gap:18px;padding:18px 20px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
  .ck-item:hover{border-color:var(--color-sage-40);transform:translateY(-2px)}
  .ck-item__media{position:relative;display:grid;place-items:center;flex:0 0 auto;width:72px;height:72px;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);border:1px solid var(--border-subtle)}
  .ck-item__media img{width:100%;height:100%;object-fit:cover}
  .ck-item__media--points{color:var(--accent);background:rgba(127,238,100,.08);border-color:rgba(127,238,100,.25)}
  .ck-item__media--points svg{width:30px;height:30px}
  .ck-item__info{flex:1;min-width:0}
  .ck-item__title{font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;color:var(--text-primary);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ck-item__meta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--color-moss-70)}
  .ck-item__meta svg{width:13px;height:13px}
  .ck-item__end{display:flex;align-items:center;gap:16px;flex:0 0 auto}
  .ck-item__price{font-family:var(--font-mono);font-size:var(--text-subheading);color:var(--text-primary);white-space:nowrap}
  .ck-item__remove{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);color:var(--color-sage-40);cursor:pointer;transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .ck-item__remove:hover{color:#ff6a6a;border-color:rgba(255,95,86,.4);background:rgba(255,95,86,.1)}
  .ck-item__remove svg{width:17px;height:17px}

  /* ---- Summary --------------------------------------------------- */
  .ck-summary{position:sticky;top:24px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--spacing-28);box-shadow:0 24px 60px -30px rgba(0,0,0,.6);overflow:hidden}
  .ck-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
  .ck-summary__title{display:flex;align-items:center;gap:10px;font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary);margin-bottom:var(--spacing-24)}
  .ck-summary__title svg{width:20px;height:20px;color:var(--accent)}
  .ck-summary__rows{display:flex;flex-direction:column;gap:12px;padding-bottom:var(--spacing-20);border-bottom:1px solid var(--border-subtle)}
  .ck-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ck-row__label{font-size:var(--text-body-sm);color:var(--text-muted)}
  .ck-row__value{font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--text-primary)}
  .ck-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:var(--spacing-20) 0 var(--spacing-24)}
  .ck-total__label{font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);color:var(--text-primary)}
  .ck-total__value{font-family:var(--font-goga);font-size:var(--text-heading);letter-spacing:-.01em;color:var(--text-primary)}

  .ck-checkout{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:var(--accent);color:var(--surface-void);border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;transition:all var(--transition-base) var(--ease-out)}
  .ck-checkout:hover{background:#93f47a;transform:translateY(-2px);color:var(--surface-void)}
  .ck-checkout::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
  .ck-checkout:hover::after{left:150%}
  .ck-checkout svg{width:17px;height:17px;position:relative;z-index:1}
  .ck-continue{display:block;width:100%;text-align:center;margin-top:12px;padding:12px;font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--text-link);transition:color .3s var(--ease-out)}
  .ck-continue:hover{color:var(--accent)}
  .ck-trust{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:var(--spacing-20);padding-top:var(--spacing-20);border-top:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted)}
  .ck-trust svg{width:14px;height:14px;color:var(--accent)}

  /* ---- Empty state ----------------------------------------------- */
  .ck-empty{max-width:520px;margin:0 auto;text-align:center;padding:var(--spacing-64) var(--spacing-32);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl)}
  .ck-empty__icon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto var(--spacing-24);border-radius:var(--radius-pills);background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--color-sage-40)}
  .ck-empty__icon svg{width:38px;height:38px}
  .ck-empty h3{font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary);margin-bottom:var(--spacing-8)}
  .ck-empty p{color:var(--text-muted);margin-bottom:var(--spacing-32)}
  .ck-empty__btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;background:var(--accent);color:var(--surface-void);border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;transition:all var(--transition-base) var(--ease-out)}
  .ck-empty__btn:hover{background:#93f47a;transform:translateY(-2px);color:var(--surface-void)}
  .ck-empty__btn svg{width:17px;height:17px}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:900px){
    .ck-layout{grid-template-columns:1fr}
    .ck-summary{position:static}
  }
  @media (max-width:575px){
    .ck-section{padding:40px 0 80px}
    .ck-item{flex-wrap:wrap}
    .ck-item__end{width:100%;justify-content:space-between;margin-top:6px;padding-top:14px;border-top:1px solid var(--border-subtle)}
  }

/* ---- PAGE: checkout.blade.php ---- */
/* ---- Shell ----------------------------------------------------- */
  .chk{background:var(--bg);color:var(--text-body);font-family:var(--font-inter-variable)}
  .chk-section{position:relative;padding:56px 0 120px}
  .chk-inner{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}
  .chk-grid{display:grid;grid-template-columns:1fr 384px;gap:var(--spacing-32);align-items:start}
  .chk-main{display:flex;flex-direction:column;gap:20px}

  /* ---- Section block --------------------------------------------- */
  .chk-block{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--spacing-32)}
  .chk-block__head{display:flex;align-items:center;gap:14px;margin-bottom:var(--spacing-24);padding-bottom:var(--spacing-20);border-bottom:1px solid var(--border-subtle)}
  .chk-block__ico{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-lg);background:rgba(127,238,100,.1);border:1px solid rgba(127,238,100,.25);color:var(--accent)}
  .chk-block__ico svg{width:20px;height:20px}
  .chk-block__t h3{font-family:var(--font-goga);font-size:var(--text-heading-sm);line-height:1.2;color:var(--text-primary)}
  .chk-block__t p{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted);margin-top:3px}
  .chk-block__step{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--color-pine-15);font-weight:600}

  /* ---- Fields ---------------------------------------------------- */
  .chk-fields{display:flex;flex-direction:column;gap:18px}
  .chk-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .chk-field{display:flex;flex-direction:column;min-width:0}
  .chk-label{font-size:var(--text-body-sm);color:var(--text-primary);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-body-sm);margin-bottom:var(--spacing-8)}
  .chk-req{color:var(--accent);margin-left:2px}

  .chk-input,.chk-select,.chk-textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text-primary);padding:13px 16px;border-radius:var(--radius-inputs);font-family:var(--font-inter-variable);font-size:var(--text-body-md);letter-spacing:-.352px;transition:all var(--transition-base) var(--ease-out)}
  .chk-input::placeholder,.chk-textarea::placeholder{color:var(--text-muted)}
  .chk-input:focus,.chk-select:focus,.chk-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(127,238,100,.15)}
  .chk-select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238cab87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
  .chk-select option{background:var(--surface-2);color:var(--text-primary)}
  .chk-textarea{min-height:120px;resize:vertical}

  .chk-exp{display:flex;align-items:center;gap:10px}
  .chk-exp .chk-input{text-align:center}
  .chk-exp__sep{color:var(--text-muted);font-weight:600}

  /* ---- Validation (always below the field) ----------------------- */
  .chk-main .text-danger,.chk-main label.error{display:block;color:#ff5f56;font-size:var(--text-caption);font-weight:var(--font-weight-medium);letter-spacing:-.3px;margin-top:var(--spacing-8)}
  .chk-main .text-danger:empty{display:none;margin:0}
  .chk-input.error,.chk-select.error,.chk-textarea.error{border-color:#ff5f56}

  /* ---- Checkboxes (agreements) ----------------------------------- */
  .chk-agrees{display:flex;flex-direction:column;gap:12px;margin-top:var(--spacing-20)}
  .checkout-checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;user-select:none}
  .checkout-checkbox input{position:absolute;opacity:0;width:0;height:0}
  .custom-check{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);color:var(--surface-void);transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
  .custom-check svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
  .checkout-checkbox input:checked + .custom-check{background:var(--accent);border-color:var(--accent)}
  .checkout-checkbox input:checked + .custom-check svg{opacity:1;transform:scale(1)}
  .checkout-checkbox input:focus-visible + .custom-check{box-shadow:0 0 0 3px rgba(127,238,100,.25)}
  .checkout-checkbox.error .custom-check{border-color:#ff5f56}
  .checkbox-label{font-size:var(--text-body-sm);line-height:1.5;color:var(--text-body)}
  .checkbox-label a{color:var(--accent);font-weight:var(--font-weight-medium);text-decoration:underline;text-underline-offset:2px}

  .chk-captcha{display:flex;gap:var(--spacing-16);align-items:center}
  .chk-captcha .chk-input{flex:1}
  .chk-captcha-img{flex:0 0 auto}
  .chk-captcha-img img{display:block;height:50px;width:auto;border-radius:var(--radius-inputs);border:1px solid var(--border)}

  .chk-dba{margin-top:var(--spacing-24);font-size:var(--text-body-sm);color:var(--text-muted)}
  .chk-paylogos{margin-top:var(--spacing-16)}
  .chk-paylogos img{height:26px;width:auto}

  /* ---- Summary --------------------------------------------------- */
  .chk-summary{position:sticky;top:24px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
  .chk-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
  .chk-summary__head{display:flex;align-items:center;gap:10px;padding:20px 24px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--surface-2),var(--surface-1))}
  .chk-summary__head svg{width:20px;height:20px;color:var(--accent)}
  .chk-summary__head h3{font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary)}
  .chk-summary__body{padding:24px}
  .chk-oitem{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
  .chk-oitem:first-child{padding-top:0}
  .chk-oitem__left{display:flex;align-items:center;gap:12px;min-width:0}
  .chk-oitem__ico{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-md);background:rgba(127,238,100,.08);border:1px solid rgba(127,238,100,.22);color:var(--accent)}
  .chk-oitem__ico svg{width:18px;height:18px}
  .chk-oitem__pts{font-family:var(--font-inter-variable);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--text-primary)}
  .chk-oitem__meta{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted);margin-top:2px}
  .chk-oitem__price{font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--text-primary);white-space:nowrap}
  .chk-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 0 22px}
  .chk-total__label{font-size:var(--text-body-md);font-weight:var(--font-weight-medium);color:var(--text-primary)}
  .chk-total__value{font-family:var(--font-goga);font-size:var(--text-heading);letter-spacing:-.01em;color:var(--text-primary)}
  .chk-place{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:var(--accent);color:var(--surface-void);border:none;border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;cursor:pointer;transition:all var(--transition-base) var(--ease-out)}
  .chk-place:hover{background:#93f47a;transform:translateY(-2px)}
  .chk-place::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
  .chk-place:hover::after{left:150%}
  .chk-place svg{width:17px;height:17px;position:relative;z-index:1}
  .chk-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--spacing-16);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted)}
  .chk-secure svg{width:14px;height:14px;color:var(--accent)}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:992px){
    .chk-grid{grid-template-columns:1fr}
    .chk-summary{position:static}
  }
  @media (max-width:575px){
    .chk-section{padding:40px 0 80px}
    .chk-block{padding:var(--spacing-24) var(--spacing-20)}
    .chk-row{grid-template-columns:1fr;gap:18px}
    .chk-captcha{flex-direction:column;align-items:stretch}
    .chk-captcha-img img{width:100%;height:auto}
  }

/* ---- PAGE: contact.blade.php ---- */
/* Base Reset for Contact Layout */
  .ct-modern {
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--font-inter-variable);
    overflow-x: hidden;
  }
  
  /* Hero matching about us exactly */
  .au-hero {
    position: relative;
    padding: 140px 0 100px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .au-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  }
  .au-container {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-24);
  }
  .au-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-64);
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .au-hero__content {
    max-width: 600px;
  }
  .au-hero__content h1 {
    font-family: var(--font-goga);
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: var(--spacing-24) 0;
  }
  .au-hero__content p {
    font-size: var(--text-subheading);
    color: var(--text-lead);
    margin-bottom: var(--spacing-40);
  }

  /* Abstract CSS Art */
  .au-hero__art {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .au-cube {
    position: relative;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(127, 238, 100, 0.1), rgba(127, 238, 100, 0.02));
    border: 1px solid var(--accent);
    transform: rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
    box-shadow: 0 0 60px rgba(127, 238, 100, 0.2), inset 0 0 40px rgba(127, 238, 100, 0.2);
    animation: float-cube 6s ease-in-out infinite alternate;
  }
  .au-cube::before, .au-cube::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid var(--accent);
    background: rgba(127, 238, 100, 0.05);
  }
  .au-cube::before {
    transform: translateZ(-100px);
    filter: blur(20px);
  }
  .au-cube::after {
    transform: translateZ(100px);
  }
  @keyframes float-cube {
    0% { transform: rotateX(45deg) rotateZ(45deg) translateY(0); }
    100% { transform: rotateX(55deg) rotateZ(55deg) translateY(-30px); }
  }

  /* Split Layout */
  .ct-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-48);
    max-width: var(--page-max-width);
    margin: 80px auto 120px;
    padding: 0 var(--spacing-24);
    position: relative;
    z-index: 2;
  }
  
  /* Left Panel (Company Info) */
  .ct-info-panel {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-48);
    position: relative;
    overflow: hidden;
    height: fit-content;
  }
  .ct-info-panel::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: var(--accent);
    filter: blur(100px);
    opacity: 0.12;
    pointer-events: none;
  }
  .ct-eyebrow {
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    margin-bottom: var(--spacing-16);
  }
  .ct-info-panel h2 {
    font-family: var(--font-goga);
    font-size: var(--text-heading);
    color: var(--text-primary);
    margin-bottom: var(--spacing-40);
  }
  .ct-detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-24);
    margin-bottom: var(--spacing-32);
  }
  .ct-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--accent);
    flex-shrink: 0;
  }
  .ct-detail-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }
  .ct-detail-text label {
    display: block;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    color: var(--text-muted);
    margin-bottom: var(--spacing-4);
  }
  .ct-detail-text strong, .ct-detail-text a {
    display: block;
    font-size: var(--text-body-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
  }
  .ct-detail-text a:hover {
    color: var(--accent);
  }

  .ct-support-box {
    margin-top: var(--spacing-48);
    padding-top: var(--spacing-32);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
  }
  .ct-support-box .icon {
    color: var(--accent);
  }
  .ct-support-box .icon svg {
    width: 24px; height: 24px; fill: currentColor;
  }
  .ct-support-box span {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-body-sm);
  }
  .ct-support-box strong {
    color: var(--text-primary);
    font-size: var(--text-body-md);
  }

  /* Right Panel (Form) */
  .ct-form-panel {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-48);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  }
  .ct-form-panel h2 {
    font-family: var(--font-goga);
    font-size: var(--text-heading);
    color: var(--text-primary);
    margin-bottom: var(--spacing-12);
  }
  .ct-form-panel > p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-40);
  }

  /* Form Fields */
  .ct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-24);
  }
  .ct-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-24);
  }
  .ct-field > label {
    font-size: var(--text-body-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-12);
  }
  
  /* Following theme.css variables for inputs */
  .contact-input-wrap input,
  .contact-input-wrap textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 16px 20px;
    border-radius: var(--radius-inputs); /* theme: --radius-inputs (8px) */
    font-family: var(--font-inter-variable);
    font-size: var(--text-body-md);
    letter-spacing: -0.352px;
    transition: all var(--transition-base) var(--ease-out);
  }
  .contact-input-wrap textarea {
    min-height: 150px;
    resize: vertical;
  }
  .contact-input-wrap input:focus,
  .contact-input-wrap textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(127, 238, 100, 0.2);
  }
  
  /* Validation Errors (Below the input field) */
  label.error, span.error, span.contact-captcha-error {
    display: block;
    color: #ff5f56; /* Neon red */
    font-size: var(--text-caption);
    margin-top: 10px;
    font-weight: var(--font-weight-medium);
  }
  .contact-input-wrap input.error,
  .contact-input-wrap textarea.error {
    border-color: #ff5f56;
  }

  /* Captcha */
  .contact-captcha-row {
    display: flex;
    gap: var(--spacing-20);
    align-items: center;
  }
  .contact-captcha-image img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
  }

  /* Submit Button using theme variable */
  .ct-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    margin-top: var(--spacing-16);
    background: var(--accent);
    color: var(--surface-void);
    border: none;
    border-radius: var(--radius-buttons); /* theme: --radius-buttons (12px) */
    font-family: var(--font-inter-variable); /* theme: buttons use Inter, not Goga */
    font-size: var(--text-body-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.352px;
    cursor: pointer;
    transition: all var(--transition-base) var(--ease-out);
  }
  .ct-submit-btn:hover {
    background: #93f47a; /* lighter lime — stays on-brand (matches footer) */
    transform: translateY(-2px);
  }
  .ct-submit-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform var(--transition-base);
  }
  .ct-submit-btn:hover svg {
    transform: translateX(4px) translateY(-4px);
  }

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

  @media (max-width: 768px) {
    .au-hero__grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .au-hero__content {
      margin: 0 auto;
    }
    .au-hero__art {
      height: 300px;
    }
    .ct-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .ct-info-panel, .ct-form-panel {
      padding: var(--spacing-32) var(--spacing-24);
    }
    .contact-captcha-row {
      flex-direction: column;
      align-items: flex-start;
    }
  }

/* ---- PAGE: gamecart.blade.php ---- */
/* ---- Shell --------------------------------------------------- */
    .gc{background:var(--bg);color:var(--text-body);font-family:var(--font-inter-variable)}
    .gc-section{position:relative;padding:56px 0 120px}
    .gc-inner{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}

    /* ---- Top bar ------------------------------------------------- */
    .gc-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--spacing-32);flex-wrap:wrap}
    .gc-continue{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--border);border-radius:var(--radius-pills);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
    .gc-continue:hover{color:var(--accent);border-color:var(--accent);background:rgba(127,238,100,.08)}
    .gc-continue svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
    .gc-continue:hover svg{transform:translateX(-3px)}
    .gc-credits{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid rgba(127,238,100,.28);border-radius:var(--radius-pills);background:rgba(127,238,100,.08);font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--color-moss-80)}
    .gc-credits svg{width:15px;height:15px;color:var(--accent)}
    .gc-credits b{color:var(--accent);font-weight:var(--font-weight-medium)}

    /* ---- Layout -------------------------------------------------- */
    .gc-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--spacing-32);align-items:start}
    .gc-items{display:flex;flex-direction:column;gap:16px}

    /* ---- Item card ----------------------------------------------- */
    .gc-card{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:16px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
    .gc-card:hover{border-color:var(--color-sage-40);transform:translateY(-2px)}
    .gc-card__media{position:relative;align-self:center;aspect-ratio:3/2;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);border:1px solid var(--border-subtle)}
    .gc-card__media img{width:100%;height:100%;object-fit:cover;object-position:center}
    .gc-card__badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--radius-pills);background:var(--accent);color:var(--surface-void);font-family:var(--font-mono);font-size:var(--text-caption);font-weight:600}
    .gc-card__badge svg{width:12px;height:12px}

    .gc-card__body{display:flex;flex-direction:column;min-width:0}
    .gc-card__title{font-family:var(--font-inter-variable);font-size:var(--text-subheading);font-weight:var(--font-weight-medium);letter-spacing:-.36px;color:var(--text-primary);transition:color .3s var(--ease-out)}
    .gc-card__title:hover{color:var(--accent)}

    /* Coaching-hours add-on */
    .gc-train{position:relative;margin-top:14px;padding:14px 16px;background:var(--surface-void);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
    .gc-train__remove{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-md);color:var(--color-sage-40);transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
    .gc-train__remove:hover{color:#ff6a6a;background:rgba(255,80,80,.12)}
    .gc-train__remove svg{width:14px;height:14px}
    .gc-train__title{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-inter-variable);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--color-moss-80);margin-bottom:6px}
    .gc-train__title svg{width:14px;height:14px;color:var(--accent)}
    .gc-train__calc{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted);margin-bottom:8px}
    .gc-train__total{font-size:var(--text-caption);color:var(--text-muted)}
    .gc-train__total b{font-family:var(--font-mono);color:var(--accent);font-weight:var(--font-weight-medium)}

    .gc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:16px}
    .gc-card__price{font-size:var(--text-body-sm);color:var(--text-muted)}
    .gc-card__price b{font-family:var(--font-mono);font-size:var(--text-subheading);color:var(--text-primary);font-weight:var(--font-weight-medium);margin:0 3px}
    .gc-remove{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-pills);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--color-sage-40);transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
    .gc-remove:hover{color:#ff6a6a;border-color:rgba(255,95,86,.4);background:rgba(255,95,86,.1)}
    .gc-remove svg{width:15px;height:15px}

    /* ---- Summary ------------------------------------------------- */
    .gc-summary{position:sticky;top:24px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
    .gc-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
    .gc-summary__title{display:flex;align-items:center;gap:10px;padding:20px 24px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--surface-2),var(--surface-1));font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary)}
    .gc-summary__title svg{width:20px;height:20px;color:var(--accent)}
    .gc-summary__body{padding:24px}
    .gc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
    .gc-row .label{font-size:var(--text-body-sm);color:var(--text-muted)}
    .gc-row .value{font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--text-primary)}
    .gc-row.total{border-bottom:0;padding:18px 0 22px;align-items:baseline}
    .gc-row.total .label{font-size:var(--text-body-md);font-weight:var(--font-weight-medium);color:var(--text-primary)}
    .gc-row.total .value{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-goga);font-size:var(--text-heading);color:var(--accent)}
    .gc-row.total .value small{font-family:var(--font-inter-variable);font-size:var(--text-body-sm);color:var(--text-muted)}

    .gc-purchase-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:var(--accent);color:var(--surface-void);border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;transition:all var(--transition-base) var(--ease-out)}
    .gc-purchase-btn:hover{background:#93f47a;transform:translateY(-2px);color:var(--surface-void)}
    .gc-purchase-btn::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
    .gc-purchase-btn:hover::after{left:150%}
    .gc-purchase-btn svg{width:17px;height:17px;position:relative;z-index:1}

    /* ---- Empty state --------------------------------------------- */
    .gc-empty{max-width:520px;margin:0 auto;text-align:center;padding:var(--spacing-64) var(--spacing-32);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl)}
    .gc-empty__icon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto var(--spacing-24);border-radius:var(--radius-pills);background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--color-sage-40)}
    .gc-empty__icon svg{width:38px;height:38px}
    .gc-empty h3{font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary);margin-bottom:var(--spacing-8)}
    .gc-empty p{color:var(--text-muted);margin-bottom:var(--spacing-32)}
    .gc-empty__btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;background:var(--accent);color:var(--surface-void);border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;transition:all var(--transition-base) var(--ease-out)}
    .gc-empty__btn:hover{background:#93f47a;transform:translateY(-2px);color:var(--surface-void)}
    .gc-empty__btn svg{width:17px;height:17px}

    /* ---- Responsive ---------------------------------------------- */
    @media (max-width:992px){
      .gc-grid{grid-template-columns:1fr}
      .gc-summary{position:static}
    }
    @media (max-width:575px){
      .gc-section{padding:40px 0 80px}
      .gc-card{grid-template-columns:1fr}
      .gc-card__media{width:100%;max-width:280px;margin-inline:auto}
      .gc-card__foot{flex-wrap:wrap}
    }

/* ---- PAGE: page.blade.php ---- */
/* ---- Layout ---------------------------------------------------- */
  .legal{background:var(--bg);color:var(--text-body);font-family:var(--font-inter-variable)}
  .legal-section{position:relative;padding:56px 0 120px;background:var(--bg)}
  .legal-layout{display:grid;grid-template-columns:264px 1fr;gap:var(--spacing-40);align-items:start;max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}

  /* ---- Left nav (sticky) ----------------------------------------- */
  .legal-nav{position:sticky;top:24px;display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl)}
  .legal-nav__label{padding:6px 12px 12px;font-family:var(--font-inter-variable);font-size:var(--text-caption);font-weight:var(--font-weight-medium);letter-spacing:.6px;text-transform:uppercase;color:var(--color-moss-70)}
  .legal-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-lg);font-family:var(--font-inter-variable);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);letter-spacing:-.28px;color:var(--color-sage-60);transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .legal-nav a svg{width:18px;height:18px;flex:0 0 auto;color:var(--color-sage-40);transition:color .3s var(--ease-out)}
  .legal-nav a:hover{color:var(--text-primary);background:rgba(72,83,70,.16)}
  .legal-nav a:hover svg{color:var(--text-primary)}
  .legal-nav a.is-active{color:var(--text-primary);background:rgba(127,238,100,.1);box-shadow:inset 3px 0 0 var(--accent)}
  .legal-nav a.is-active svg{color:var(--accent)}

  /* ---- Right content card ---------------------------------------- */
  .legal-main{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
  .legal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--surface-2),var(--surface-1))}
  .legal-toolbar__doc{display:inline-flex;align-items:center;gap:9px;min-width:0;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.4px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .legal-toolbar__doc svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
  .legal-copy{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:9px 16px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);letter-spacing:-.28px;color:var(--text-body);cursor:pointer;transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .legal-copy:hover{color:var(--accent);border-color:var(--accent);background:rgba(127,238,100,.08)}
  .legal-copy.is-copied{color:var(--accent);border-color:var(--accent)}
  .legal-copy svg{width:16px;height:16px}
  .legal-copy__done,.legal-copy__t2{display:none}
  .legal-copy.is-copied .legal-copy__ico,.legal-copy.is-copied .legal-copy__t1{display:none}
  .legal-copy.is-copied .legal-copy__done,.legal-copy.is-copied .legal-copy__t2{display:inline-flex}
  .legal-copy__done{color:var(--accent)}

  .legal-prose-wrap{padding:36px 40px}

  /* ---- Prose (raw DB HTML) --------------------------------------- */
  .legal-prose{color:var(--text-body);font-size:var(--text-body-md);line-height:1.75;overflow-wrap:break-word}
  .legal-prose > *:first-child{margin-top:0}
  .legal-prose > *:last-child{margin-bottom:0}
  .legal-prose h1,.legal-prose h2,.legal-prose h3,.legal-prose h4,.legal-prose h5,.legal-prose h6{font-family:var(--font-goga);color:var(--text-primary);line-height:1.25;letter-spacing:-.01em;margin:34px 0 14px}
  .legal-prose h1{font-size:var(--text-heading)}
  .legal-prose h2{font-size:var(--text-heading-sm)}
  .legal-prose h3{font-size:var(--text-subheading)}
  .legal-prose h4,.legal-prose h5,.legal-prose h6{font-size:var(--text-body-md)}
  .legal-prose p{margin:0 0 16px;color:var(--text-body)}
  .legal-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(127,238,100,.4);transition:text-decoration-color .3s var(--ease-out),color .3s var(--ease-out)}
  .legal-prose a:hover{text-decoration-color:var(--accent)}
  .legal-prose strong,.legal-prose b{color:var(--text-primary);font-weight:var(--font-weight-medium)}
  .legal-prose em,.legal-prose i{color:var(--color-moss-80)}
  .legal-prose ul,.legal-prose ol{margin:0 0 18px;padding:0;list-style:none}
  .legal-prose li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--text-body)}
  .legal-prose ul > li::before{content:'';position:absolute;left:5px;top:11px;width:6px;height:6px;border-radius:var(--radius-pills);background:var(--accent)}
  .legal-prose ol{counter-reset:legal-li}
  .legal-prose ol > li{counter-increment:legal-li}
  .legal-prose ol > li::before{content:counter(legal-li);position:absolute;left:0;top:1px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent)}
  .legal-prose blockquote{margin:22px 0;padding:14px 22px;border-left:2px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius-lg) var(--radius-lg) 0;color:var(--text-muted)}
  .legal-prose hr{border:0;height:1px;background:var(--border-subtle);margin:30px 0}
  .legal-prose code{font-family:var(--font-mono);background:var(--surface-2);border:1px solid var(--border-subtle);padding:2px 6px;border-radius:var(--radius-md);color:var(--color-phosphor-white);font-size:.9em}
  .legal-prose pre{background:var(--surface-void);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;overflow-x:auto;margin:0 0 18px}
  .legal-prose pre code{background:none;border:0;padding:0}
  .legal-prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:var(--text-body-sm)}
  .legal-prose th,.legal-prose td{border:1px solid var(--border-subtle);padding:10px 14px;text-align:left}
  .legal-prose th{background:var(--surface-2);color:var(--text-primary);font-weight:var(--font-weight-medium)}
  .legal-prose ::selection{background:var(--accent);color:var(--surface-void)}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:900px){
    .legal-layout{grid-template-columns:1fr;gap:20px}
    .legal-nav{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding:10px}
    .legal-nav__label{display:none}
    .legal-nav a{flex:0 0 auto;white-space:nowrap}
    .legal-nav a.is-active{box-shadow:none;background:rgba(127,238,100,.12)}
  }
  @media (max-width:575px){
    .legal-section{padding:40px 0 80px}
    .legal-prose-wrap{padding:24px 20px}
    .legal-toolbar{padding:14px 18px}
    .legal-toolbar__doc{display:none}
  }

/* ---- PAGE: product-lists.blade.php ---- */
/* ---- Shell ----------------------------------------------------- */
  .ps{background:var(--bg);color:var(--text-body);font-family:var(--font-inter-variable)}
  .ps-section{position:relative;padding:56px 0 120px}
  .ps-inner{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}

  /* ---- Section lead --------------------------------------------- */
  .ps-lead{display:flex;align-items:center;gap:20px;margin-bottom:var(--spacing-40)}
  .ps-lead__title{font-family:var(--font-goga);font-size:var(--text-heading);line-height:1.1;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap}
  .ps-lead__rule{flex:1;height:1px;background:var(--border-subtle)}
  .ps-lead__count{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.4px;color:var(--color-moss-70);white-space:nowrap}
  .ps-lead__count svg{width:14px;height:14px;color:var(--accent)}

  /* ---- Card grids ------------------------------------------------ */
  .ps-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
  .ps-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:24px}

  /* ---- Category card (landing) ----------------------------------- */
  .ps-cat{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
  .ps-cat:hover{border-color:var(--color-sage-40);transform:translateY(-4px)}
  .ps-cat__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
  .ps-cat__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
  .ps-cat:hover .ps-cat__media img{transform:scale(1.06)}
  .ps-cat__media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);pointer-events:none}
  .ps-badge{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-pills);background:rgba(24,24,24,.72);border:1px solid var(--border);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--color-moss-80)}
  .ps-badge svg{width:12px;height:12px;color:var(--accent)}
  .ps-cat__body{display:flex;flex-direction:column;gap:8px;flex:1;padding:22px}
  .ps-cat__title{font-family:var(--font-goga);font-size:var(--text-subheading);letter-spacing:-.01em;color:var(--text-primary)}
  .ps-cat__summary{font-size:var(--text-body-sm);line-height:1.6;color:var(--color-sage-40);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ps-cat__link{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--accent);transition:gap .3s var(--ease-out)}
  .ps-cat__link:hover{gap:11px}
  .ps-cat__link svg{width:15px;height:15px}

  /* ---- Category banner ------------------------------------------- */
  .ps-banner{display:grid;grid-template-columns:minmax(360px,46%) 1fr;align-items:stretch;margin-bottom:var(--spacing-40);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}
  .ps-banner__media{position:relative;min-height:300px;background:var(--surface-2)}
  .ps-banner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .ps-banner__info{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:var(--spacing-40)}
  .ps-banner__count{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:5px 12px;border-radius:var(--radius-pills);background:rgba(127,238,100,.08);border:1px solid rgba(127,238,100,.25);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--accent)}
  .ps-banner__count svg{width:13px;height:13px}
  .ps-banner__title{font-family:var(--font-goga);font-size:var(--text-heading-lg);line-height:1.05;letter-spacing:var(--tracking-heading-lg);color:var(--text-primary)}
  .ps-banner__summary{font-size:var(--text-body-md);line-height:1.6;color:var(--text-muted);max-width:60ch}
  .ps-banner__back{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--text-link);transition:color .3s var(--ease-out)}
  .ps-banner__back:hover{color:var(--accent)}
  .ps-banner__back svg{width:15px;height:15px;transition:transform .3s var(--ease-out)}
  .ps-banner__back:hover svg{transform:translateX(-3px)}

  /* ---- Product card ---------------------------------------------- */
  .ps-prod{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
  .ps-prod:hover{border-color:var(--color-sage-40);transform:translateY(-4px)}
  .ps-prod__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}
  .ps-prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
  .ps-prod:hover .ps-prod__media img{transform:scale(1.06)}
  .ps-prod__body{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px}
  .ps-prod__title{font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;color:var(--text-primary)}
  .ps-prod__summary{font-size:var(--text-body-sm);line-height:1.55;color:var(--color-sage-40);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ps-prod__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:14px}
  .ps-prod__price{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .ps-prod__price .lbl{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
  .ps-prod__price .val{font-family:var(--font-mono);font-size:var(--text-subheading);color:var(--accent)}
  .ps-prod__actions{display:flex;gap:8px}
  .ps-prod__form{flex:1}
  .ps-add-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--accent);color:var(--surface-void);border:none;border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);letter-spacing:-.28px;cursor:pointer;transition:all var(--transition-base) var(--ease-out)}
  .ps-add-btn:hover{background:#93f47a;transform:translateY(-1px)}
  .ps-add-btn svg{width:16px;height:16px}
  .ps-view-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;padding:12px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-buttons);color:var(--text-primary);transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .ps-view-btn:hover{color:var(--accent);border-color:var(--accent);background:rgba(127,238,100,.08)}
  .ps-view-btn svg{width:17px;height:17px}

  /* ---- Empty ----------------------------------------------------- */
  .ps-empty{max-width:520px;margin:0 auto;text-align:center;padding:var(--spacing-64) var(--spacing-32);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl)}
  .ps-empty__icon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto var(--spacing-24);border-radius:var(--radius-pills);background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--color-sage-40)}
  .ps-empty__icon svg{width:38px;height:38px}
  .ps-empty h3{font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary);margin-bottom:var(--spacing-8)}
  .ps-empty p{color:var(--text-muted)}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:768px){
    .ps-banner{grid-template-columns:1fr}
    .ps-banner__media{min-height:0;aspect-ratio:16/7}
    .ps-banner__info{padding:var(--spacing-28) var(--spacing-24)}
  }
  @media (max-width:575px){
    .ps-section{padding:40px 0 80px}
    .ps-cats,.ps-products{grid-template-columns:1fr}
    .ps-lead__title{white-space:normal}
  }

/* ---- PAGE: product_detail.blade.php ---- */
.hm-pd-container {
      max-width: var(--page-max-width);
      margin: 0 auto;
      padding: var(--spacing-64) var(--spacing-24);
  }
  .hm-pd-hero {
      background: var(--color-void-black);
      padding: var(--spacing-64) 0 0 0;
  }
  .hm-pd-eyebrow {
      font-family: var(--font-inter-variable);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-moss-70);
      margin-bottom: var(--spacing-16);
      display: flex;
      gap: 8px;
  }
  .hm-pd-eyebrow a { color: var(--color-moss-70); text-decoration: none; }
  .hm-pd-eyebrow a:hover { color: var(--color-lime-pulse); }
  
  .hm-pd-title {
      font-family: var(--font-goga);
      font-size: var(--text-display);
      font-weight: 500;
      color: var(--color-phosphor-white);
      line-height: 1;
      letter-spacing: -0.01em;
      margin-bottom: var(--spacing-24);
  }
  
  .hm-pd-summary {
      font-family: var(--font-inter-variable);
      font-size: var(--text-subheading);
      color: var(--color-moss-80);
      max-width: 640px;
      line-height: 1.5;
      padding-bottom: var(--spacing-64);
  }
  
  .hm-pd-layout {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--spacing-64);
      margin-top: 0;
  }
  
  /* Left Column */
  .hm-pd-gallery {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-20);
  }
  .hm-pd-gallery-main {
      width: 100%;
      border-radius: var(--radius-cards);
      background: var(--color-ground-iron);
      border: 1px solid var(--color-circuit-border);
      overflow: hidden;
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .hm-pd-gallery-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .hm-pd-thumbs {
      display: flex;
      gap: var(--spacing-12);
  }
  .hm-pd-thumb {
      width: 80px;
      height: 60px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-circuit-border);
      cursor: pointer;
      overflow: hidden;
      background: var(--color-ground-iron);
      opacity: 0.6;
      transition: all 300ms ease-out;
  }
  .hm-pd-thumb.active, .hm-pd-thumb:hover {
      opacity: 1;
      border-color: var(--color-lime-pulse);
  }
  .hm-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
  
  /* Code Window Description */
  .hm-code-window {
      margin-top: var(--spacing-40);
      background: var(--color-ground-iron);
      border-radius: 12px;
      border: 1px solid var(--color-circuit-border);
      overflow: hidden;
  }
  .hm-code-window-top {
      height: 32px;
      background: var(--color-carbon-veil);
      border-bottom: 1px solid var(--color-circuit-border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 8px;
  }
  .hm-code-dot { width: 10px; height: 10px; border-radius: 50%; }
  .hm-code-dot.r { background: #ff5f56; }
  .hm-code-dot.y { background: #ffbd2e; }
  .hm-code-dot.g { background: #27c93f; }
  .hm-code-title {
      margin-left: auto;
      font-family: var(--font-inter-variable);
      font-size: 12px;
      color: var(--color-moss-70);
  }
  .hm-code-content {
      padding: var(--spacing-32);
      font-family: var(--font-inter-variable);
      color: var(--color-sage-60);
      line-height: 1.6;
      font-size: 16px;
  }
  .hm-code-content h1, .hm-code-content h2, .hm-code-content h3 {
      font-family: var(--font-goga);
      color: var(--color-phosphor-white);
      margin: 1.5em 0 0.5em 0;
  }
  
  /* Right Column */
  .hm-checkout-panel {
      background: var(--color-carbon-veil);
      border: 1px solid var(--color-circuit-border);
      border-radius: var(--radius-cards);
      padding: var(--spacing-32);
      position: sticky;
      top: 100px;
  }
  .hm-checkout-price {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: var(--spacing-32);
      border-bottom: 1px solid var(--color-phosphor-blue-black);
      padding-bottom: var(--spacing-24);
  }
  .hm-checkout-price .label {
      color: var(--color-sage-60);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
  }
  .hm-checkout-price .value {
      font-family: var(--font-goga);
      font-size: 48px;
      color: var(--color-phosphor-white);
  }
  
  .hm-addon-group {
      margin-bottom: var(--spacing-32);
      background: var(--color-ground-iron);
      border: 1px solid var(--color-circuit-border);
      border-radius: var(--radius-cards);
      padding: var(--spacing-20);
  }
  .hm-addon-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-16);
  }
  .hm-addon-title {
      font-family: var(--font-inter-variable);
      color: var(--color-phosphor-white);
      font-weight: 500;
  }
  /* Custom Toggle Switch */
  .hm-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
  }
  .hm-switch input { opacity: 0; width: 0; height: 0; }
  .hm-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: var(--color-void-black);
      border: 1px solid var(--color-circuit-border);
      transition: .3s;
      border-radius: 24px;
  }
  .hm-slider:before {
      position: absolute;
      content: "";
      height: 16px; width: 16px;
      left: 3px; bottom: 3px;
      background-color: var(--color-sage-60);
      transition: .3s;
      border-radius: 50%;
  }
  .hm-switch input:checked + .hm-slider {
      background-color: var(--color-lime-pulse);
      border-color: var(--color-lime-pulse);
  }
  .hm-switch input:checked + .hm-slider:before {
      background-color: var(--color-void-black);
      transform: translateX(20px);
  }
  
  .hm-slider-ui { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--color-circuit-border); }
  .hm-slider-ui.active { display: block; }
  
  .hm-range-wrap { position: relative; margin: 24px 0 16px 0; }
  .hm-range {
      -webkit-appearance: none;
      width: 100%;
      height: 4px;
      background: var(--color-phosphor-blue-black);
      border-radius: 2px;
      outline: none;
  }
  .hm-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--color-lime-pulse);
      cursor: pointer;
      box-shadow: 0 0 10px rgba(127,238,100,0.5);
  }
  .hm-range-label {
      display: flex; justify-content: space-between; color: var(--color-sage-60); font-size: 12px;
  }
  .hm-range-val { color: var(--color-phosphor-white); font-family: var(--font-mono, monospace); }
  
  .hm-cta-btn {
      width: 100%;
      background: var(--color-lime-pulse);
      color: var(--color-void-black);
      font-family: var(--font-inter-variable);
      font-weight: 500;
      font-size: 16px;
      padding: 16px 24px;
      border: none;
      border-radius: var(--radius-pills);
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      transition: all 300ms ease-out;
  }
  .hm-cta-btn:hover {
      box-shadow: 0 0 20px rgba(127,238,100,0.4);
      transform: translateY(-2px);
  }
  
  .hm-features {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }
  .hm-feature {
      display: flex; align-items: center; gap: 12px;
      color: var(--color-sage-60);
      font-size: 14px;
  }
  .hm-feature svg { width: 16px; height: 16px; fill: var(--color-moss-70); }
  
  /* Workload Cards */
  .hm-workloads {
      margin-top: 80px;
      padding-top: 80px;
      border-top: 1px solid var(--color-phosphor-blue-black);
  }
  .hm-workloads-title {
      font-family: var(--font-goga);
      font-size: var(--text-heading);
      color: var(--color-phosphor-white);
      margin-bottom: 40px;
  }
  .hm-workloads-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
  }
  .hm-workload-card {
      background: var(--color-carbon-veil);
      border-radius: var(--radius-cards);
      padding: var(--spacing-32);
  }
  .hm-workload-idx {
      font-family: var(--font-inter-variable);
      font-size: 12px;
      color: var(--color-moss-70);
      letter-spacing: 0.05em;
      margin-bottom: 16px;
      display: block;
  }
  .hm-workload-card h3 {
      font-family: var(--font-goga);
      font-size: var(--text-heading-sm);
      color: var(--color-phosphor-white);
      margin-bottom: 8px;
  }
  .hm-workload-card p {
      color: var(--color-sage-60);
      font-size: var(--text-body);
      line-height: 1.5;
  }
  
  /* Related */
  .hm-related {
      margin-top: 80px;
      padding: 80px 0;
      background: var(--color-ground-iron);
      border-top: 1px solid var(--color-circuit-border);
  }
  .hm-related-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  }
  .hm-related-card {
      background: var(--color-carbon-veil);
      border: 1px solid var(--color-circuit-border);
      border-radius: var(--radius-cards);
      padding: 16px;
      text-decoration: none;
      display: flex; flex-direction: column; gap: 12px;
      transition: all 300ms;
  }
  .hm-related-card:hover { border-color: var(--color-lime-pulse); }
  .hm-related-card img { width: 100%; border-radius: 4px; aspect-ratio: 16/9; object-fit: cover; }
  .hm-related-title { color: var(--color-phosphor-white); font-family: var(--font-inter-variable); font-weight: 500; font-size: 16px; }
  .hm-related-price { color: var(--color-moss-80); font-size: 14px; }
  
  @media(max-width: 992px) {
      .hm-pd-layout, .hm-workloads-grid, .hm-related-grid { grid-template-columns: 1fr; }
  }


/* ---- EXTRA: auth-form-styles.blade.php ---- */
/* ---- Section shell -------------------------------------------- */
  .polygamez-auth-page{background:var(--bg);color:var(--text-body);font-family:var(--font-inter-variable);overflow-x:hidden}
  .auth-section-box{position:relative;padding:64px var(--spacing-24) 120px;background:var(--bg)}

  /* ---- Console (two-column unified card) ------------------------- */
  .auth-console{display:grid;grid-template-columns:1.05fr 1fr;max-width:1000px;margin:0 auto;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 30px 80px -32px rgba(0,0,0,.75)}

  /* ---- Aside (brand panel) --------------------------------------- */
  .auth-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--spacing-32);padding:var(--spacing-48) var(--spacing-40);background:linear-gradient(165deg,var(--surface-2) 0%,var(--surface-1) 100%);border-right:1px solid var(--border-subtle)}
  .auth-aside::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,rgba(127,238,100,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(127,238,100,.05) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 20%,#000,transparent 75%);mask-image:radial-gradient(ellipse 90% 70% at 30% 20%,#000,transparent 75%)}
  .auth-aside::after{content:'';position:absolute;bottom:-25%;left:-15%;width:340px;height:340px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(127,238,100,.14),transparent 66%)}
  .auth-aside > *{position:relative;z-index:1}

  .auth-aside__bracket{position:absolute;z-index:1;width:22px;height:22px;border:2px solid var(--accent);opacity:.5}
  .auth-aside__bracket--tl{top:20px;left:20px;border-right:0;border-bottom:0}
  .auth-aside__bracket--br{bottom:20px;right:20px;border-left:0;border-top:0}

  .auth-aside__logo img{height:60px;width:auto;display:block;transition:transform .45s var(--ease-spring),filter .45s var(--ease-out)}
  .auth-aside__logo:hover img{transform:scale(1.05);filter:drop-shadow(0 0 14px rgba(127,238,100,.45))}
  .auth-aside__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-16)}
  .auth-aside__eyebrow{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.6px;text-transform:uppercase;color:var(--color-moss-70)}
  .auth-aside__title{font-family:var(--font-goga);font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm);color:var(--text-primary)}
  .auth-aside__title .accent-phrase{color:var(--accent)}
  .auth-aside__blurb{font-size:var(--text-body-sm);line-height:1.6;color:var(--color-sage-40);max-width:36ch}
  .auth-aside__perks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:var(--spacing-8)}
  .auth-aside__perks li{display:flex;align-items:center;gap:12px;font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);color:var(--text-body)}
  .auth-aside__perk-ico{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-md);background:rgba(127,238,100,.1);border:1px solid rgba(127,238,100,.25);color:var(--accent);transition:transform .3s var(--ease-out),background-color .3s var(--ease-out)}
  .auth-aside__perks li:hover .auth-aside__perk-ico{transform:translateY(-2px);background:rgba(127,238,100,.16)}
  .auth-aside__perk-ico svg{width:18px;height:18px}
  .auth-aside__status{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.4px;color:var(--color-moss-80)}
  .auth-aside__status-dot{width:8px;height:8px;border-radius:var(--radius-pills);background:var(--accent);box-shadow:0 0 8px rgba(127,238,100,.8);animation:auth-pulse 2s ease-in-out infinite}
  @keyframes auth-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}

  /* ---- Form panel (right cell) ----------------------------------- */
  .auth-form-panel{position:relative;overflow:hidden;padding:var(--spacing-48) var(--spacing-40);background:var(--surface-1)}
  .auth-form-panel h2{font-family:var(--font-goga);font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--text-primary);margin-bottom:var(--spacing-8)}
  .auth-form-panel > p{color:var(--text-muted);font-size:var(--text-body-md);margin-bottom:var(--spacing-32)}
  .auth-form-panel form{position:relative;z-index:1}

  /* ---- Fields --------------------------------------------------- */
  .auth-field{display:flex;flex-direction:column;margin-bottom:var(--spacing-20)}
  .auth-field > label{font-size:var(--text-body-sm);color:var(--text-primary);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-body-sm);margin-bottom:var(--spacing-8)}
  .auth-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--spacing-16)}

  .auth-input-wrap{position:relative;display:flex;align-items:center}
  .auth-input-wrap input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text-primary);padding:14px 16px 14px 44px;border-radius:var(--radius-inputs);font-family:var(--font-inter-variable);font-size:var(--text-body-md);letter-spacing:-.352px;transition:all var(--transition-base) var(--ease-out)}
  .auth-input-wrap input::placeholder{color:var(--text-muted)}
  .auth-input-wrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(127,238,100,.15)}
  .auth-input-wrap > svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-muted);pointer-events:none;transition:color var(--transition-base) var(--ease-out)}
  .auth-input-wrap input:focus + svg{color:var(--accent)}

  /* ---- Captcha row ---------------------------------------------- */
  .auth-captcha-row{display:flex;gap:var(--spacing-16);align-items:center;margin-bottom:var(--spacing-20)}
  .auth-captcha-row .auth-input-wrap{flex:1}
  .auth-captcha-image{flex:0 0 auto}
  .auth-captcha-image img{display:block;height:50px;width:auto;border-radius:var(--radius-inputs);border:1px solid var(--border)}

  /* ---- Options (remember / forgot) ------------------------------ */
  .auth-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:var(--spacing-24)}
  .auth-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--text-body-sm);color:var(--text-body);user-select:none}
  .auth-check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);cursor:pointer;position:relative;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
  .auth-check input:checked{background:var(--accent);border-color:var(--accent)}
  .auth-check input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--surface-void);border-width:0 2px 2px 0;transform:rotate(45deg)}
  .auth-options > a{font-size:var(--text-body-sm);color:var(--text-link);font-weight:var(--font-weight-medium);transition:color .3s var(--ease-out)}
  .auth-options > a:hover{color:var(--accent)}

  /* ---- Submit button (theme) ------------------------------------ */
  .auth-submit-btn-caldera{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;background:var(--accent);color:var(--surface-void);border:none;border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;cursor:pointer;transition:all var(--transition-base) var(--ease-out)}
  .auth-submit-btn-caldera:hover{background:#93f47a;transform:translateY(-2px)}
  .auth-submit-btn-caldera svg{width:18px;height:18px;transition:transform var(--transition-base) var(--ease-out)}
  .auth-submit-btn-caldera:hover svg{transform:translateX(3px)}

  /* ---- Switch link (bottom) ------------------------------------- */
  .auth-switch-link{margin-top:var(--spacing-24);padding-top:var(--spacing-24);border-top:1px solid var(--border-subtle);text-align:center}
  .auth-switch-link p{color:var(--text-muted);font-size:var(--text-body-sm)}
  .auth-switch-link a{color:var(--accent);font-weight:var(--font-weight-medium);transition:color .3s var(--ease-out)}
  .auth-switch-link a:hover{color:var(--text-primary)}

  /* ---- Validation messages (below the field) -------------------- */
  .auth-form-panel .text-danger,
  .auth-form-panel label.error,
  .auth-form-panel .auth-captcha-error{display:block;color:#ff5f56;font-size:var(--text-caption);font-weight:var(--font-weight-medium);letter-spacing:-.3px;margin-top:var(--spacing-8)}
  .auth-input-wrap input.error{border-color:#ff5f56}
  .auth-input-wrap input.error + svg{color:#ff5f56}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:880px){
    .auth-console{grid-template-columns:1fr;max-width:540px}
    .auth-aside{border-right:0;border-bottom:1px solid var(--border-subtle);padding:var(--spacing-36) var(--spacing-32);gap:var(--spacing-24)}
    .auth-aside__body{justify-content:flex-start}
  }
  @media (max-width:575px){
    .auth-section-box{padding:48px 16px 80px}
    .auth-form-panel{padding:var(--spacing-32) var(--spacing-24)}
    .auth-aside{padding:var(--spacing-28) var(--spacing-24)}
    .auth-aside__perks{display:none}
    .auth-aside__bracket{display:none}
    .auth-field-grid{grid-template-columns:1fr;gap:0}
    .auth-captcha-row{flex-direction:column;align-items:stretch}
    .auth-captcha-image img{width:100%;height:auto}
  }

/* ---- EXTRA: breadcrumb.blade.php ---- */
/* ---- Hero band (Theme compliant) ----- */
  .about-hero-section {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .about-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: 
      linear-gradient(to right, rgba(127, 238, 100, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(127, 238, 100, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 10%, transparent 70%);
  }

  .about-hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(127, 238, 100, 0.12) 0%, transparent 60%);
    filter: blur(50px);
  }

  .about-hero-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 100px var(--spacing-24) 80px;
    text-align: center;
  }

  .about-hero-title {
    font-family: var(--font-goga);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--text-primary);
    margin: 0;
    text-shadow: 0 0 40px rgba(127, 238, 100, 0.2);
    animation: bc-fade-up 0.7s var(--ease-out) both;
  }

  /* ---- Premium Glassmorphic Breadcrumb ---- */
  .gb-breadcrumb-nav {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: var(--spacing-8) var(--spacing-12);
    background: rgba(24, 24, 24, 0.6); /* Surface 1 with opacity */
    border: 1px solid var(--border);
    border-radius: var(--radius-pills);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: bc-fade-up 0.7s var(--ease-out) 0.1s both;
  }

  /* Link Items */
  .gb-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: 6px 14px;
    border-radius: var(--radius-pills);
    font-family: var(--font-inter-variable);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    color: var(--text-muted);
    transition: all var(--transition-base) var(--ease-out);
    position: relative;
    overflow: hidden;
  }

  .gb-breadcrumb-item:hover {
    color: var(--text-primary);
    background: rgba(127, 238, 100, 0.15);
    box-shadow: 0 0 16px rgba(127, 238, 100, 0.2);
  }

  .gb-breadcrumb-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform var(--transition-base) var(--ease-out);
  }
  
  .gb-breadcrumb-item:hover svg {
    transform: scale(1.15) translateY(-1px);
    stroke: var(--accent);
  }

  /* Separator */
  .gb-breadcrumb-sep {
    display: flex;
    align-items: center;
    color: var(--border);
  }

  .gb-breadcrumb-sep svg {
    width: 14px;
    height: 14px;
  }

  /* Current Active Item */
  .gb-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border-radius: var(--radius-pills);
    background: var(--accent);
    color: var(--surface-void);
    font-family: var(--font-inter-variable);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    box-shadow: 0 4px 15px rgba(127, 238, 100, 0.4);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }

  @keyframes bc-fade-up {
    from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @media (max-width: 640px) {
    .about-hero-wrapper { padding: 80px 20px 60px; gap: 20px; }
    .about-hero-title { font-size: var(--text-heading-lg); }
    .gb-breadcrumb-nav { padding: 6px 10px; gap: 4px; }
    .gb-breadcrumb-item, .gb-breadcrumb-current { font-size: var(--text-caption); padding: 5px 12px; }
    .gb-breadcrumb-current { max-width: 200px; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .about-hero-title, .gb-breadcrumb-nav { animation: none; }
  }

/* ---- EXTRA: order-result-styles.blade.php ---- */
/* ---- Section ---------------------------------------------------- */
  .ord-section{position:relative;padding:72px var(--spacing-24) 120px;background:var(--bg);overflow:hidden}
  .ord-section::before{content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:760px;height:460px;max-width:120%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,rgba(127,238,100,.09),transparent 64%)}
  .ord-section--fail::before{background:radial-gradient(ellipse at center,rgba(255,95,86,.08),transparent 64%)}
  .ord-wrap{position:relative;z-index:1;max-width:640px;margin:0 auto}

  /* ---- Card ------------------------------------------------------- */
  .ord-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-24);padding:var(--spacing-48) var(--spacing-40);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);text-align:center}
  .ord-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
  .ord-card--fail::before{background:linear-gradient(90deg,transparent,#ff5f56,transparent)}

  /* ---- Status badge ---------------------------------------------- */
  .ord-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pills);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.6px;text-transform:uppercase}
  .ord-badge--ok{background:rgba(127,238,100,.1);border:1px solid rgba(127,238,100,.28);color:var(--accent)}
  .ord-badge--fail{background:rgba(255,95,86,.1);border:1px solid rgba(255,95,86,.28);color:#ff5f56}
  .ord-badge__dot{width:7px;height:7px;border-radius:var(--radius-pills);background:currentColor;box-shadow:0 0 8px currentColor;animation:ord-pulse 2s ease-in-out infinite}
  @keyframes ord-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}

  /* ---- Status icon ----------------------------------------------- */
  .ord-icon{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:var(--radius-pills)}
  .ord-icon--ok{background:rgba(127,238,100,.12);border:1px solid rgba(127,238,100,.35);color:var(--accent)}
  .ord-icon--fail{background:rgba(255,95,86,.1);border:1px solid rgba(255,95,86,.35);color:#ff5f56;animation:ord-shake .5s var(--ease-out) both}
  .ord-icon svg{width:40px;height:40px}
  .ord-icon::after{content:'';position:absolute;inset:-8px;border-radius:var(--radius-pills);border:1px solid currentColor;opacity:.4;animation:ord-ring 2.4s ease-out infinite}
  .ord-icon--ok svg path{stroke-dasharray:60;stroke-dashoffset:60;animation:ord-draw .6s .18s var(--ease-out) forwards}
  @keyframes ord-draw{to{stroke-dashoffset:0}}
  @keyframes ord-ring{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.3);opacity:0}}
  @keyframes ord-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

  /* ---- Heading --------------------------------------------------- */
  .ord-title{font-family:var(--font-goga);font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--text-primary)}
  .ord-sub{max-width:44ch;font-size:var(--text-body-md);color:var(--text-muted)}

  /* ---- Copyable fields ------------------------------------------- */
  .ord-fields{width:100%;display:flex;flex-direction:column;gap:10px}
  .ord-field{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);text-align:left;transition:border-color .3s var(--ease-out)}
  .ord-field:hover{border-color:var(--border)}
  .ord-field__key{flex:0 0 auto;font-family:var(--font-inter-variable);font-size:var(--text-caption);letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
  .ord-field__right{display:flex;align-items:center;gap:10px;min-width:0}
  .ord-field__val{font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}

  .ord-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-md);background:transparent;border:1px solid var(--border);color:var(--text-body);cursor:pointer;transition:color .3s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
  .ord-copy:hover{color:var(--accent);border-color:var(--accent);background:rgba(127,238,100,.08)}
  .ord-copy svg{width:16px;height:16px}
  .ord-copy .ord-copy__done{display:none;color:var(--accent)}
  .ord-copy.is-copied{color:var(--accent);border-color:var(--accent)}
  .ord-copy.is-copied .ord-copy__ico{display:none}
  .ord-copy.is-copied .ord-copy__done{display:block}
  .ord-copy::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);padding:4px 9px;border-radius:var(--radius-md);background:var(--accent);color:var(--surface-void);font-family:var(--font-inter-variable);font-size:11px;font-weight:var(--font-weight-medium);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
  .ord-copy.is-copied::after{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---- Message + help list --------------------------------------- */
  .ord-msg{max-width:48ch}
  .ord-msg h3{font-family:var(--font-goga);font-size:var(--text-heading-sm);color:var(--text-primary);margin-bottom:var(--spacing-8)}
  .ord-msg p{color:var(--text-muted);font-size:var(--text-body-md);line-height:1.6}

  .ord-help{width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-24)}
  .ord-help__label{display:block;font-family:var(--font-inter-variable);font-size:var(--text-caption);letter-spacing:.6px;text-transform:uppercase;color:var(--color-moss-70);margin-bottom:var(--spacing-16)}
  .ord-help__label + .ord-help__label{margin-top:var(--spacing-24)}
  .ord-list{list-style:none;display:flex;flex-direction:column;gap:10px}
  .ord-list li{position:relative;padding-left:24px;font-size:var(--text-body-sm);color:var(--text-body);line-height:1.5}
  .ord-list li::before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:var(--radius-pills);background:var(--accent)}
  .ord-help p{font-size:var(--text-body-sm);color:var(--text-muted);line-height:1.6}
  .ord-help a{color:var(--accent);font-weight:var(--font-weight-medium);transition:color .3s var(--ease-out)}
  .ord-help a:hover{color:var(--text-primary)}

  /* ---- Actions --------------------------------------------------- */
  .ord-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
  .ord-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:var(--radius-buttons);font-family:var(--font-inter-variable);font-size:var(--text-body-md);font-weight:var(--font-weight-medium);letter-spacing:-.352px;text-decoration:none;cursor:pointer;transition:all var(--transition-base) var(--ease-out)}
  .ord-btn svg{width:17px;height:17px}
  .ord-btn--primary{background:var(--accent);color:var(--surface-void);border:1px solid var(--accent)}
  .ord-btn--primary:hover{background:#93f47a;transform:translateY(-2px)}
  .ord-btn--ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border)}
  .ord-btn--ghost:hover{background:rgba(72,83,70,.16);border-color:var(--color-sage-40)}

  /* ---- Responsive ------------------------------------------------ */
  @media (max-width:575px){
    .ord-section{padding:52px 20px 80px}
    .ord-card{padding:var(--spacing-32) var(--spacing-24)}
    .ord-field{flex-direction:column;align-items:flex-start;gap:10px}
    .ord-field__right{width:100%;justify-content:space-between}
    .ord-field__val{max-width:none;flex:1}
    .ord-actions{flex-direction:column}
    .ord-btn{width:100%}
  }

/* ---- EXTRA: index.blade.php ---- */
/* Base Reset */
  .hm-modern {
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--font-inter-variable);
    overflow-x: hidden;
  }
  .hm-container {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-24);
  }

  /* Badge */
  .hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(127, 238, 100, 0.08);
    border: 1px solid rgba(127, 238, 100, 0.2);
    border-radius: var(--radius-pills);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caption);
    margin-bottom: var(--spacing-24);
  }
  .hm-badge::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 2s infinite;
  }

  @keyframes pulse-dot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(127, 238, 100, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(127, 238, 100, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(127, 238, 100, 0); }
  }

  /* 1. Hero Section (Centered with Massive Cube) */
  .hm-hero {
    position: relative;
    padding: 60px 0 120px;
    background: #000000;
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
  }
  .hm-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    opacity: 0.35;
    pointer-events: none;
  }
  .hm-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, #000 85%);
    z-index: 1;
    pointer-events: none;
  }
  .hm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 70%);
  }
  .hm-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--spacing-64);
    max-width: var(--page-max-width);
    margin: 0 auto;
  }
  .hm-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .hm-hero__content h1 {
    font-family: var(--font-goga);
    font-size: clamp(44px, 5.4vw, 82px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: var(--spacing-20) 0 var(--spacing-24);
    text-shadow: 0 0 40px rgba(127, 238, 100, 0.2);
  }
  .hm-hero__accent {
    color: var(--accent);
  }
  .hm-hero__content p {
    font-size: var(--text-subheading);
    color: var(--text-lead);
    margin-bottom: var(--spacing-32);
    max-width: 48ch;
  }
  .hm-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-16);
    flex-wrap: wrap;
  }
  /* Terminal status strip beneath the CTAs (decorative system chrome) */
  .hm-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-28);
    width: 100%;
    margin-top: var(--spacing-40);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .hm-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .hm-hero__meta-item strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
  }
  .hm-hero__meta-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 2s infinite;
  }

  /* Right column — the cube framed as a live, monitored viewport */
  .hm-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .hm-hero__frame {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 50% 45%, rgba(127,238,100,0.07), transparent 60%),
      var(--surface-1);
    overflow: hidden;
  }
  .hm-hero__frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(127,238,100,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(127,238,100,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 50%, black 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 25%, transparent 78%);
  }
  .hm-hero__frame-tag {
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 4;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-eyebrow);
  }
  .hm-hero__frame-tag::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    vertical-align: middle;
    animation: pulse-dot 2s infinite;
  }

  /* Glowing Phosphor Cube — translucent shell that tumbles while it breathes */
  .hm-hero__art {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
  }
  .hm-cube-scene {
    --cube: 230px;
    position: relative;
    width: var(--cube);
    height: var(--cube);
    transform-style: preserve-3d;
  }
  /* Ambient bloom — brightens and fades in sync with the cube */
  .hm-cube-glow {
    position: absolute;
    inset: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127,238,100,0.45) 0%, rgba(127,238,100,0.12) 42%, transparent 68%);
    filter: blur(36px);
    pointer-events: none;
    animation: hm-glow-pulse 4.5s var(--ease-out) infinite;
  }
  .hm-cube {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: hm-cube-tumble 20s linear infinite;
  }
  .hm-cube__face {
    position: absolute;
    width: var(--cube);
    height: var(--cube);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    animation: hm-cube-breathe 4.5s var(--ease-out) infinite;
  }
  .hm-cube__face--front  { transform: translateZ(calc(var(--cube) / 2)); }
  .hm-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
  .hm-cube__face--right  { transform: rotateY(90deg)  translateZ(calc(var(--cube) / 2)); }
  .hm-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
  .hm-cube__face--top    { transform: rotateX(90deg)  translateZ(calc(var(--cube) / 2)); }
  .hm-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }
  @keyframes hm-cube-tumble {
    0%   { transform: rotateX(-22deg) rotateY(0deg); }
    100% { transform: rotateX(-22deg) rotateY(360deg); }
  }
  /* The glow/dim heartbeat — faces charge up then fade back */
  @keyframes hm-cube-breathe {
    0%, 100% {
      border: 1px solid rgba(127,238,100,0.28);
      background: linear-gradient(135deg, rgba(127,238,100,0.10), rgba(127,238,100,0.02));
      box-shadow: inset 0 0 30px rgba(127,238,100,0.15);
    }
    50% {
      border: 1px solid rgba(127,238,100,0.95);
      background: linear-gradient(135deg, rgba(127,238,100,0.45), rgba(127,238,100,0.13));
      box-shadow: inset 0 0 100px rgba(127,238,100,0.6), 0 0 26px rgba(127,238,100,0.35);
    }
  }
  @keyframes hm-glow-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50%      { opacity: 1;    transform: scale(1.12); }
  }
  .hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: var(--radius-buttons);
    font-family: var(--font-goga);
    font-size: var(--text-body-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--transition-base);
  }
  .hm-btn--primary {
    background: var(--accent);
    color: var(--surface-void);
    box-shadow: 0 0 20px rgba(127, 238, 100, 0.2);
  }
  .hm-btn--primary:hover {
    background: var(--accent);
    color: var(--surface-void);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(127, 238, 100, 0.55);
  }
  .hm-btn--ghost {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
  .hm-btn--ghost:hover {
    background: rgba(127, 238, 100, 0.08);
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(127, 238, 100, 0.35);
  }

  /* 2. Why Choose Us — capability modules */
  .hm-wc {
    padding: 120px 0;
    background: #101010;
    border-top: 1px solid var(--border-subtle);
  }
  .hm-section-head {
    text-align: center;
    margin-bottom: var(--spacing-64);
  }
  .hm-section-head h2 {
    font-family: var(--font-goga);
    font-size: var(--text-display);
    color: var(--text-primary);
    margin-bottom: var(--spacing-16);
  }
  .hm-section-head p {
    font-size: var(--text-subheading);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
  }

  .hm-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(210px, auto);
    gap: var(--spacing-20);
  }
  .hm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-28);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base) var(--ease-out),
                transform var(--transition-base) var(--ease-out),
                background var(--transition-base) var(--ease-out);
  }
  .hm-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    background: var(--surface-2);
    box-shadow: 0 10px 30px rgba(127,238,100,0.08);
  }
  /* Phosphor targeting brackets — consistent with the ecosystem cards */
  .hm-card::after {
    content: '';
    position: absolute;
    inset: 9px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--transition-base) var(--ease-out);
    background:
      linear-gradient(var(--accent),var(--accent)) 0 0/14px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 0 0/1px 14px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 100% 0/14px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 100% 0/1px 14px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 0 100%/14px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 0 100%/1px 14px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 100% 100%/14px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) 100% 100%/1px 14px no-repeat;
  }
  .hm-card:hover::after { opacity: 0.7; }

  /* Module header row: mono ID + status LED */
  .hm-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--text-muted);
  }
  .hm-card__led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    transition: background var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-card:hover .hm-card__led {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  .hm-card__body {
    margin-top: var(--spacing-32);
  }
  .hm-card__icon {
    width: 34px;
    height: 34px;
    color: var(--accent);
    margin-bottom: var(--spacing-20);
    fill: currentColor;
  }
  .hm-card h3 {
    font-family: var(--font-goga);
    font-size: var(--text-heading-sm);
    color: var(--text-primary);
    margin-bottom: var(--spacing-8);
  }
  .hm-card p {
    color: var(--text-muted);
    font-size: var(--text-body-sm);
  }

  /* Featured module — anchors the grid */
  .hm-card--feature {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  }
  .hm-card--feature::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: var(--accent);
    filter: blur(90px);
    opacity: 0.12;
    pointer-events: none;
  }
  .hm-card--feature .hm-card__icon { width: 48px; height: 48px; }
  .hm-card--feature h3 { font-size: var(--text-heading); }
  .hm-card--feature p { font-size: var(--text-body-md); max-width: 46ch; }

  /* Wide module — spans two columns */
  .hm-card--wide { grid-column: span 2; }

  /* 3. Carousels (Categories & Products) */
  .hm-carousels {
    padding: 100px 0;
    background: #212525;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }
  .hm-carousel-wrapper {
    margin-bottom: 80px;
  }
  .hm-carousel-wrapper:last-child {
    margin-bottom: 0;
  }
  .hm-carousel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-32);
  }
  .hm-carousel-head h2 {
    font-family: var(--font-goga);
    font-size: var(--text-heading-lg);
    color: var(--text-primary);
  }
  /* 3b. Poster carousel — shared by categories & products (landscape media) */
  .hm-poster {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color var(--transition-base) var(--ease-out),
                transform var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-poster:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(127,238,100,0.12);
  }
  .hm-poster__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.9);
    transition: transform 0.7s var(--ease-out), filter var(--transition-base) var(--ease-out);
  }
  .hm-poster:hover .hm-poster__img {
    transform: scale(1.08);
    filter: brightness(1) saturate(1.05);
  }
  /* Readability scrim */
  .hm-poster__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0) 72%);
  }
  /* Index chip */
  .hm-poster__idx {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(127,238,100,0.25);
    border-radius: var(--radius-pills);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--accent);
  }
  .hm-poster__idx::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
  /* Price badge (products) */
  .hm-poster__price {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 5px 11px;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(127,238,100,0.3);
    border-radius: var(--radius-pills);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    color: var(--accent);
  }
  /* Bottom content */
  .hm-poster__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: var(--spacing-16) var(--spacing-20);
  }
  .hm-poster__title {
    font-family: var(--font-goga);
    font-size: var(--text-subheading);
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-8);
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hm-poster__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--color-moss-70);
  }
  .hm-poster__meta strong { color: var(--accent); font-weight: var(--font-weight-medium); }
  .hm-poster__enter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--transition-base) var(--ease-out),
                transform var(--transition-base) var(--ease-out);
  }
  .hm-poster:hover .hm-poster__enter {
    opacity: 1;
    transform: translateX(0);
  }
  /* Lime scan bar grows across the base on hover */
  .hm-poster::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    width: 100%;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base) var(--ease-out);
  }
  .hm-poster:hover::after { transform: scaleX(1); }

  /* Categories carousel — new controls + drag rail */
  .hm-cnav {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
  }
  .hm-cnav-btn {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pills);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-base) var(--ease-out),
                color var(--transition-base) var(--ease-out),
                transform var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-cnav-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
  }
  /* Same glow family as every other button */
  .hm-cnav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(127, 238, 100, 0.4);
  }
  .hm-cnav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
  }
  .hm-cnav-btn.swiper-button-disabled:hover {
    border-color: var(--border);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
  }

  .hm-crail {
    position: relative;
    height: 3px;
    margin-top: var(--spacing-32);
    background: var(--border-subtle);
    border-radius: var(--radius-pills);
    cursor: grab;
  }
  .hm-crail .swiper-scrollbar-drag {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(127,238,100,0.5);
    border-radius: var(--radius-pills);
  }

  /* 3c. The SwiftRank Method — process pipeline */
  .hm-method {
    padding: 120px 0;
    background: #181818;
    border-top: 1px solid var(--border-subtle);
  }
  .hm-flow {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-24);
  }
  /* Base connecting rail, drawn between the node centers */
  .hm-flow::before {
    content: '';
    position: absolute;
    top: 29px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--border-subtle), var(--border), var(--border-subtle));
    z-index: 0;
  }
  /* A data pulse that travels down the pipeline */
  .hm-flow::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 12.5%;
    width: 64px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: var(--radius-pills);
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 14px var(--accent);
    z-index: 1;
    animation: hm-flow-pulse 4.5s var(--ease-out) infinite;
  }
  @keyframes hm-flow-pulse {
    0%   { left: 12.5%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 87.5%; opacity: 0; }
  }
  .hm-flow-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hm-flow-node {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 50%;
    margin-bottom: var(--spacing-24);
    transition: border-color var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-flow-step:hover .hm-flow-node {
    border-color: var(--accent);
    box-shadow: 0 0 22px rgba(127,238,100,0.25), inset 0 0 16px rgba(127,238,100,0.15);
  }
  .hm-flow-num {
    font-family: var(--font-mono);
    font-size: var(--text-subheading);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
  }
  .hm-flow-step h3 {
    font-family: var(--font-goga);
    font-size: var(--text-heading-sm);
    color: var(--text-primary);
    margin-bottom: var(--spacing-8);
  }
  .hm-flow-step p {
    color: var(--text-muted);
    font-size: var(--text-body-sm);
    max-width: 26ch;
  }

  /* 4. Points Top-Up — capital transfer console */
  .hm-pts {
    padding: 120px 0;
    background: #141414;
    border-top: 1px solid var(--border-subtle);
  }
  .hm-pts-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--spacing-32);
    align-items: stretch;
  }
  /* Shared panel chrome */
  .hm-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .hm-panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-20) var(--spacing-24);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .hm-panel__bar .led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 2s infinite;
  }

  /* Calculator console */
  .hm-console__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: var(--accent);
    filter: blur(90px);
    opacity: 0.12;
    pointer-events: none;
  }
  .hm-console__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    padding: var(--spacing-32);
  }
  .hm-console__amount label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--spacing-12);
  }
  .hm-amount-input {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px 18px;
    transition: border-color var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-amount-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(127,238,100,0.12);
  }
  .hm-amount-input .cur {
    font-family: var(--font-mono);
    font-size: var(--text-heading-sm);
    color: var(--text-muted);
  }
  .hm-amount-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-goga);
    font-size: var(--text-heading-sm);
    padding: 14px 10px;
  }

  /* Big total readout */
  .hm-total {
    position: relative;
    background:
      radial-gradient(circle at 100% 0%, rgba(127,238,100,0.10), transparent 55%),
      var(--bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-24) var(--spacing-28);
  }
  .hm-total__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-8);
  }
  .hm-total__label {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .hm-mult-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pills);
    background: rgba(127,238,100,0.1);
    border: 1px solid rgba(127,238,100,0.3);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--accent);
  }
  .hm-total__value {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--accent);
    font-family: var(--font-goga);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 0 30px rgba(127,238,100,0.35);
  }
  .hm-total__unit {
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-8);
  }

  /* Base + bonus stat tiles */
  .hm-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
  }
  .hm-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-16) var(--spacing-20);
  }
  .hm-stat__label {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--spacing-8);
  }
  .hm-stat__value {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: var(--text-heading-sm);
    color: var(--text-primary);
  }
  .hm-stat--bonus .hm-stat__value { color: var(--accent); }

  .hm-authorize {
    width: 100%;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    background: var(--accent);
    color: var(--surface-void);
    border: none;
    border-radius: var(--radius-buttons);
    font-family: var(--font-goga);
    font-size: var(--text-subheading);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    box-shadow: 0 0 24px rgba(127,238,100,0.25);
    transition: background var(--transition-base) var(--ease-out),
                transform var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-authorize svg { fill: currentColor; }
  .hm-authorize:hover {
    background: var(--accent);
    color: var(--surface-void);
    transform: translateY(-2px);
    box-shadow: 0 0 34px rgba(127,238,100,0.55);
  }

  /* Tier ladder */
  .hm-tiers__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    padding: var(--spacing-16);
  }
  .hm-tier {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-16);
    padding: var(--spacing-16) var(--spacing-20);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base) var(--ease-out),
                background var(--transition-base) var(--ease-out),
                transform var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-tier__mult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-body-md);
    color: var(--text-primary);
    transition: background var(--transition-base) var(--ease-out),
                color var(--transition-base) var(--ease-out),
                border-color var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
  }
  .hm-tier__range {
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
    color: var(--text-primary);
  }
  .hm-tier__benefit {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
  }
  .hm-tier.is-active {
    border-color: var(--accent);
    background: linear-gradient(90deg, rgba(127,238,100,0.09), transparent);
    transform: translateX(4px);
    box-shadow: 0 0 22px rgba(127,238,100,0.1);
  }
  .hm-tier.is-active .hm-tier__mult {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface-void);
    box-shadow: 0 0 14px rgba(127,238,100,0.4);
  }
  .hm-tier.is-active .hm-tier__benefit { color: var(--accent); }
  .hm-tiers__note {
    padding: var(--spacing-8) var(--spacing-16) var(--spacing-4);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: 1.4;
    color: var(--text-micro);
  }
  
  @media (max-width: 992px) {
    .hm-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(190px, auto); }
    .hm-card--feature { grid-column: span 2; grid-row: auto; }
    .hm-card--wide { grid-column: span 2; }
    .hm-pts-grid { grid-template-columns: 1fr; }
    .hm-flow { grid-template-columns: 1fr 1fr; gap: var(--spacing-40); }
    .hm-flow::before,
    .hm-flow::after { display: none; }
    .hm-hero__inner { grid-template-columns: 1fr; gap: var(--spacing-48); }
    .hm-hero__content { align-items: center; text-align: center; }
    .hm-hero__content p { margin-inline: auto; }
    .hm-hero__actions,
    .hm-hero__meta { justify-content: center; }
    .hm-hero__visual { order: -1; }
  }
  @media (max-width: 768px) {
    .hm-bento { grid-template-columns: 1fr; }
    .hm-card--feature,
    .hm-card--wide { grid-column: span 1; }
    .hm-flow { grid-template-columns: 1fr; }
    .hm-hero { padding: 130px 0 80px; }
    .hm-hero__content h1 { font-size: clamp(38px, 9vw, 58px); }
    .hm-hero__meta { gap: var(--spacing-20); }
    .hm-hero__frame { max-width: 320px; }
    .hm-cube-scene { --cube: 150px; }
  }

/* ---- EXTRA: dashboard.blade.php ---- */
/* Dashboard Container & Grid */
.hm-db-container { max-width: var(--page-max-width, 1280px); margin: 0 auto; padding: 64px 24px 120px; }
.hm-db-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }

/* Dashboard Cards with Hover Effects */
.hm-db-card { 
    background: linear-gradient(145deg, var(--color-carbon-veil, #212525) 0%, rgba(33, 37, 37, 0.6) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-circuit-border, #485346); 
    border-radius: var(--radius-cards, 8px); 
    padding: 32px 24px; 
    position: relative; 
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hm-db-card:hover {
    border-color: rgba(127, 238, 100, 0.3);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(127,238,100,0.03);
    transform: translateY(-4px);
}

/* Avatar Pulse Animation */
@keyframes avatar-pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 238, 100, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(127, 238, 100, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 238, 100, 0); } }
.hm-db-avatar-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--color-phosphor-blue-black, #1f2a33); }
.hm-db-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-lime-pulse, #7fee64); color: var(--color-void-black, #000000); display: flex; align-items: center; justify-content: center; font-family: var(--font-goga); font-size: 24px; font-weight: 500; animation: avatar-pulse 2s infinite; }
.hm-db-user h3 { font-family: var(--font-goga); font-size: 20px; color: var(--color-phosphor-white); margin-bottom: 4px; line-height: 1.1; }
.hm-db-user p { color: var(--color-sage-60); font-size: 14px; font-family: var(--font-inter-variable); margin: 0; }

/* Nav Buttons */
.hm-db-nav { display: flex; flex-direction: column; gap: 8px; }
.hm-db-nav-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--color-sage-60); font-family: var(--font-inter-variable); font-size: 15px; cursor: pointer; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); width: 100%; text-align: left; text-decoration: none; position: relative; overflow: hidden; z-index: 1; }
.hm-db-nav-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(127,238,100,0.05) 0%, transparent 100%); opacity: 0; transition: opacity 300ms; z-index: -1; }
.hm-db-nav-btn:hover { color: var(--color-phosphor-white); transform: translateX(6px); }
.hm-db-nav-btn:hover::before { opacity: 1; }
.hm-db-nav-btn.active { background: var(--color-ground-iron); border-color: var(--color-circuit-border); color: var(--color-lime-pulse); box-shadow: inset 3px 0 0 var(--color-lime-pulse); transform: none; }
.hm-db-nav-btn.active::before { display: none; }
.hm-db-nav-btn svg { opacity: 0.8; position: relative; transition: transform 300ms; }
.hm-db-nav-btn:hover svg { transform: scale(1.1); }
.hm-db-nav-btn.active svg { opacity: 1; transform: scale(1.1); }

/* Panels Fade-in */
.hm-db-tab { display: none; animation: hm-fade-in 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; transform: translateY(15px); }
.hm-db-tab.active { display: block; }
@keyframes hm-fade-in { to { opacity: 1; transform: translateY(0); } }

/* Headings */
.hm-db-heading { font-family: var(--font-goga); font-size: 28px; color: var(--color-phosphor-white); margin-bottom: 32px; margin-top: 0; display: flex; align-items: center; gap: 12px; }
@keyframes heading-pulse { 0% { opacity: 0.5; box-shadow: 0 0 5px rgba(127,238,100,0.3); } 50% { opacity: 1; box-shadow: 0 0 15px rgba(127,238,100,0.8); } 100% { opacity: 0.5; box-shadow: 0 0 5px rgba(127,238,100,0.3); } }
.hm-db-heading::before { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--color-lime-pulse); animation: heading-pulse 2s infinite; }

/* Forms */
.hm-db-form-row { margin-bottom: 24px; position: relative; }
.hm-db-form-row label { display: block; font-family: var(--font-inter-variable); font-size: 14px; color: var(--color-sage-60); margin-bottom: 8px; transition: color 200ms; }
.hm-db-form-row:focus-within label { color: var(--color-lime-pulse); }
.hm-db-form-row label.error { color: #ff5f56; font-size: 13px; margin-top: 6px; }
.hm-db-input-wrap { position: relative; }
.hm-db-input-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-moss-70); transition: color 200ms; }
.hm-db-form-row:focus-within .hm-db-input-wrap i { color: var(--color-lime-pulse); }
.hm-db-input { width: 100%; background: rgba(24,24,24,0.6); border: 1px solid var(--color-circuit-border); border-radius: 6px; padding: 14px 16px 14px 44px; color: var(--color-phosphor-white); font-family: var(--font-inter-variable); font-size: 15px; transition: all 300ms; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
.hm-db-input:focus { outline: none; border-color: var(--color-lime-pulse); background: var(--color-ground-iron); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 0 3px rgba(127,238,100,0.15); }
.hm-db-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--color-lime-pulse); color: var(--color-void-black); font-family: var(--font-inter-variable); font-weight: 500; font-size: 15px; padding: 14px 28px; border: none; border-radius: var(--radius-pills, 9999px); cursor: pointer; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.hm-db-btn::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(rgba(255,255,255,0.2), transparent); transform: rotate(45deg); opacity: 0; transition: opacity 300ms; pointer-events: none; }
.hm-db-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(127,238,100,0.4); }
.hm-db-btn:hover::after { opacity: 1; }

/* Tables */
.hm-db-table-wrap { background: var(--color-carbon-veil); border: 1px solid var(--color-circuit-border); border-radius: var(--radius-cards); overflow-x: auto; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
.hm-db-table { width: 100%; border-collapse: collapse; text-align: left; font-family: var(--font-inter-variable); }
.hm-db-table th { background: rgba(24,24,24,0.8); padding: 16px 24px; font-size: 13px; text-transform: uppercase; color: var(--color-moss-70); letter-spacing: 0.05em; border-bottom: 1px solid var(--color-circuit-border); font-weight: 500; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(5px); }
.hm-db-table td { padding: 20px 24px; border-bottom: 1px solid var(--color-phosphor-blue-black); color: var(--color-sage-60); font-size: 15px; vertical-align: middle; transition: all 300ms; position: relative; z-index: 1; }
.hm-db-table tr { transition: transform 200ms; }
.hm-db-table tr:last-child td { border-bottom: none; }
.hm-db-table tr:hover td { background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 100%); color: var(--color-phosphor-white); }
.hm-db-table tr:hover td:first-child { padding-left: 28px; }

/* Badges */
.hm-db-badge { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500; text-transform: uppercase; border: 1px solid transparent; transition: all 300ms; }
.hm-db-badge.completed, .hm-db-badge.delivered { color: var(--color-lime-pulse); border-color: rgba(127,238,100,0.3); background: rgba(127,238,100,0.1); }
.hm-db-badge.pending, .hm-db-badge.processing { color: #ffbd2e; border-color: rgba(255,189,46,0.3); background: rgba(255,189,46,0.1); }
.hm-db-badge.canceled, .hm-db-badge.failed { color: #ff5f56; border-color: rgba(255,95,86,0.3); background: rgba(255,95,86,0.1); }
.hm-db-table tr:hover .hm-db-badge.completed { box-shadow: 0 0 10px rgba(127,238,100,0.2); }
.hm-db-table tr:hover .hm-db-badge.pending { box-shadow: 0 0 10px rgba(255,189,46,0.2); }
.hm-db-table tr:hover .hm-db-badge.canceled { box-shadow: 0 0 10px rgba(255,95,86,0.2); }

@media(max-width: 992px) {
    .hm-db-layout { grid-template-columns: 1fr; }
    .hm-db-card:hover { transform: none; box-shadow: none; }
}

/* ---- EXTRA: show.blade.php ---- */
.hm-od-container { max-width: 800px; margin: 0 auto; padding: 64px 24px 120px; }
.hm-od-card { background: var(--color-carbon-veil, #212525); border: 1px solid var(--color-circuit-border, #485346); border-radius: var(--radius-cards, 8px); padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.hm-od-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--color-circuit-border, #485346); }
.hm-od-head h2 { font-family: var(--font-goga); font-size: 28px; color: var(--color-phosphor-white, #ddffdc); display: flex; align-items: center; gap: 12px; margin: 0; }
.hm-od-head h2 svg { width: 24px; color: var(--color-lime-pulse, #7fee64); }
.hm-od-actions { display: flex; gap: 12px; }
.hm-od-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-inter-variable); font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 9999px; text-decoration: none; transition: all 200ms; cursor: pointer; }
.hm-od-btn.primary { background: var(--color-lime-pulse, #7fee64); color: var(--color-void-black, #000000); }
.hm-od-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(127,238,100,0.3); }
.hm-od-btn.ghost { background: transparent; color: var(--color-sage-60, #8cab87); border: 1px solid var(--color-circuit-border, #485346); }
.hm-od-btn.ghost:hover { border-color: var(--color-phosphor-white, #ddffdc); color: var(--color-phosphor-white, #ddffdc); }
.hm-od-btn svg { width: 14px; }

.hm-od-summary { display: flex; justify-content: space-between; background: var(--color-ground-iron, #181818); border-radius: var(--radius-md, 4px); padding: 24px; margin-bottom: 40px; border: 1px solid var(--color-circuit-border, #485346); }
.hm-od-sum-col { display: flex; flex-direction: column; gap: 8px; }
.hm-od-sum-col.right { text-align: right; align-items: flex-end; }
.hm-od-sum-lbl { color: var(--color-moss-70, #9cbf93); font-family: var(--font-inter-variable); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.hm-od-sum-val { font-family: var(--font-goga); color: var(--color-phosphor-white, #ddffdc); font-size: 24px; }
.hm-od-sum-date { color: var(--color-sage-60, #8cab87); font-size: 14px; }

.hm-od-info-title { font-family: var(--font-goga); font-size: 20px; color: var(--color-phosphor-white, #ddffdc); margin-bottom: 24px; }
.hm-od-info { display: flex; flex-direction: column; gap: 16px; }
.hm-od-info-row { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px dashed var(--color-phosphor-blue-black, #1f2a33); }
.hm-od-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.hm-od-info-row .k { color: var(--color-sage-60, #8cab87); font-size: 15px; font-family: var(--font-inter-variable); }
.hm-od-info-row .v { color: var(--color-phosphor-white, #ddffdc); font-weight: 500; font-size: 15px; font-family: var(--font-inter-variable); }

/* Badges */
.hm-db-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500; font-family: var(--font-inter-variable); text-transform: uppercase; border: 1px solid transparent; letter-spacing: 0.05em; }
.hm-db-badge.completed, .hm-db-badge.delivered { color: var(--color-lime-pulse, #7fee64); border-color: rgba(127,238,100,0.3); background: rgba(127,238,100,0.1); }
.hm-db-badge.pending, .hm-db-badge.processing { color: #ffbd2e; border-color: rgba(255,189,46,0.3); background: rgba(255,189,46,0.1); }
.hm-db-badge.canceled, .hm-db-badge.failed { color: #ff5f56; border-color: rgba(255,95,86,0.3); background: rgba(255,95,86,0.1); }

@media(max-width: 640px) {
    .hm-od-head, .hm-od-summary { flex-direction: column; align-items: flex-start; gap: 24px; }
    .hm-od-sum-col.right { text-align: left; align-items: flex-start; }
    .hm-od-actions { flex-direction: column; width: 100%; }
    .hm-od-actions a { width: 100%; justify-content: center; }
    .hm-od-card { padding: 24px; }
}