/* ============================================================
   AntiSpy Phone — Colors & Type
   Dark, monochrome, calm. Black-first, typography-first.
   Champagne gold is atmospheric (barely there). Muted deep emerald
   is reserved for trust / protected states. No blue accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@200;300;400;500;600;700&family=Geist+Mono:wght@300;400;500&display=swap');

/* ----- Noto Serif JP — brand font for editorial moments and Japanese content -----
   Used sparingly: pull quotes, secondary hero lines, Japanese place / company names.
   The serif provides a Tokyo-origin editorial weight that pure sans cannot.
----- */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/NotoSerifJP-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/NotoSerifJP-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/NotoSerifJP-Bold.ttf') format('truetype');
}

:root {
  /* ----- Surfaces (deep black → graphite) ----- */
  --as-obsidian:   #07090C;   /* deepest background, page void */
  --as-ink:        #0B0E12;   /* default page background */
  --as-graphite-1: #0F141A;   /* canvas */
  --as-graphite-2: #161C24;   /* raised surface, section bg */
  --as-graphite-3: #1D242D;   /* cards, panels */
  --as-graphite-4: #262E38;   /* hover surface */
  --as-hairline:   #2B333D;   /* 1px borders */
  --as-hairline-strong: #3A434E;

  /* Glass panels (use with backdrop-filter: blur(20px) saturate(140%)) */
  --as-glass:      rgba(22, 28, 36, 0.62);
  --as-glass-edge: rgba(255, 255, 255, 0.06);
  --as-glass-edge-strong: rgba(255, 255, 255, 0.10);

  /* ----- Liquid Glass — ambient layer (subtle, ~10% of UI) -----
     A LIGHTER cousin of `.as-pane`, for surfaces that should feel
     environmental, not decorative: sticky header, chips, AI summary,
     atmosphere widgets, modal overlays. If users consciously notice
     the glass, it has gone too far — reduce alpha and blur. Never use
     on hero, pricing, comparison tables, or full-page backgrounds. */
  --as-liquid-tint:        rgba(22, 28, 36, 0.46);   /* default ambient surface */
  --as-liquid-tint-soft:   rgba(28, 34, 42, 0.34);   /* even quieter, for chips */
  --as-liquid-tint-modal:  rgba(15, 20, 26, 0.58);   /* slightly more opaque */
  --as-liquid-edge:        rgba(255, 255, 255, 0.04); /* almost invisible border */
  --as-liquid-edge-strong: rgba(255, 255, 255, 0.07); /* still very quiet */
  --as-liquid-top:         rgba(255, 255, 255, 0.09); /* soft top-edge highlight */
  --as-liquid-top-soft:    rgba(255, 255, 255, 0.06); /* for chips */
  --as-liquid-scrim:       rgba(7, 9, 12, 0.46);     /* modal scrim, calm */
  --as-liquid-blur:        14px;                      /* default ambient blur */
  --as-liquid-blur-sticky: 16px;                      /* sticky header */
  --as-liquid-blur-chip:   10px;                      /* chips & badges */
  --as-liquid-sat:         118%;                      /* very low saturation push */

  /* ----- Foreground (warm white → muted gray scale) -----
     Slightly warm to match Apple's text-on-dark rendering. Cool blues are avoided. */
  --as-platinum:    #EFEEEA;  /* warm white — primary text, headlines on dark */
  --as-platinum-2:  #C6C4BE;  /* body text */
  --as-platinum-3:  #8E8E89;  /* tertiary, captions, metadata */
  --as-platinum-4:  #5D5D58;  /* muted, disabled */
  --as-steel:       #3F4144;  /* deeply muted, separators on dark */

  /* ----- Brand accents (used sparingly — atmospheric, never decorative) ----- */
  --as-champagne:     #C8A765;  /* primary atmospheric accent — muted, never bright */
  --as-champagne-2:   #B0904F;  /* hover / pressed */
  --as-champagne-3:   #7C6638;  /* deep, used on light overlays */
  --as-champagne-soft:rgba(200, 167, 101, 0.10);  /* tint backgrounds (subtle) */

  /* Warm-charcoal "second neutral" — replaces the old cyber-blue accent.
     This is intentionally a NON-COLOR: a slightly warmer graphite that reads
     as material, not as a signal. Use it for chips, edition marks on dark cards,
     anywhere the previous palette would have reached for blue. */
  --as-charcoal:      #525A63;  /* warm charcoal, on dark surface */
  --as-charcoal-2:    #3D444B;  /* deeper */
  --as-charcoal-soft: rgba(82, 90, 99, 0.18);

  /* ----- Trust / protected states — muted deep emerald ----- */
  --as-emerald:       #4A8C6D;  /* muted deep emerald — verified, protected, calm */
  --as-emerald-2:     #5FA486;  /* hover */
  --as-emerald-text:  #8CC1A8;  /* on dark, with sufficient contrast */
  --as-emerald-soft:  rgba(74, 140, 109, 0.12);

  /* Back-compat aliases (kept so older preview cards / Chip tones keep working).
     New work should reach for --as-emerald* and --as-charcoal*. */
  --as-verified:      var(--as-emerald);
  --as-verified-soft: var(--as-emerald-soft);
  --as-cyber:         var(--as-charcoal);     /* DEPRECATED — warm charcoal now */
  --as-cyber-2:       var(--as-charcoal-2);
  --as-cyber-deep:    var(--as-charcoal-2);
  --as-cyber-soft:    var(--as-charcoal-soft);

  --as-warning:       #B89456;  /* attention — deeper, less alarming */
  --as-warning-soft:  rgba(184, 148, 86, 0.12);
  --as-alert:         #B86B57;  /* warm coral — never pure red */
  --as-alert-soft:    rgba(184, 107, 87, 0.12);

  /* ----- Elevation / shadow ----- */
  --as-shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset,
                 0 1px 2px rgba(0,0,0,0.40);
  --as-shadow-2: 0 1px 0 0 rgba(255,255,255,0.05) inset,
                 0 8px 24px -8px rgba(0,0,0,0.55);
  --as-shadow-3: 0 1px 0 0 rgba(255,255,255,0.06) inset,
                 0 24px 60px -12px rgba(0,0,0,0.70);
  --as-shadow-glow-gold: 0 0 0 1px rgba(200,167,101,0.22),
                         0 12px 40px -16px rgba(200,167,101,0.20);
  /* Charcoal glow replaces cyber glow — a near-monochrome highlight */
  --as-shadow-glow-charcoal: 0 0 0 1px rgba(255,255,255,0.06),
                             0 12px 40px -12px rgba(0,0,0,0.55);
  --as-shadow-glow-cyber: var(--as-shadow-glow-charcoal); /* deprecated alias */

  /* ----- Radii ----- */
  --as-radius-xs: 4px;
  --as-radius-sm: 8px;
  --as-radius-md: 12px;
  --as-radius-lg: 16px;
  --as-radius-xl: 24px;
  --as-radius-pill: 999px;

  /* ----- Spacing scale (4px base) ----- */
  --as-space-1: 4px;
  --as-space-2: 8px;
  --as-space-3: 12px;
  --as-space-4: 16px;
  --as-space-5: 24px;
  --as-space-6: 32px;
  --as-space-7: 48px;
  --as-space-8: 64px;
  --as-space-9: 96px;
  --as-space-10: 128px;

  /* ----- Type stack ----- */
  --as-font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont,
                   'Helvetica Neue', Helvetica, Arial, sans-serif;
  --as-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --as-font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'YuMincho',
                   'Times New Roman', Georgia, serif;

  /* ----- Type scale (cinematic display, light weights, very tight tracking) -----
     Cinematic hero typography: weight 300 default, weight 200 for biggest sizes.
     Geist at light weights has the same architectural feel as Apple SF UltraThin,
     Ledger's Inter Display Thin, and Nothing's display.
  ----- */
  --as-display-xl-size: 144px; --as-display-xl-lh: 0.96; --as-display-xl-tr: -0.045em;
  --as-display-l-size:  112px; --as-display-l-lh:  0.98; --as-display-l-tr:  -0.040em;
  --as-display-m-size:  80px;  --as-display-m-lh:  1.00; --as-display-m-tr:  -0.035em;

  --as-h1-size: 56px; --as-h1-lh: 1.05; --as-h1-tr: -0.030em;
  --as-h2-size: 40px; --as-h2-lh: 1.12; --as-h2-tr: -0.025em;
  --as-h3-size: 26px; --as-h3-lh: 1.22; --as-h3-tr: -0.020em;
  --as-h4-size: 18px; --as-h4-lh: 1.35; --as-h4-tr: -0.010em;

  --as-body-l-size: 18px; --as-body-l-lh: 1.60;
  --as-body-size:   15px; --as-body-lh:   1.65;
  --as-body-s-size: 13px; --as-body-s-lh: 1.55;
  --as-caption-size:12px; --as-caption-lh:1.4;
  --as-overline-size:11px; --as-overline-lh:1.2; --as-overline-tr:0.24em;

  --as-mono-size: 12px;   --as-mono-lh: 1.5;

  /* ----- Layout ----- */
  --as-page-max: 1280px;
  --as-content-max: 880px;
  --as-gutter-desktop: 32px;
  --as-gutter-tablet:  24px;
  --as-gutter-mobile:  16px;

  /* ----- Motion — slow, cinematic, luxury hardware reveal ----- */
  --as-ease-standard: cubic-bezier(0.32, 0.72, 0.18, 1);   /* default */
  --as-ease-out:      cubic-bezier(0.16, 0.84, 0.32, 1);   /* enter */
  --as-ease-in:       cubic-bezier(0.55, 0.05, 0.7, 0.2);  /* exit */
  --as-ease-cine:     cubic-bezier(0.20, 0.80, 0.20, 1.0); /* cinematic — Apple keynote */
  --as-dur-instant: 80ms;
  --as-dur-fast:    180ms;
  --as-dur-base:    280ms;
  --as-dur-slow:    520ms;
  --as-dur-cine:    900ms;   /* cinematic reveals */
  --as-dur-hero:    1400ms;  /* hero device drop-in */
  --as-dur-sweep:   2400ms;  /* light sweep over a vitrine */
}

/* ============================================================
   Semantic type classes
   ============================================================ */

.as-display-xl, .as-display-l, .as-display-m,
.as-h1, .as-h2, .as-h3, .as-h4 {
  font-family: var(--as-font-sans);
  color: var(--as-platinum);
  text-wrap: balance;
  margin: 0;
}

.as-display-xl { font-size: var(--as-display-xl-size); line-height: var(--as-display-xl-lh); letter-spacing: var(--as-display-xl-tr); font-weight: 200; }
.as-display-l  { font-size: var(--as-display-l-size);  line-height: var(--as-display-l-lh);  letter-spacing: var(--as-display-l-tr);  font-weight: 200; }
.as-display-m  { font-size: var(--as-display-m-size);  line-height: var(--as-display-m-lh);  letter-spacing: var(--as-display-m-tr);  font-weight: 300; }

.as-h1 { font-size: var(--as-h1-size); line-height: var(--as-h1-lh); letter-spacing: var(--as-h1-tr); font-weight: 300; }
.as-h2 { font-size: var(--as-h2-size); line-height: var(--as-h2-lh); letter-spacing: var(--as-h2-tr); font-weight: 300; }
.as-h3 { font-size: var(--as-h3-size); line-height: var(--as-h3-lh); letter-spacing: var(--as-h3-tr); font-weight: 400; }
.as-h4 { font-size: var(--as-h4-size); line-height: var(--as-h4-lh); letter-spacing: var(--as-h4-tr); font-weight: 500; }

.as-body-l   { font-family: var(--as-font-sans); font-size: var(--as-body-l-size); line-height: var(--as-body-l-lh); color: var(--as-platinum-2); text-wrap: pretty; }
.as-body     { font-family: var(--as-font-sans); font-size: var(--as-body-size);   line-height: var(--as-body-lh);   color: var(--as-platinum-2); text-wrap: pretty; }
.as-body-s   { font-family: var(--as-font-sans); font-size: var(--as-body-s-size); line-height: var(--as-body-s-lh); color: var(--as-platinum-3); }
.as-caption  { font-family: var(--as-font-sans); font-size: var(--as-caption-size); line-height: var(--as-caption-lh); color: var(--as-platinum-3); }

.as-overline {
  font-family: var(--as-font-mono);
  font-size: var(--as-overline-size);
  line-height: var(--as-overline-lh);
  letter-spacing: var(--as-overline-tr);
  text-transform: uppercase;
  color: var(--as-champagne);
  font-weight: 500;
}

.as-mono {
  font-family: var(--as-font-mono);
  font-size: var(--as-mono-size);
  line-height: var(--as-mono-lh);
  color: var(--as-platinum-2);
  font-feature-settings: 'tnum' on;
}

.as-mono-label {
  font-family: var(--as-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--as-platinum-3);
}

/* ----- Editorial serif — Noto Serif JP -----
   Reserved for luxury editorial moments and Japanese content. Use sparingly:
   one or two moments per page, never as body, never as UI labels.
----- */
.as-serif {
  font-family: var(--as-font-serif);
  font-weight: 500;
  color: var(--as-platinum);
  font-feature-settings: 'palt' on;
}
.as-serif-display {
  font-family: var(--as-font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--as-platinum);
  text-wrap: balance;
}
.as-serif-display-lg { font-size: 64px; line-height: 1.20; font-weight: 500; }
.as-serif-display-md { font-size: 44px; line-height: 1.25; font-weight: 500; }
.as-serif-display-sm { font-size: 28px; line-height: 1.40; font-weight: 600; }

/* Editorial pull-quote — drop cap on Latin, balanced for mixed CJK */
.as-pullquote {
  font-family: var(--as-font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--as-platinum);
  text-wrap: balance;
}
.as-pullquote .lead {
  color: var(--as-champagne);
  font-weight: 600;
  margin-right: 4px;
}

/* Japanese-only utility — best legibility with proportional alt-width */
.as-jp {
  font-family: var(--as-font-serif);
  font-feature-settings: 'palt' on, 'pkna' on;
}

/* JP price typography — handle CJK gracefully (¥ + tabular nums) */
.as-price {
  font-family: var(--as-font-sans);
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--as-platinum);
}
.as-price-strike { color: var(--as-platinum-4); text-decoration: line-through; font-weight: 400; }

/* Utility: champagne gradient text for hero accents */
.as-text-champagne {
  background: linear-gradient(180deg, #DEC692 0%, #B0904F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.as-text-platinum {
  background: linear-gradient(180deg, #F5F7FA 0%, #B6BEC6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ============================================================
   Base — applied to body when this CSS is loaded
   ============================================================ */
html, body {
  background: var(--as-ink);
  color: var(--as-platinum-2);
  font-family: var(--as-font-sans);
  font-size: var(--as-body-size);
  line-height: var(--as-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--as-champagne-soft); color: var(--as-platinum); }

/* ============================================================
   Luxury hardware surface utilities
   The vocabulary that separates AntiSpy from "premium SaaS":
   vitrine staging, reflective floor, light sweep, edge brackets,
   layered glass compartments.
   ============================================================ */

/* Vitrine — the product display box. Single overhead light, soft side spill,
   deep obsidian falloff. Use behind product renders, hero, PDP. */
.as-vitrine {
  position: relative;
  background:
    radial-gradient(1200px 480px at 50% -10%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(200,167,101,0.04), transparent 60%),
    radial-gradient(700px 420px at 20% 90%, rgba(214,187,126,0.05), transparent 70%),
    linear-gradient(180deg, #0F141A 0%, #07090C 70%, #050709 100%);
  overflow: hidden;
  isolation: isolate;
}

/* The reflective floor under a product render. Place at the bottom of a vitrine,
   apply the product image again with `transform: scaleY(-1)` and `mask` to fade. */
.as-vitrine-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0.40) 100%),
    radial-gradient(60% 100% at 50% 0%, rgba(214,187,126,0.05), transparent 60%);
  pointer-events: none;
}
.as-vitrine-floor::before {
  /* horizon line — where product sits */
  content: '';
  position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* Reflection helper — for a real reflection beneath an image/render */
.as-reflect {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 70%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 70%);
  transform: scaleY(-1);
  opacity: 0.55;
  filter: blur(0.4px);
}

/* Light sweep — a diagonal highlight that travels across a card.
   Apply to the parent; use `:hover` to trigger via the animation. */
.as-light-sweep { position: relative; overflow: hidden; }
.as-light-sweep::after {
  content: ''; position: absolute; inset: -40% -20%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,0.07) 48%,
    rgba(234,212,158,0.12) 50%,
    rgba(255,255,255,0.07) 52%,
    transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--as-dur-sweep) var(--as-ease-cine);
  pointer-events: none;
}
.as-light-sweep:hover::after,
.as-light-sweep.is-active::after { transform: translateX(120%); }

/* Constant slow ambient sweep (for hero stage), keyframed */
@keyframes as-sweep-ambient {
  0%   { transform: translateX(-130%) rotate(0deg); }
  60%  { transform: translateX(130%) rotate(0deg); }
  100% { transform: translateX(130%) rotate(0deg); }
}
.as-sweep-ambient::after {
  content: ''; position: absolute; inset: -30% -20%;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,0.04) 49%,
    rgba(234,212,158,0.08) 50%,
    rgba(255,255,255,0.04) 51%,
    transparent 60%);
  animation: as-sweep-ambient 14s var(--as-ease-cine) infinite;
  pointer-events: none;
}

/* Edge brackets — gold L-shaped corner marks, like a vitrine frame
   or camera viewfinder. Use `data-bracket` on a positioned card. */
.as-brackets { position: relative; }
.as-brackets::before,
.as-brackets::after,
.as-brackets > .as-bracket-bl,
.as-brackets > .as-bracket-br {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--as-champagne);
  opacity: 0.55;
  transition: opacity var(--as-dur-base) var(--as-ease-standard);
}
.as-brackets::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.as-brackets::after  { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.as-brackets > .as-bracket-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.as-brackets > .as-bracket-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.as-brackets:hover::before,
.as-brackets:hover::after,
.as-brackets:hover > .as-bracket-bl,
.as-brackets:hover > .as-bracket-br { opacity: 1; }

/* Layered glass — two/three frosted panes stacked back, like compartments */
.as-layer { position: relative; }
.as-layer > .as-layer-back,
.as-layer > .as-layer-mid {
  position: absolute; inset: 0;
  background: var(--as-glass);
  border: 1px solid var(--as-glass-edge);
  border-radius: inherit;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.as-layer > .as-layer-back { transform: translate(14px, 14px); opacity: 0.55; }
.as-layer > .as-layer-mid  { transform: translate(8px, 8px);  opacity: 0.75; }

/* Glass pane — single use, with the signature top-edge highlight */
.as-pane {
  position: relative;
  background: var(--as-glass);
  border: 1px solid var(--as-glass-edge-strong);
  border-radius: var(--as-radius-lg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.as-pane::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  border-radius: inherit;
}

/* ============================================================
   Liquid Glass — ambient layer
   A SUBTLE, lighter cousin of `.as-pane`. Used for:
     · sticky header   (.as-liquid.as-liquid-sticky)
     · chips & badges  (.as-liquid.as-liquid-chip)
     · AI summary      (.as-liquid.as-liquid-panel)
     · atmosphere widgets
     · modal overlays  (.as-liquid.as-liquid-modal)
   NEVER use on hero, pricing, comparison tables, or page bg.
   Glass ratio target: 90% solid material / 10% ambient glass.
   ============================================================ */
.as-liquid {
  position: relative;
  background: var(--as-liquid-tint);
  border: 1px solid var(--as-liquid-edge);
  border-radius: var(--as-radius-lg);
  backdrop-filter: blur(var(--as-liquid-blur)) saturate(var(--as-liquid-sat));
  -webkit-backdrop-filter: blur(var(--as-liquid-blur)) saturate(var(--as-liquid-sat));
}
/* Soft top-edge highlight — reads as a single physical pane, not a card */
.as-liquid::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--as-liquid-top), transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* Sticky header — slightly stronger blur, bottom hairline instead of border */
.as-liquid-sticky {
  border: 0;
  border-bottom: 1px solid var(--as-liquid-edge-strong);
  border-radius: 0;
  background: var(--as-liquid-tint);
  backdrop-filter: blur(var(--as-liquid-blur-sticky)) saturate(var(--as-liquid-sat));
  -webkit-backdrop-filter: blur(var(--as-liquid-blur-sticky)) saturate(var(--as-liquid-sat));
}

/* Chip variant — used in place of solid `var(--as-graphite-3)` on chips
   that sit over atmospheric / vitrine backgrounds. The chip remains
   neutral; only the 6px dot carries meaning. */
.as-liquid-chip {
  background: var(--as-liquid-tint-soft);
  border: 1px solid var(--as-liquid-edge);
  border-radius: var(--as-radius-pill);
  backdrop-filter: blur(var(--as-liquid-blur-chip)) saturate(var(--as-liquid-sat));
  -webkit-backdrop-filter: blur(var(--as-liquid-blur-chip)) saturate(var(--as-liquid-sat));
}
.as-liquid-chip::before {
  /* Shorter, gentler top highlight — sits inside the pill */
  inset: 0 8% auto 8%;
  background: linear-gradient(90deg, transparent, var(--as-liquid-top-soft), transparent);
}

/* AI Calm Summary / atmosphere widget — restrained translucency, gentle depth */
.as-liquid-panel {
  background: var(--as-liquid-tint);
  border: 1px solid var(--as-liquid-edge-strong);
  border-radius: var(--as-radius-lg);
  box-shadow:
    0 1px 0 0 var(--as-liquid-top) inset,
    0 12px 36px -16px rgba(0, 0, 0, 0.45);
}

/* Modal overlay — slightly more opaque, with a calm scrim sibling */
.as-liquid-modal {
  background: var(--as-liquid-tint-modal);
  border: 1px solid var(--as-liquid-edge-strong);
  border-radius: var(--as-radius-xl);
  backdrop-filter: blur(var(--as-liquid-blur-sticky)) saturate(var(--as-liquid-sat));
  -webkit-backdrop-filter: blur(var(--as-liquid-blur-sticky)) saturate(var(--as-liquid-sat));
  box-shadow:
    0 1px 0 0 var(--as-liquid-top) inset,
    0 28px 64px -20px rgba(0, 0, 0, 0.55);
}
.as-liquid-scrim {
  position: absolute; inset: 0;
  background: var(--as-liquid-scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Reduced-motion / reduced-transparency: collapse to solid surface */
@media (prefers-reduced-transparency: reduce) {
  .as-liquid,
  .as-liquid-sticky,
  .as-liquid-chip,
  .as-liquid-modal {
    background: var(--as-graphite-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Champagne hairline — a 1px gold line, used as section separator
   or under headlines, à la Bang & Olufsen / Aesop */
.as-rule-gold {
  height: 1px; border: 0; width: 56px;
  background: linear-gradient(90deg, var(--as-champagne) 0%, transparent 100%);
}
.as-rule-gold.centered { background: linear-gradient(90deg, transparent, var(--as-champagne), transparent); margin: 0 auto; }

/* Edition mark — for product cards: "Nº 001 / Pixel 8a" */
.as-edition {
  font-family: var(--as-font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--as-champagne);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.as-edition::before {
  content: ''; display: inline-block; width: 18px; height: 1px;
  background: var(--as-champagne);
}

/* Spec readout — tabular, hardware-feel mono row */
.as-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--as-font-mono);
  font-size: 11px;
  color: var(--as-platinum-3);
  letter-spacing: 0.04em;
}
.as-readout .k { color: var(--as-platinum-4); letter-spacing: 0.10em; text-transform: uppercase; }
.as-readout .v { color: var(--as-platinum); font-variant-numeric: tabular-nums; }

/* Soft inner ring for "premium pane" feel — gold @ 14% (atmospheric) */
.as-ring-gold-inner { box-shadow: inset 0 0 0 1px rgba(200,167,101,0.14); }
.as-ring-charcoal-inner { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.as-ring-cyber-inner { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } /* deprecated alias */

/* Reduced-motion: kill ambient sweep + slow transitions */
@media (prefers-reduced-motion: reduce) {
  .as-sweep-ambient::after,
  .as-light-sweep::after { animation: none; transition: none; transform: none; }
}