/* ORELYS website: design system (same tokens as the app, theme Nyx). */
:root {
  --orange: #ff7a1a; --orange-hi: #ffa45c; --orange-rgb: 255,122,26; --orange-2: #ff9a4a; --on-accent: #140800;
  --orange-glow: rgba(255,122,26,.45);
  --bg: #040404; --bg-2: #0a0806; --ink: #f5f5f4; --ink-soft: rgba(245,245,244,.72); --ink-mute: rgba(245,245,244,.45);
  --panel: rgba(255,255,255,.035); --panel-hi: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.09); --stroke-hi: rgba(255,255,255,.2);
  --gold: #c9a227; --green: #34c38f; --blue: #4aa3ff; --pink: #e2557a;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --r: 16px; --r-lg: 24px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;
  --wrap: 1180px; --gutter: 16px; --nav-h: 68px; --sub-h: 0px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--sub-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
main { overflow-x: clip; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: var(--orange-hi); text-decoration: none; }
a:hover { color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(var(--orange-rgb),.35); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--orange); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* Ambient background: grid + grain + glow */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s7) 0; position: relative; }
@media (min-width: 900px) { .section { padding: var(--s8) 0; } }

/* Typography helpers */
.kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--orange-hi); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.h-xl { font-size: clamp(40px, 7.4vw, 88px); font-weight: 500; letter-spacing: -.035em; }
.h-lg { font-size: clamp(30px, 4.6vw, 54px); }
.h-md { font-size: clamp(22px, 2.6vw, 30px); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 640px; }
.muted { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }
.grad { background: linear-gradient(100deg, #fff 0%, var(--orange-hi) 45%, var(--orange) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.sec-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.sec-head.center { justify-items: center; }

/* Buttons */
.btn { --b: var(--stroke-hi); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--b); background: var(--panel); color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 15px; cursor: pointer; transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s; white-space: nowrap; }
.btn:hover { color: #fff; border-color: rgba(var(--orange-rgb),.6); background: rgba(var(--orange-rgb),.08); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--orange-2)); border-color: transparent; color: var(--on-accent); box-shadow: 0 8px 30px -8px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:hover { color: var(--on-accent); background: linear-gradient(135deg, var(--orange-2), var(--orange-hi)); box-shadow: 0 12px 40px -8px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Glass panel */
.glass { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--stroke); border-radius: var(--r-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; }
.glass.hover { transition: border-color .3s, transform .3s var(--ease), background .3s; }
.glass.hover:hover { border-color: rgba(var(--orange-rgb),.4); transform: translateY(-3px); }

/* Navigation */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.scrolled, .nav.open { background: rgba(4,4,4,.82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--stroke); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(var(--orange-rgb),.5)); }
.brand span { font-family: var(--font-display); font-weight: 600; letter-spacing: .32em; font-size: 13px; }
.brand span i { font-style: normal; color: var(--orange); }
.nav-links { display: none; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--ink-soft); font-size: 14px; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--panel-hi); }
.nav-links a[aria-current="page"] { color: var(--orange-hi); }
.nav-cta { display: none; }
.burger { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--panel); display: grid; place-items: center; cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform .3s var(--ease), background .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.nav.open .burger span { background: transparent; }
.nav.open .burger span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(4,4,4,.97); backdrop-filter: blur(16px); padding: var(--s4) var(--gutter); display: none; flex-direction: column; gap: 4px; overflow-y: auto; z-index: 49; }
.nav.open + .mobile-menu { display: flex; }
.mobile-menu a { color: var(--ink); font-family: var(--font-display); font-size: 22px; padding: 14px 4px; border-bottom: 1px solid var(--stroke); }
.mobile-menu a[aria-current="page"] { color: var(--orange-hi); }
.mobile-menu .btn { margin-top: var(--s4); font-size: 16px; color: #140800; border-bottom: 0; }
@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .burger, .mobile-menu { display: none !important; }
}

/* Hero */
.hero { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + var(--sub-h) + var(--s6)) 0 var(--s7); position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero h1 { margin: var(--s4) 0 var(--s4); }
.hero .lead { margin-bottom: var(--s5); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--s5); font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); letter-spacing: .05em; }
.hero-meta b { color: var(--ink); font-weight: 500; }
.page-hero { padding: calc(var(--nav-h) + var(--sub-h) + var(--s7)) 0 var(--s6); position: relative; }
.page-hero h1 { margin: var(--s3) 0; }
.page-hero::after { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 100%); height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--orange-rgb),.16), transparent); z-index: -1; pointer-events: none; }

/* The orb (CSS version of the app's orb) */
.orb-stage { position: relative; width: min(440px, 82vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.orb-stage .halo { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--orange-rgb),.35), rgba(var(--orange-rgb),.08) 55%, transparent 72%); filter: blur(10px); animation: breathe 6s ease-in-out infinite; }
.orb-stage .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--orange-rgb),.22); }
.orb-stage .ring.r1 { inset: 0; border-style: dashed; border-color: rgba(255,255,255,.12); animation: spin 60s linear infinite; }
.orb-stage .ring.r2 { inset: 8%; border-top-color: var(--orange); border-right-color: transparent; border-bottom-color: rgba(var(--orange-rgb),.08); filter: drop-shadow(0 0 8px var(--orange)); animation: spin 14s linear infinite; }
.orb-stage .ring.r3 { inset: 15%; border-color: transparent; border-left-color: var(--orange-hi); border-bottom-color: rgba(255,255,255,.25); animation: spin 22s linear infinite reverse; }
.orb-stage .core { position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,200,150,.5) 12%, rgba(var(--orange-rgb),.75) 34%, rgba(120,40,0,.75) 66%, rgba(20,6,0,.9) 100%);
  box-shadow: 0 0 60px rgba(var(--orange-rgb),.55), 0 0 140px rgba(var(--orange-rgb),.25), inset 0 0 40px rgba(0,0,0,.6); animation: breathe 6s ease-in-out infinite; }
.orb-stage .core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.18), transparent 30%, rgba(255,164,92,.25), transparent 60%); mix-blend-mode: screen; animation: spin 9s linear infinite; }
.orb-stage .emblem { position: relative; width: 46%; filter: drop-shadow(0 0 24px rgba(var(--orange-rgb),.6)); animation: float 7s ease-in-out infinite; }
.orb-stage .tick { position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; color: var(--ink-mute); }
.orb-stage .tick.t1 { top: 4%; left: 50%; transform: translateX(-50%); }
.orb-stage .tick.t2 { bottom: 4%; left: 50%; transform: translateX(-50%); color: var(--orange-hi); }
.orb-sm { width: min(280px, 64vw); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Marquee strip */
.strip { border-block: 1px solid var(--stroke); background: rgba(255,255,255,.015); overflow: hidden; }
.strip-track { display: flex; gap: 48px; padding: 16px 0; width: max-content; animation: marquee 50s linear infinite; }
.strip-track span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.strip-track span::before { content: "◆"; color: var(--orange); margin-right: 14px; font-size: 9px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Grids and cards */
.grid { display: grid; gap: var(--s3); }
.grid > *, .plans > *, .split > *, .hero-grid > *, .checkout > *, .legal > *, .tiles > *, .themes > * { min-width: 0; }
.plan-top { flex-wrap: wrap; }
@media (min-width: 640px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .grid { gap: var(--s4); } }
.card { padding: var(--s5); }
.card h3 { font-size: 21px; margin: var(--s3) 0 var(--s2); }
.card p { color: var(--ink-soft); font-size: 15px; }
.icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(var(--orange-rgb),.1); border: 1px solid rgba(var(--orange-rgb),.28); box-shadow: inset 0 0 20px rgba(var(--orange-rgb),.08); }
.num { font-family: var(--font-mono); font-size: 12px; color: var(--orange); letter-spacing: .2em; }
.card-glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(var(--orange-rgb),.7), transparent 40%, transparent 70%, rgba(var(--orange-rgb),.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* Split layouts */
.split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s7); } .split.rev > :first-child { order: 2; } }
.checks { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; color: var(--ink-soft); }
.checks li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: rgba(var(--orange-rgb),.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffa45c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid rgba(var(--orange-rgb),.4); }
.checks li b { color: var(--ink); font-weight: 500; }

/* Mock app window */
.mock { border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke-hi); background: #070707; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 80px -30px var(--orange-glow); }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--stroke); font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; color: var(--ink-mute); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--stroke-hi); }
.mock-bar i:first-child { background: var(--orange); }
.mock-bar span { margin-left: auto; }
.mock-body { display: grid; grid-template-columns: 1fr; min-height: 320px; }
@media (min-width: 640px) { .mock-body { grid-template-columns: 150px 1fr; } }
.mock-side { display: none; border-right: 1px solid var(--stroke); padding: 14px; gap: 8px; flex-direction: column; font-size: 12px; color: var(--ink-mute); }
@media (min-width: 640px) { .mock-side { display: flex; } }
.mock-side b { color: var(--ink); font-weight: 500; padding: 7px 10px; border-radius: 8px; background: rgba(var(--orange-rgb),.12); border: 1px solid rgba(var(--orange-rgb),.3); }
.mock-side span { padding: 6px 10px; }
.mock-chat { padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; }
.bubble.me { align-self: flex-end; background: rgba(var(--orange-rgb),.12); border: 1px solid rgba(var(--orange-rgb),.35); }
.bubble.ai { background: var(--panel-hi); border: 1px solid var(--stroke); color: var(--ink-soft); }
.bubble.ai b { color: var(--ink); font-weight: 500; }
.bubble small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: .12em; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-hi); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: var(--s4); text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.stat span { font-size: 13px; color: var(--ink-mute); }

/* Steps */
.steps { counter-reset: s; display: grid; gap: var(--s3); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.step { padding: var(--s5); counter-increment: s; }
.step::after { content: "0" counter(s); position: absolute; top: 18px; right: 22px; font-family: var(--font-display); font-size: 56px; font-weight: 600; color: rgba(255,255,255,.04); line-height: 1; }

/* Pills, tags, badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--stroke-hi); font-size: 12.5px; color: var(--ink-soft); background: var(--panel); }
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(var(--orange-rgb),.45); color: var(--orange-hi); background: rgba(var(--orange-rgb),.08); white-space: nowrap; }
.badge.gold { border-color: rgba(201,162,39,.5); color: #e8c95a; background: rgba(201,162,39,.08); }
.badge.dim { border-color: var(--stroke-hi); color: var(--ink-mute); background: transparent; }

/* Filter bar */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s5); }
.filters button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--panel); color: var(--ink-soft); cursor: pointer; font-size: 14px; transition: all .2s; }
.filters button:hover { color: var(--ink); border-color: var(--stroke-hi); }
.filters button[aria-pressed="true"] { color: #140800; background: var(--orange); border-color: var(--orange); }
.search { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 48px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--panel); margin-bottom: var(--s3); max-width: 420px; }
.search input { flex: 1; background: none; border: 0; outline: none; min-width: 0; }

/* Tool / module tiles */
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; gap: 14px; padding: 18px; border-radius: var(--r); border: 1px solid var(--stroke); background: var(--panel); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.tile:hover { border-color: rgba(var(--tc, var(--orange-rgb)),.5); background: var(--panel-hi); transform: translateY(-2px); }
.tile .ti { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(var(--tc, var(--orange-rgb)),.12); border: 1px solid rgba(var(--tc, var(--orange-rgb)),.3); }
.tile h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tile p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
.tile[hidden] { display: none; }
.cat-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: var(--s6) 0 var(--s3); padding-bottom: 12px; border-bottom: 1px solid var(--stroke); }
.cat-title h3 { font-size: 22px; }

/* Editions / pricing */
.plans { display: grid; gap: var(--s4); align-items: stretch; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
@media (min-width: 960px) { .plan { padding: var(--s6); } }
.plan.featured { background: linear-gradient(180deg, rgba(var(--orange-rgb),.12), rgba(255,255,255,.02) 60%); border-color: rgba(var(--orange-rgb),.45); box-shadow: 0 30px 80px -40px var(--orange-glow); }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan h3 { font-size: 30px; }
.plan .tag { color: var(--ink-soft); font-size: 15px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: var(--s2) 0; }
.price b { font-family: var(--font-display); font-size: clamp(48px, 6vw, 64px); font-weight: 500; letter-spacing: -.04em; }
.price span { color: var(--ink-mute); font-size: 14px; }
.plan .checks { margin: 0; flex: 1; }
.plan hr { border: 0; border-top: 1px solid var(--stroke); margin: 0; width: 100%; }
.plan-foot { font-size: 13px; color: var(--ink-mute); text-align: center; }

/* Comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: var(--panel); }
table.compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14.5px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--stroke); }
.compare thead th { font-family: var(--font-display); font-weight: 500; font-size: 16px; position: sticky; top: 0; background: #0b0908; }
.compare thead th small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--orange-hi); font-weight: 400; letter-spacing: .1em; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 150px; }
.compare tr.grp td { background: rgba(var(--orange-rgb),.06); font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-hi); }
.compare tbody tr:hover td { background: rgba(255,255,255,.02); }
.yes { color: var(--orange-hi); font-weight: 600; }
.no { color: var(--ink-mute); }

/* FAQ accordion */
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--stroke); border-radius: var(--r); background: var(--panel); transition: border-color .25s; }
.faq-item[open] { border-color: rgba(var(--orange-rgb),.35); background: var(--panel-hi); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 18px; align-items: center; font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 30px; height: 30px; border-radius: 50%; border: 1px solid var(--stroke-hi); display: grid; place-items: center; color: var(--orange-hi); font-size: 18px; transition: transform .3s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .a { padding: 0 22px 20px; color: var(--ink-soft); }
.faq-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-mute); margin: var(--s5) 0 var(--s2); }

/* Forms */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: 6px; }
.field label, .legend { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.field .opt { color: var(--ink-mute); font-weight: 400; }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stroke-hi); background: rgba(0,0,0,.35); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23ffa45c' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; }
.select option { background: #111; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(var(--orange-rgb),.15); }
.input:user-invalid { border-color: #ff5a5a; }
.row2 { display: grid; gap: var(--s3); }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: 14px; background: var(--panel); cursor: pointer; transition: border-color .2s, background .2s; }
.choice:hover { border-color: var(--stroke-hi); }
.choice:has(input:checked) { border-color: var(--orange); background: rgba(var(--orange-rgb),.07); }
.choice input { accent-color: var(--orange); margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.choice .grow { flex: 1; }
.choice b { font-weight: 500; display: block; }
.choice small { color: var(--ink-mute); font-size: 13px; }
.choice .p { font-family: var(--font-display); font-weight: 500; white-space: nowrap; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.check input { accent-color: var(--orange); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--stroke-hi); border-radius: 999px; overflow: hidden; }
.qty button { width: 44px; height: 44px; background: var(--panel); border: 0; cursor: pointer; font-size: 18px; color: var(--orange-hi); }
.qty button:hover { background: var(--panel-hi); }
.qty output { min-width: 40px; text-align: center; font-family: var(--font-display); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
legend { padding: 0; margin-bottom: 4px; }

/* Checkout */
.checkout { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 980px) { .checkout { grid-template-columns: 1fr 400px; } .summary { position: sticky; top: calc(var(--nav-h) + var(--sub-h) + 20px); } }
.co-step { padding: var(--s5); }
.co-step h2 { font-size: 22px; display: flex; align-items: center; gap: 12px; margin-bottom: var(--s4); }
.co-step h2 .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; background: rgba(var(--orange-rgb),.15); color: var(--orange-hi); border: 1px solid rgba(var(--orange-rgb),.4); }
.summary { padding: var(--s5); }
.summary h2 { font-size: 20px; margin-bottom: var(--s4); }
.sum-item { display: flex; gap: 14px; align-items: center; padding-bottom: var(--s3); border-bottom: 1px solid var(--stroke); }
.sum-item .thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; background: radial-gradient(circle at 40% 35%, rgba(var(--orange-rgb),.4), #0b0705 70%); border: 1px solid rgba(var(--orange-rgb),.3); display: grid; place-items: center; }
.sum-item .thumb img { width: 44px; }
.sum-lines { display: grid; gap: 10px; padding: var(--s3) 0; border-bottom: 1px solid var(--stroke); font-size: 14.5px; }
.sum-lines div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) 0; }
.sum-total b { font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 14px; color: var(--ink-soft); border: 1px dashed rgba(var(--orange-rgb),.55); background: rgba(var(--orange-rgb),.06); }
.notice b { color: var(--ink); font-weight: 500; }
.pay-methods { display: grid; gap: 10px; }
.pay-logos { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-logos span { font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--stroke-hi); color: var(--ink-mute); }
.trust { display: grid; gap: 10px; margin-top: var(--s3); font-size: 13px; color: var(--ink-mute); }
.trust div { display: flex; gap: 10px; align-items: center; }
.success { text-align: center; padding: var(--s6) var(--s4); display: grid; gap: var(--s3); justify-items: center; }
.success .seal { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; color: #140800; background: linear-gradient(135deg, var(--orange), var(--orange-hi)); box-shadow: 0 0 60px var(--orange-glow); }

/* Legal pages */
.legal { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 960px) { .legal { grid-template-columns: 240px 1fr; } .toc { position: sticky; top: calc(var(--nav-h) + 20px); } }
.toc { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 960px) { .toc { flex-direction: column; } }
.toc a { color: var(--ink-soft); font-size: 14px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--panel); }
.toc a:hover { color: var(--ink); border-color: rgba(var(--orange-rgb),.4); }
.doc { padding: var(--s5); }
@media (min-width: 720px) { .doc { padding: var(--s6); } }
.doc + .doc { margin-top: var(--s4); }
.doc h2 { font-size: 30px; margin-bottom: 6px; }
.doc h3 { font-size: 17px; margin: var(--s5) 0 var(--s2); color: var(--ink); }
.doc h3 span { color: var(--orange); font-family: var(--font-mono); font-size: 13px; margin-right: 10px; }
.doc p, .doc li { color: var(--ink-soft); font-size: 15px; }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 20px; margin: 8px 0; display: grid; gap: 6px; }
.ph { color: var(--orange-hi); border-bottom: 1px dashed var(--orange); }
.callout { border-left: 3px solid var(--orange); background: rgba(var(--orange-rgb),.07); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 14px 0; color: var(--ink-soft); }

/* CTA band */
.cta-band { padding: var(--s6) var(--s4); text-align: center; overflow: hidden; display: grid; gap: var(--s4); justify-items: center; }
@media (min-width: 720px) { .cta-band { padding: var(--s7) var(--s6); } }
.cta-band::after { content: ""; position: absolute; left: 50%; bottom: -60%; width: 80%; height: 120%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--orange-rgb),.28), transparent); pointer-events: none; z-index: -1; }
.cta-band { isolation: isolate; }

/* Footer */
.footer { border-top: 1px solid var(--stroke); padding: var(--s7) 0 var(--s5); margin-top: var(--s7); background: linear-gradient(180deg, transparent, rgba(var(--orange-rgb),.03)); }
.foot-grid { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }
.foot-grid h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: var(--s3); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--ink-soft); font-size: 14px; }
.foot-grid a:hover { color: var(--orange-hi); }
.foot-brand p { color: var(--ink-mute); font-size: 14px; margin-top: var(--s3); max-width: 320px; }
.foot-lab { display: flex; align-items: center; gap: 10px; margin-top: var(--s4); color: var(--ink-mute); font-size: 12px; letter-spacing: .2em; font-family: var(--font-mono); }
.foot-lab img { width: 32px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--stroke); font-size: 13px; color: var(--ink-mute); }

/* Theme preview cards (Apollon / Nyx / Eurydice) */
.themes { display: grid; gap: var(--s3); }
@media (min-width: 860px) { .themes { grid-template-columns: repeat(3, 1fr); } }
.theme { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--stroke); }
.theme .scr { height: 170px; position: relative; display: grid; place-items: center; }
.theme .scr .mini-orb { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--orange-hi) 18%, var(--orange) 45%, #3a1200 100%); box-shadow: 0 0 40px var(--orange-glow); }
.theme .scr .lines { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 6px; }
.theme .scr .lines i { height: 6px; border-radius: 4px; background: currentColor; opacity: .18; }
.theme .scr .lines i:nth-child(2) { width: 70%; } .theme .scr .lines i:nth-child(3) { width: 45%; }
.theme.apollon .scr { background: #f4f4f2; color: #0d0d0d; }
.theme.apollon .mini-orb { display: none; }
.theme.apollon .scr::before { content: "Bonjour Camille, on s'y met ?"; font-family: var(--font-display); font-size: 18px; color: #0d0d0d; }
.theme.nyx .scr { background: radial-gradient(circle at 50% 45%, rgba(var(--orange-rgb),.22), #040404 65%); color: #fff; }
.theme.eurydice .scr { background: linear-gradient(160deg, #1e140e, #120d0a); color: #fff6ee; }
.theme.eurydice .mini-orb { width: 54px; height: 54px; border-radius: 40%; }
.theme .meta { padding: 18px 20px; background: var(--panel); }
.theme .meta h4 { font-size: 18px; margin-bottom: 4px; }
.theme .meta p { color: var(--ink-mute); font-size: 14px; }

/* Box (coffret) visual */
.box-visual { position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); background: radial-gradient(ellipse at 50% 30%, rgba(var(--orange-rgb),.18), transparent 60%), linear-gradient(160deg, #141010, #060505); border: 1px solid var(--stroke); overflow: hidden; display: grid; place-items: center; }
.box-visual .lid { width: 72%; aspect-ratio: 16/10; border-radius: 14px; background: linear-gradient(150deg, #1d1915, #0a0908); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -20px #000, inset 0 1px 0 rgba(255,255,255,.08); display: grid; place-items: center; position: relative; transform: perspective(900px) rotateX(16deg); }
.box-visual .lid img { width: 30%; filter: drop-shadow(0 0 20px rgba(var(--orange-rgb),.6)); }
.box-visual .lid::after { content: "ORELYS AI"; position: absolute; bottom: 12%; font-family: var(--font-display); letter-spacing: .5em; font-size: 11px; color: rgba(255,255,255,.6); }
.box-visual .key { position: absolute; right: 9%; bottom: 12%; width: 22%; aspect-ratio: 3/1; border-radius: 8px; background: linear-gradient(90deg, #2a2420, #121010 60%, #8a8a8a 60%, #bdbdbd); box-shadow: 0 14px 30px -6px #000, 0 0 30px -6px var(--orange-glow); transform: rotate(-12deg); }
.box-visual .key::before { content: "ORELYS"; position: absolute; left: 10%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 9px; letter-spacing: .3em; color: var(--orange-hi); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 400px) {
  .orb-stage .tick { display: none; }
  .choice { flex-wrap: wrap; }
  .choice .p { margin-left: 32px; }
}

/* =====================================================================
   D-FOBIS LAB company layer (added for the company website)
   ===================================================================== */

/* Brand: D-FOBIS LAB */
.brand-lab img { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(var(--orange-rgb),.55)); }
.brand-lab span { letter-spacing: .26em; }

/* ORELYS product sub-navigation (product pages only) */
.has-subnav { --sub-h: 46px; }
.subnav { position: fixed; left: 0; right: 0; top: var(--nav-h); height: var(--sub-h); z-index: 48; background: rgba(8,6,5,.86); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--stroke); }
.subnav .wrap { height: 100%; display: flex; align-items: center; gap: var(--s3); }
.sub-brand { display: none; align-items: center; gap: 8px; color: var(--ink); flex-shrink: 0; padding-right: var(--s3); border-right: 1px solid var(--stroke); }
.sub-brand img { width: 22px; height: 22px; }
.sub-brand span { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.sub-brand i { font-style: normal; color: var(--orange); }
.sub-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, #000 88%, transparent); }
.sub-links::-webkit-scrollbar { display: none; }
.sub-links a { flex-shrink: 0; color: var(--ink-soft); font-size: 13.5px; padding: 6px 12px; border-radius: 999px; position: relative; transition: color .2s, background .2s; }
.sub-links a:hover { color: var(--ink); background: var(--panel-hi); }
.sub-links a[aria-current="page"] { color: var(--orange-hi); background: rgba(var(--orange-rgb),.1); }
.sub-cta { display: none; flex-shrink: 0; font-size: 13px; font-family: var(--font-display); color: var(--orange-hi); }
@media (min-width: 760px) { .sub-brand { display: flex; } .sub-links { mask-image: none; } }
@media (min-width: 1000px) { .sub-cta { display: inline-flex; } }

/* Company hero (index.html) */
.lab-stage { position: relative; width: min(480px, 84vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.lab-stage .halo { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--orange-rgb),.28), rgba(var(--orange-rgb),.06) 60%, transparent 75%); filter: blur(12px); animation: breathe 7s ease-in-out infinite; }
.lab-stage .orbit { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.1); animation: spin 80s linear infinite; }
.lab-stage .orbit.o2 { inset: 16%; border: 1px solid transparent; border-top-color: rgba(var(--orange-rgb),.55); border-left-color: rgba(var(--orange-rgb),.15); animation-duration: 18s; animation-direction: reverse; filter: drop-shadow(0 0 6px var(--orange)); }
.lab-stage .orbit::after { content: ""; position: absolute; top: 50%; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-hi); box-shadow: 0 0 14px var(--orange); }
.lab-stage .logo { position: relative; width: 100%; animation: float 8s ease-in-out infinite; }
.lab-stage .tick { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; color: var(--ink-mute); white-space: nowrap; }

/* Spotlight card (ORELYS in "Nouveautés") */
.spotlight { padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--s5); align-items: center; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, rgba(var(--orange-rgb),.14), rgba(255,255,255,.02) 55%); border-color: rgba(var(--orange-rgb),.4); }
@media (min-width: 900px) { .spotlight { grid-template-columns: 1.15fr .85fr; } }
.spotlight::after { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 160%; background: radial-gradient(closest-side, rgba(var(--orange-rgb),.22), transparent); z-index: -1; pointer-events: none; }
.spotlight .new-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--orange); color: #140800; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; font-weight: 500; }
.spotlight .new-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #140800; animation: blink 1.6s infinite; }
.spotlight h2 { margin: var(--s3) 0 var(--s3); }
.spotlight .lead { margin-bottom: var(--s4); }
.spotlight .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); }

/* News grid */
.news-grid { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.news-card { padding: var(--s4); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.news-card h3 { font-size: 20px; }
.news-card p { color: var(--ink-soft); font-size: 14.5px; flex: 1; }
.news-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; letter-spacing: .1em; }
.news-link { font-family: var(--font-display); font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.news-card.soon { border-radius: var(--r-lg); border: 1px dashed var(--stroke-hi); background: repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 12px, transparent 12px 24px); position: relative; overflow: hidden; }
.news-card.soon h3, .news-card.soon p { color: var(--ink-mute); }
.news-card.soon .badge { align-self: flex-start; }
.soon-mark { width: 48px; height: 48px; border-radius: 14px; border: 1px dashed var(--stroke-hi); display: grid; place-items: center; }
.soon-mark span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-mute); border-top-color: var(--orange); animation: spin 2.4s linear infinite; }
.news-card.soon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 4s ease-in-out infinite; pointer-events: none; }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }

/* Founder quote */
.founder { padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 720px) { .founder { grid-template-columns: auto 1fr; gap: var(--s6); } }
.founder img { width: clamp(72px, 12vw, 120px); filter: drop-shadow(0 0 20px rgba(var(--orange-rgb),.45)); }
.founder blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.35; letter-spacing: -.01em; }
.founder blockquote::before { content: "«"; color: var(--orange); margin-right: 6px; }
.founder blockquote::after { content: "»"; color: var(--orange); margin-left: 6px; }
.founder cite { display: block; margin-top: var(--s3); font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-mute); }

/* Vision / values list */
.value-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--orange); }
.manifesto { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -.02em; max-width: 980px; }
.manifesto em { font-style: normal; color: var(--orange-hi); }

/* Billing switch (Achat unique / Mensuel / Annuel) */
.billing-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; border-radius: 999px; border: 1px solid var(--stroke-hi); background: rgba(0,0,0,.4); }
.billing-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-family: var(--font-display); font-size: 15px; transition: background .25s, color .25s; }
.billing-switch button:hover { color: var(--ink); }
.billing-switch button[aria-pressed="true"] { background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: var(--on-accent); box-shadow: 0 6px 24px -8px var(--orange-glow); }
.billing-switch em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: rgba(var(--orange-rgb),.18); color: var(--orange-hi); }
.billing-switch button[aria-pressed="true"] em { background: rgba(0,0,0,.18); color: #140800; }
@media (max-width: 480px) { .billing-switch { flex-wrap: nowrap; gap: 2px; } .billing-switch button { padding: 0 13px; font-size: 14px; min-height: 40px; } .billing-switch em { display: none; } }
.price b { transition: opacity .2s; }
.price span strong { font-weight: 500; color: var(--ink); font-size: 18px; font-family: var(--font-display); }
.price-note { font-size: 13px; color: var(--orange-hi); margin-top: -8px; min-height: 20px; }

/* Formula explainer cards (editions.html) */
.formulas { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .formulas { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.formula { padding: var(--s5); cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--ease); display: flex; flex-direction: column; gap: 10px; }
.formula:hover { border-color: rgba(var(--orange-rgb),.35); }
.formula.is-active { border-color: rgba(var(--orange-rgb),.6); background: linear-gradient(180deg, rgba(var(--orange-rgb),.1), rgba(255,255,255,.02)); }
.formula h3 { font-size: 22px; }
.formula .badge { align-self: flex-start; }
.formula .from { font-family: var(--font-display); font-size: 15px; color: var(--ink-soft); }
.formula .from b { color: var(--ink); font-weight: 500; font-size: 26px; letter-spacing: -.02em; }
.formula .checks { margin-top: 6px; }
.formula .checks li { font-size: 14.5px; }
.setup-band { display: grid; gap: var(--s3); align-items: center; padding: var(--s4) var(--s5); margin-top: var(--s4); }
@media (min-width: 760px) { .setup-band { grid-template-columns: auto 1fr; gap: var(--s5); } }
.setup-band .fee { font-family: var(--font-display); font-size: 44px; letter-spacing: -.03em; color: var(--orange-hi); line-height: 1; }

/* Compact plans teaser (orphee.html) */
.plans-mini { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .plans-mini { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.plan-mini { padding: var(--s5); color: inherit; display: flex; flex-direction: column; gap: 12px; }
.plan-mini:hover { color: inherit; }
.plan-mini.featured { background: linear-gradient(180deg, rgba(var(--orange-rgb),.12), rgba(255,255,255,.02) 60%); border-color: rgba(var(--orange-rgb),.45); }
.plan-mini h3 { font-size: 28px; }
.plan-mini .tag { color: var(--ink-soft); font-size: 14.5px; }
.mini-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.mini-prices div { padding: 12px 10px; border-radius: 14px; border: 1px solid var(--stroke); background: rgba(0,0,0,.25); display: grid; gap: 2px; text-align: center; }
.mini-prices span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.mini-prices b { font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 2.2vw, 22px); white-space: nowrap; }
.mini-prices small { font-size: 12px; color: var(--ink-mute); }

/* Shipping zones */
.zones { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .zones { grid-template-columns: repeat(3, 1fr); } }
.zone { padding: var(--s4); display: grid; gap: 8px; }
.zone .zp { font-family: var(--font-display); font-size: 22px; }
.tbc { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--orange); color: var(--orange-hi); vertical-align: middle; margin-left: 6px; white-space: nowrap; }

/* Checkout additions */
.zone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zone-tabs .choice { flex-direction: column; gap: 4px; padding: 12px; align-items: flex-start; }
.zone-tabs .choice input { margin: 0; }
@media (max-width: 599px) { .zone-tabs { grid-template-columns: 1fr; } .zone-tabs .choice { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; } .zone-tabs .choice small { grid-column: 2; } }
.sum-lines .sub-line { font-size: 13px; color: var(--ink-mute); }
.sum-then { font-size: 13.5px; color: var(--orange-hi); text-align: right; margin-top: -8px; padding-bottom: var(--s2); }

/* =====================================================================
   The box (coffret): exploded unboxing, driven by --p (0 closed, 1 exploded)
   JS writes --p from the scroll position; CSS computes every movement.
   ===================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.unbox-scroll { position: relative; height: 420vh; }
.unbox-sticky { position: sticky; top: calc(var(--nav-h) + var(--sub-h)); height: calc(100svh - var(--nav-h) - var(--sub-h)); overflow: hidden; }
.unbox { --p: 0; position: absolute; inset: 0; container-type: size; }
.unbox::before { content: ""; position: absolute; left: 50%; top: 58%; width: 120cqmin; height: 40cqmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--orange-rgb), calc(.12 + .2 * var(--p))), transparent); filter: blur(10px); }
.ub-center { position: absolute; left: 50%; top: 56%; width: 0; height: 0; }

/* Base of the box (open interior) */
.ub-base { position: absolute; width: 58cqmin; height: 38cqmin; left: -29cqmin; top: -19cqmin; border-radius: 2.4cqmin; z-index: 1;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--orange-rgb), calc(.08 + .3 * var(--p))), transparent 65%), linear-gradient(180deg, #050404, #0e0b09);
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 2cqmin 4cqmin rgba(0,0,0,.9), 0 4cqmin 8cqmin -2cqmin #000; }
.ub-base::before { content: ""; position: absolute; inset: 9% 8%; border-radius: 1.4cqmin; border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(var(--orange-rgb), calc(.05 + .12 * var(--p))), transparent 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3cqmin);
  box-shadow: inset 0 1.2cqmin 2.4cqmin rgba(0,0,0,.85); }
.ub-front { position: absolute; width: 58cqmin; height: 8cqmin; left: -29cqmin; top: 13cqmin; z-index: 3; border-radius: 0 0 2.4cqmin 2.4cqmin;
  background: linear-gradient(180deg, #1a1612, #070605); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(var(--orange-rgb), calc(.15 + .5 * var(--p))); box-shadow: 0 3cqmin 6cqmin -2cqmin #000; }
.ub-front::after { content: "D-FOBIS LAB"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: max(8px, 1.5cqmin); letter-spacing: .5em; color: rgba(255,255,255,.28); }

/* Lid: lifts first (p 0 to .16) and settles above the box */
.ub-lid { --lt: clamp(0, var(--p) / .16, 1); position: absolute; width: 60cqmin; height: 40cqmin; left: -30cqmin; top: -20cqmin; z-index: 6; border-radius: 2.6cqmin;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.07), transparent 50%), linear-gradient(150deg, #1c1814, #070605 70%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5cqmin 10cqmin -3cqmin #000, 0 0 calc(6cqmin * (1 - var(--lt))) rgba(var(--orange-rgb),.25);
  display: grid; place-items: center; align-content: center; gap: 2cqmin;
  transform: translateY(calc(-36cqh * var(--lt))) scale(calc(1 - .45 * var(--lt))) rotate(calc(-4deg * var(--lt))); }
.ub-lid > img { width: 13cqmin; filter: drop-shadow(0 0 3cqmin rgba(var(--orange-rgb),.6)); }
.ub-lid .lid-name { font-family: var(--font-display); font-size: max(10px, 2.2cqmin); letter-spacing: .55em; color: rgba(255,255,255,.75); padding-left: .55em; }
.ub-lid .lid-line { width: 18cqmin; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.ub-lid .ub-label { --t: var(--lt); }

/* Items: rise out of the box, then fly to their exploded spot */
.ub-item { --t: clamp(0, (var(--p) - var(--s)) / .14, 1); position: absolute; left: 0; top: 0; z-index: 2;
  translate: -50% -50%;
  transform: translate(calc(var(--x) * var(--t)), calc(var(--y) * var(--t) - 16cqh * sin(calc(var(--t) * 180deg)))) rotate(calc(var(--r) * var(--t))) scale(calc(.5 + .5 * var(--t)));
  opacity: clamp(0, calc(var(--t) * 5), 1); }
.ub-label { position: absolute; left: 50%; top: calc(100% + 1.6cqmin); width: max-content; max-width: 34cqw; transform: translateX(-50%) rotate(calc(-1 * var(--r, 0deg) * var(--t, 1))); text-align: center; opacity: clamp(0, calc((var(--t) - .75) * 4), 1); pointer-events: none; }
.ub-label b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(11px, 1.9cqmin, 15px); color: var(--ink); white-space: nowrap; }
.ub-label small { display: block; font-size: clamp(10px, 1.5cqmin, 12.5px); color: var(--ink-mute); line-height: 1.35; }
.ub-lid .ub-label { top: calc(100% + 1cqmin); transform: translateX(-50%) rotate(calc(4deg * var(--lt))) scale(calc(1 / (1 - .45 * var(--lt)))); transform-origin: top center; }

/* Key */
.ub-key { --s: .18; --x: -29cqw; --y: -17cqh; --r: -9deg; width: 32cqmin; height: 9cqmin; }
.ub-key .body { position: absolute; inset: 0 22% 0 0; border-radius: 1.6cqmin 1cqmin 1cqmin 1.6cqmin; background: linear-gradient(180deg, #2a241f, #0b0908 60%, #15110e); border: 1px solid rgba(var(--orange-rgb),.45); box-shadow: 0 0 4cqmin -1cqmin var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.12); display: flex; align-items: center; gap: 1.4cqmin; padding-left: 2cqmin; overflow: hidden; }
.ub-key .body img { width: 5.4cqmin; }
.ub-key .body span { display: grid; line-height: 1.15; }
.ub-key .body b { font-family: var(--font-display); font-weight: 600; font-size: max(7px, 1.9cqmin); letter-spacing: .3em; color: var(--orange-hi); }
.ub-key .body i { font-style: normal; font-family: var(--font-mono); font-size: max(6px, 1.25cqmin); letter-spacing: .12em; color: rgba(255,255,255,.55); }
.ub-key .plug { position: absolute; right: 0; top: 18%; bottom: 18%; width: 24%; border-radius: 0 .6cqmin .6cqmin 0; background: linear-gradient(180deg, #e2e2e2, #8d8d8d 50%, #c8c8c8); }
.ub-key .plug::before, .ub-key .plug::after { content: ""; position: absolute; left: 30%; width: 22%; height: 18%; background: #333; top: 25%; }
.ub-key .plug::after { left: 62%; }

/* Activation card */
.ub-card { --s: .3; --x: 28cqw; --y: -19cqh; --r: 7deg; width: 34cqmin; height: 21.5cqmin; border-radius: 1.8cqmin; padding: 2.2cqmin; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(circle at 85% 15%, rgba(var(--orange-rgb),.55), transparent 45%), linear-gradient(135deg, #1b1612, #050404); border: 1px solid rgba(var(--orange-rgb),.4); box-shadow: 0 3cqmin 6cqmin -2cqmin #000; }
.ub-card .ct { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: max(6px, 1.3cqmin); letter-spacing: .2em; color: rgba(255,255,255,.6); }
.ub-card .ct img { width: 5cqmin; }
.ub-card .code { font-family: var(--font-mono); font-size: max(7px, 1.7cqmin); letter-spacing: .1em; color: #fff; white-space: nowrap; }
.ub-card .chip { width: 5cqmin; height: 3.8cqmin; border-radius: .6cqmin; background: linear-gradient(135deg, #e8c95a, #8a6d1c); }

/* Printed manual */
.ub-manual { --s: .42; --x: -31cqw; --y: 20cqh; --r: -6deg; width: 23cqmin; height: 30cqmin; border-radius: .8cqmin 1.6cqmin 1.6cqmin .8cqmin; display: grid; place-items: center; align-content: center; gap: 1.6cqmin;
  background: linear-gradient(90deg, #050404 0 6%, #16120f 6%, #0b0908); border: 1px solid rgba(255,255,255,.1); box-shadow: .8cqmin .8cqmin 0 -.2cqmin #d9d2c5, 1.4cqmin 1.4cqmin 0 -.4cqmin #bfb6a6, 0 3cqmin 6cqmin -2cqmin #000; }
.ub-manual > img { width: 9cqmin; filter: drop-shadow(0 0 2cqmin rgba(var(--orange-rgb),.5)); }
.ub-manual > b { font-family: var(--font-display); font-weight: 500; font-size: max(7px, 1.7cqmin); letter-spacing: .35em; color: #fff; padding-left: .35em; }
.ub-manual > i { font-style: normal; font-family: var(--font-mono); font-size: max(6px, 1.2cqmin); letter-spacing: .2em; color: var(--orange-hi); }

/* D-FOBIS LAB presentation card */
.ub-letter { --s: .54; --x: 30cqw; --y: 21cqh; --r: 5deg; width: 24cqmin; height: 31cqmin; border-radius: 1cqmin; padding: 2.4cqmin; display: grid; justify-items: center; align-content: center; gap: 1.4cqmin;
  background: linear-gradient(160deg, #f1ece3, #d8d0c2); color: #1a1410; box-shadow: 0 3cqmin 6cqmin -2cqmin #000; }
.ub-letter > img { width: 10cqmin; }
.ub-letter > b { font-family: var(--font-display); font-size: max(7px, 1.6cqmin); letter-spacing: .3em; padding-left: .3em; }
.ub-letter > i { font-style: normal; font-size: max(6px, 1.25cqmin); color: #6b5f50; text-align: center; line-height: 1.4; }
.ub-letter > hr { width: 50%; border: 0; border-top: 1px solid #c4793a; margin: 0; }

/* D-FOBIS LAB pen */
.ub-pen { --s: .66; --x: 0cqw; --y: 33cqh; --r: -4deg; width: 46cqmin; height: 3.2cqmin; border-radius: 2cqmin .6cqmin .6cqmin 2cqmin;
  background: linear-gradient(180deg, #3a332d, #0b0908 45%, #000 60%, #1d1915); box-shadow: 0 2cqmin 3cqmin -1cqmin #000; }
.ub-pen::before { content: ""; position: absolute; left: 62%; top: -.2cqmin; bottom: -.2cqmin; width: 1.4cqmin; background: linear-gradient(180deg, var(--orange-hi), var(--orange) 50%, #8a3a00); }
.ub-pen::after { content: ""; position: absolute; right: -3cqmin; top: 50%; width: 4cqmin; height: 1.6cqmin; transform: translateY(-50%); clip-path: polygon(0 0, 100% 50%, 0 100%); background: linear-gradient(180deg, #ddd, #888); }
.ub-pen .clip { position: absolute; left: 8%; top: -.9cqmin; width: 22%; height: 1cqmin; border-radius: 1cqmin; background: linear-gradient(180deg, #e8c95a, #8a6d1c); }
.ub-pen .eng { position: absolute; left: 34%; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: max(5px, 1.1cqmin); letter-spacing: .3em; color: #c9a227; white-space: nowrap; }

/* Scroll hint + progress */
.ub-hint { position: absolute; left: 50%; bottom: 3cqh; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-mute); opacity: clamp(0, calc(1 - var(--p) * 12), 1); display: grid; justify-items: center; gap: 8px; white-space: nowrap; }
.ub-hint::after { content: ""; width: 1px; height: 28px; background: linear-gradient(var(--orange), transparent); animation: float 2s ease-in-out infinite; }
.ub-progress { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: none; gap: 10px; }
.ub-progress span { display: block; width: 3px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.ub-progress span::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform-origin: top; transform: scaleY(clamp(0, (var(--p) - var(--s)) / .14, 1)); }
@media (min-width: 900px) { .ub-progress { display: grid; } }

/* Teaser version (orphee.html): opens once when it scrolls into view */
.unbox-frame { position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--stroke); background: radial-gradient(ellipse at 50% 30%, rgba(var(--orange-rgb),.14), transparent 60%), linear-gradient(160deg, #110e0c, #050404); }
.unbox-frame .unbox { transition: --p 2.8s cubic-bezier(.45,.05,.2,1) .2s; }
.unbox-frame.open .unbox { --p: 1; }
.unbox-frame .ub-label, .unbox-frame .ub-hint, .unbox-frame .ub-progress { display: none; }
.unbox-frame .ub-key { --x: -30cqw; --y: -12cqh; }
.unbox-frame .ub-card { --x: 29cqw; --y: -12cqh; }
.unbox-frame .ub-manual { --x: -31cqw; --y: 20cqh; }
.unbox-frame .ub-letter { --x: 31cqw; --y: 20cqh; }
.unbox-frame .ub-pen { --y: 30cqh; }

/* Key content cards (coffret.html) */
.key-files { display: grid; gap: 12px; }
.key-file { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--stroke); background: rgba(0,0,0,.3); font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.key-file .ti { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--orange-rgb),.1); border: 1px solid rgba(var(--orange-rgb),.3); font-size: 18px; }
.key-file b { color: var(--ink); font-weight: 500; display: block; font-family: var(--font-body); font-size: 15px; }
.key-file .sz { margin-left: auto; color: var(--ink-mute); font-size: 11px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .unbox-scroll { height: auto; }
  .unbox-sticky { position: relative; top: 0; height: min(86svh, 760px); }
}

/* Portrait stages (phones): items above and below the box instead of on the sides */
@container (max-aspect-ratio: 1/1) {
  .unbox-scroll .ub-center { top: 50%; }
  .unbox-scroll .ub-lid { transform: translateY(calc(-38cqh * var(--lt))) scale(calc(1 - .45 * var(--lt))) rotate(calc(-4deg * var(--lt))); }
  .unbox-scroll .ub-key { --x: -22cqw; --y: -20cqh; }
  .unbox-scroll .ub-card { --x: 23cqw; --y: -20cqh; }
  .unbox-scroll .ub-manual { --x: -24cqw; --y: 22cqh; }
  .unbox-scroll .ub-letter { --x: 24cqw; --y: 22cqh; }
  .unbox-scroll .ub-pen { --y: 37cqh; }
  .unbox-scroll .ub-label small { display: none; }
}

/* ---------- Colours: D-FOBIS LAB is electric blue (its logo), ORELYS is orange ----------
   Company pages carry body.lab; the header, mobile menu and footer are always the company's.
   .theme-orphee brings the orange back inside a company page (the ORELYS spotlight). */
.lab, .nav, .mobile-menu, .footer {
  --orange: #2f7bff; --orange-hi: #8cb8ff; --orange-rgb: 47,123,255; --orange-glow: rgba(47,123,255,.45); --orange-2: #5a9bff; --on-accent: #ffffff;
}
.theme-orphee, .subnav {
  --orange: #ff7a1a; --orange-hi: #ffa45c; --orange-rgb: 255,122,26; --orange-glow: rgba(255,122,26,.45); --orange-2: #ff9a4a; --on-accent: #140800;
}
.brand-lab img { filter: drop-shadow(0 0 10px rgba(47,123,255,.55)); }

/* =====================================================================
   Agent IA tout-en-un: hooks, support form status, inspiration page
   ===================================================================== */
.spot-hook { font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); color: var(--orange-hi); margin: calc(-1 * var(--s2)) 0 var(--s3); letter-spacing: -.01em; }
.spotlight .lead b, .hero .lead b { color: var(--ink); font-weight: 500; }
.hero-insp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--s3); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(var(--orange-rgb),.4); background: rgba(var(--orange-rgb),.08); color: var(--ink-soft); font-size: 14px; }
.hero-insp b { color: var(--orange-hi); font-weight: 500; }
.hero-insp:hover { color: var(--ink); border-color: var(--orange); }

/* Honeypot (anti-bot): off screen, never focusable */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-status { padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.form-status b { color: var(--ink); font-weight: 500; }
.form-status.ok { border: 1px solid rgba(52,195,143,.55); background: rgba(52,195,143,.08); }
.form-status.err { border: 1px solid rgba(226,85,122,.6); background: rgba(226,85,122,.08); margin-top: var(--s3); }
.form-status .mono { color: var(--orange-hi); letter-spacing: .06em; }
.btn[disabled] { pointer-events: none; }

/* ---------- Holographic scene (CSS/SVG only, original artwork) ---------- */
.holo { --hc: var(--orange-rgb); position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  container-type: inline-size; border: 1px solid rgba(var(--hc),.28);
  background: radial-gradient(ellipse 60% 55% at 50% 38%, rgba(var(--hc),.16), transparent 70%), radial-gradient(ellipse at 50% 120%, rgba(var(--hc),.12), transparent 60%), #030302;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 90px -40px var(--orange-glow), inset 0 0 80px rgba(0,0,0,.7); font-size: clamp(9px, 1.02cqw, 12.5px); }
.holo::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.holo::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65)); }
.holo-floor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 56%; z-index: -1; transform: perspective(600px) rotateX(72deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(var(--hc),.35) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hc),.35) 1px, transparent 1px); background-size: 48px 48px;
  mask-image: linear-gradient(to top, #000 10%, transparent 90%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); animation: floor 4s linear infinite; }
@keyframes floor { to { background-position: 0 48px; } }
.holo-scan { position: absolute; left: 0; right: 0; top: -20%; height: 16%; z-index: 4; pointer-events: none; background: linear-gradient(transparent, rgba(var(--hc),.12) 70%, rgba(var(--hc),.35) 98%, transparent); animation: scan 5.5s linear infinite; }
@keyframes scan { to { top: 110%; } }

.holo-hud span, .hp-head, .chips, .hp-rows time, .holo-replay { font-family: var(--font-mono); }
.hp-panel { font-family: var(--font-body); }
.hud-tl, .hud-tr { position: absolute; top: 3%; z-index: 6; font-size: .82em; letter-spacing: .22em; color: rgba(var(--hc),.9); text-shadow: 0 0 10px rgba(var(--hc),.6); }
.hud-tl { left: 3%; } .hud-tr { right: 3%; }
.hud-tr span { display: none; }
.holo[data-step="0"] .hud-tr [data-at="0"], .holo[data-step="1"] .hud-tr [data-at="1"], .holo[data-step="2"] .hud-tr [data-at="2"], .holo[data-step="3"] .hud-tr [data-at="3"] { display: inline; animation: blink 1.6s infinite; }
.holo[data-step="3"] .hud-tr [data-at="3"] { animation: none; color: #7fe3b9; text-shadow: 0 0 10px rgba(52,195,143,.7); }
.holo-hud .c { position: absolute; width: 4%; aspect-ratio: 1; z-index: 6; border: 0 solid rgba(var(--hc),.7); }
.holo-hud .c1 { left: 1.2%; top: 2%; border-left-width: 2px; border-top-width: 2px; }
.holo-hud .c2 { right: 1.2%; top: 2%; border-right-width: 2px; border-top-width: 2px; }
.holo-hud .c3 { left: 1.2%; bottom: 2%; border-left-width: 2px; border-bottom-width: 2px; }
.holo-hud .c4 { right: 1.2%; bottom: 2%; border-right-width: 2px; border-bottom-width: 2px; }

.holo-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.holo-links path { fill: none; stroke: rgba(var(--hc),.65); stroke-width: .25; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); filter: drop-shadow(0 0 3px rgba(var(--hc),.9)); }
.holo.s1 .l1, .holo.s2 .l2, .holo.s3 .l3 { stroke-dashoffset: 0; }

.holo .holo-orb { position: absolute; width: 24%; left: 38%; top: 11%; margin: 0; z-index: 2; }
.holo .holo-orb .emblem { height: auto; }
.holo-wave { position: absolute; left: 50%; bottom: -9%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; height: 12%; }
.holo-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--orange-hi); box-shadow: 0 0 6px var(--orange); transform: scaleY(.2); animation: wave 1s ease-in-out infinite; }
.holo-wave i:nth-child(odd) { animation-duration: .8s; }
.holo-wave i:nth-child(3n) { animation-duration: 1.25s; animation-delay: -.3s; }
.holo-wave i:nth-child(4n) { animation-delay: -.6s; }
@keyframes wave { 0%,100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

/* Panels open one after another (classes s1, s2, s3 set by js/site.js) */
.hp-panel { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); padding: .9em 1em; border-radius: 10px; color: rgba(255,236,220,.85);
  background: linear-gradient(160deg, rgba(var(--hc),.14), rgba(var(--hc),.03) 60%), rgba(8,5,2,.72); border: 1px solid rgba(var(--hc),.45);
  box-shadow: 0 0 24px -6px rgba(var(--hc),.55), inset 0 0 24px rgba(var(--hc),.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: perspective(800px) rotateY(var(--ry, 0deg)) scale(.9); clip-path: inset(0 0 100% 0 round 10px);
  transition: opacity .6s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), clip-path .9s var(--ease) var(--d, 0s); }
.hp-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--orange-hi), transparent); opacity: .8; }
.p-mail   { --x: 2.6%; --y: 9%;  --w: 25%; --ry: 14deg; }
.p-agenda { --x: 2.6%; --y: 52%; --w: 25%; --ry: 14deg; --d: .25s; }
.p-sys    { --x: 32%;  --y: 2.4%; --w: 36%; --d: .45s; padding: .5em .8em; }
.p-map    { --x: 72.4%; --y: 9%; --w: 25%; --ry: -14deg; }
.p-video  { --x: 71.4%; --y: 46%; --w: 26%; --ry: -14deg; --d: .3s; }
.p-holo   { --x: 35%; --y: 61%; --w: 30%; }
.holo.s1 :is(.p-mail, .p-agenda, .p-sys), .holo.s2 :is(.p-map, .p-video), .holo.s3 .p-holo { opacity: 1; transform: perspective(800px) rotateY(var(--ry, 0deg)); clip-path: inset(0 0 0 0 round 10px); }
.hp-head { display: flex; justify-content: space-between; gap: .8em; font-size: .86em; letter-spacing: .16em; color: rgba(var(--hc),1); margin-bottom: .7em; white-space: nowrap; }
.hp-head b { font-weight: 500; color: #fff; background: rgba(var(--hc),.3); padding: 0 .5em; border-radius: 4px; }
.hp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.hp-rows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6em; padding: .45em .55em; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0s) + .6s + var(--i) * .18s); }
.hp-rows li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-rows li em { font-style: normal; font-size: .82em; color: #7fe3b9; white-space: nowrap; }
.hp-rows .dot { width: .6em; height: .6em; border-radius: 50%; background: rgba(255,255,255,.3); }
.hp-rows .dot.hot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.hp-rows.agenda li { grid-template-columns: auto 1fr; border-left: 2px solid var(--orange); }
.hp-rows.agenda time { color: var(--orange-hi); }
.holo.s1 :is(.p-mail, .p-agenda) .hp-rows li { opacity: 1; transform: none; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: .4em 1em; font-size: .82em; letter-spacing: .12em; color: rgba(255,236,220,.8); }

.map { display: block; width: 100%; height: auto; border-radius: 6px; background: rgba(0,0,0,.35); }
.map .streets path { stroke: rgba(255,255,255,.1); stroke-width: 1; fill: none; }
.map .river { fill: none; stroke: rgba(74,163,255,.35); stroke-width: 5; }
.map .route { fill: none; stroke: var(--orange-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px var(--orange)); transition: stroke-dashoffset 1.6s var(--ease) .9s; }
.holo.s2 .map .route { stroke-dashoffset: 0; }
.map .start { fill: #fff; }
.map .pin circle { fill: var(--orange); }
.map .pin .pulse { fill: none; stroke: var(--orange); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.hp-foot { margin-top: .6em; font-size: .86em; color: rgba(255,236,220,.7); }
.hp-foot b { color: var(--orange-hi); font-weight: 500; }

.vid-frame { position: relative; aspect-ratio: 16 / 8; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #2a1206, #8a3a0a 60%, #ff9a4a); }
.vid-frame .sun { position: absolute; left: 50%; top: 30%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #fff3d6, #ffb36b 60%, transparent 70%); }
.vid-frame .hills { position: absolute; left: -10%; right: -10%; bottom: -34%; height: 70%; border-radius: 50% 50% 0 0; background: #160a04; }
.vid-sub { position: absolute; left: 0; right: 0; bottom: 8%; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05em; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 6px #000; }
.vid-sub span { display: inline-block; animation: karaoke 2.4s infinite; }
.vid-sub span:nth-child(2) { animation-delay: .6s; }
.vid-sub span:nth-child(3) { animation-delay: 1.2s; }
.vid-sub span:nth-child(4) { animation-delay: 1.8s; }
@keyframes karaoke { 0%, 30%, 100% { color: #fff; transform: none; } 8%, 22% { color: var(--orange-hi); transform: translateY(-2px) scale(1.08); } }
.vid-tracks { position: relative; height: 2.4em; margin-top: .6em; }
.vid-tracks i { position: absolute; left: var(--l); width: var(--w); top: 0; height: calc(50% - 2px); border-radius: 3px; background: rgba(var(--hc),.55); border: 1px solid rgba(255,255,255,.25); }
.vid-tracks i.t2 { top: auto; bottom: 0; background: rgba(74,163,255,.45); }
.vid-tracks .playhead { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; animation: playhead 4s linear infinite; }
@keyframes playhead { to { left: 100%; } }

.holo3d { position: relative; height: 7.6em; display: grid; place-items: center; perspective: 600px; }
.cube-wrap { --c: 4.2cqw; position: relative; width: var(--c); height: var(--c); transform-style: preserve-3d; animation: cube 9s linear infinite; }
@keyframes cube { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.2s var(--ease) .6s; }
.cube i { position: absolute; inset: 0; border: 1px solid rgba(var(--hc),.9); background: rgba(var(--hc),.07); box-shadow: inset 0 0 10px rgba(var(--hc),.35); }
.cube .f1 { transform: translateZ(calc(var(--c) / 2)); }
.cube .f2 { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.cube .f3 { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.cube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.cube .f5 { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); }
.cube .f6 { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
.cube.inner { transform: scale(.45); }
.cube.inner i { border-color: #fff; background: rgba(255,255,255,.12); }
.plate { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; border: 1px dashed rgba(var(--hc),.8); border-radius: 50%; transition: transform 1.2s var(--ease) .6s; }
.plate.top { transform: rotateX(90deg) translateZ(calc(var(--c) * .55)); }
.plate.bottom { transform: rotateX(90deg) translateZ(calc(var(--c) * -.55)); }
.holo.s3 .cube.outer { transform: scale(1.18); }
.holo.s3 .cube.inner { transform: translateY(calc(var(--c) * -.2)) scale(.45); }
.holo.s3 .plate.top { transform: rotateX(90deg) translateZ(calc(var(--c) * 1.15)); }
.holo.s3 .plate.bottom { transform: rotateX(90deg) translateZ(calc(var(--c) * -1.15)); }
.holo-base { position: absolute; bottom: 0; left: 50%; width: 60%; height: 1.4em; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--hc),.55), transparent); }

/* Dialogue subtitles, one line per step */
.holo-subs { position: absolute; left: 50%; bottom: 3.5%; z-index: 7; width: min(64%, 760px); transform: translateX(-50%); display: grid; text-align: center; }
.holo-subs p { grid-area: 1 / 1; align-self: end; margin: 0; padding: .55em 1em; border-radius: 8px; background: rgba(0,0,0,.66); color: #fff; font-family: var(--font-body); font-size: clamp(13px, 1.45cqw, 18px); line-height: 1.45;
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.holo-subs b { font-family: var(--font-mono); font-weight: 500; font-size: .72em; letter-spacing: .2em; color: var(--orange-hi); margin-right: .6em; }
.holo[data-step="0"] .holo-subs [data-at="0"], .holo[data-step="1"] .holo-subs [data-at="1"], .holo[data-step="2"] .holo-subs [data-at="2"], .holo[data-step="3"] .holo-subs [data-at="3"] { opacity: 1; transform: none; transition-delay: .25s; }
.holo[data-step="0"] .holo-subs [data-at="0"] b { color: #fff; }
.holo-replay { position: absolute; right: 2.4%; bottom: 3.2%; z-index: 8; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--hc),.5); background: rgba(0,0,0,.55); color: var(--orange-hi); font-size: 11px; letter-spacing: .12em; cursor: pointer; }
.holo-replay:hover { color: #fff; border-color: var(--orange); }
.holo.frozen .holo-replay { display: none; }
.holo-note { margin-top: var(--s3); text-align: center; font-size: 13px; color: var(--ink-mute); }

@media (max-width: 899px) {
  .holo { aspect-ratio: 9 / 17; font-size: clamp(8.5px, 2.5cqw, 11px); }
  .holo-links, .hud-tr { display: none; }
  .holo .holo-orb { width: 40%; left: 30%; top: 7%; }
  .p-sys    { --x: 4%;  --y: 77%; --w: 92%; --d: .5s; }
  .p-mail   { --x: 3%;  --y: 29%; --w: 46%; --ry: 0deg; }
  .p-agenda { --x: 51%; --y: 29%; --w: 46%; --ry: 0deg; }
  .p-map    { --x: 3%;  --y: 52%; --w: 46%; --ry: 0deg; }
  .p-video  { --x: 51%; --y: 52%; --w: 46%; --ry: 0deg; }
  .p-holo   { --x: 3%;  --y: 52%; --w: 46%; }
  .holo.s3 .p-map { opacity: 0; transform: scale(.9); }
  .hp-rows li em { display: none; }
  .hp-rows li { grid-template-columns: auto 1fr; }
  .hp-panel { padding: .7em .75em; }
  .hp-head { letter-spacing: .08em; white-space: normal; flex-wrap: wrap; gap: .3em .6em; }
  .holo .holo-orb { width: 34%; left: 33%; top: 7%; }
  .cube-wrap { --c: 10cqw; }
  .holo3d { height: 9em; }
  .holo-subs { width: 92%; bottom: 3%; }
  .holo-subs p { font-size: 13px; }
  .holo-replay { top: 2.6%; bottom: auto; right: 3%; }
}

/* Inspiration page blocks */
.insp-quote { padding: var(--s5); }
.insp-quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); line-height: 1.4; }
.insp-quote blockquote::before { content: "« "; color: var(--orange); }
.insp-quote blockquote::after { content: " »"; color: var(--orange); }
.insp-quote cite { display: block; margin-top: var(--s3); font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--ink-mute); }

.aio { position: relative; display: grid; gap: var(--s4); justify-items: center; }
.aio-core { position: relative; display: grid; justify-items: center; gap: 8px; }
.aio-core img { width: 96px; filter: drop-shadow(0 0 26px rgba(var(--orange-rgb),.7)); animation: float 7s ease-in-out infinite; }
.aio-core span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .4em; color: var(--orange-hi); }
.aio-grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .aio-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }
.aio-grid li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(var(--orange-rgb),.07), rgba(255,255,255,.015)); transition: border-color .3s, transform .3s var(--ease); }
.aio-grid li:hover { border-color: rgba(var(--orange-rgb),.5); transform: translateY(-2px); }
.aio-grid b { font-family: var(--font-display); font-weight: 500; font-size: 17px; }
.aio-grid span { color: var(--ink-soft); font-size: 14px; }

.vs { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .vs { grid-template-columns: 1fr 1fr 1.1fr; gap: var(--s4); align-items: stretch; } }
.vs-col { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.vs-col.featured { background: linear-gradient(170deg, rgba(var(--orange-rgb),.16), rgba(255,255,255,.02) 55%); }
.vs-col .badge { align-self: flex-start; }
.vs-top { display: grid; gap: 6px; justify-items: start; }
.vs-top h3 { font-size: 26px; }
.vs-top p { color: var(--ink-soft); }
.vs-ic { font-size: 28px; line-height: 40px; }
.vs-logo { width: 40px; filter: drop-shadow(0 0 12px rgba(var(--orange-rgb),.6)); }
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.vs-list li, .vs-legend span { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--ink-soft); }
.vs-list li::before, .vs-legend span::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }
.vs-list li small { color: var(--ink-mute); font-size: 12px; margin-left: auto; text-align: right; }
.vs-list .y { color: var(--ink); }
.vs-list .n { color: var(--ink-mute); }
.vs .y::before, .vs-legend .y::before { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.vs .p::before, .vs-legend .p::before { background: linear-gradient(90deg, var(--orange-hi) 50%, rgba(255,255,255,.15) 50%); }
.vs .n::before, .vs-legend .n::before { background: transparent; border: 1px solid rgba(255,255,255,.25); }
.vs-legend { margin-top: var(--s4); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.vs-legend span { font-size: 13px; color: var(--ink-mute); }
.insp-disclaimer { margin-top: var(--s4); font-size: 12px; }
.hero-insp + .btn-row { margin-top: var(--s4); }

/* inspiration.html: « C'est quoi, JARVIS ? » and its original illustration */
.jv { align-items: center; }
.jv-map { margin-top: var(--s4); border: 1px solid var(--stroke); border-radius: var(--r); overflow: hidden; }
.jv-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: 12px 16px; border-top: 1px solid var(--stroke); font-size: 14.5px; }
.jv-row:first-child { border-top: 0; }
.jv-row span { color: var(--ink-soft); } .jv-row b { font-weight: 500; color: var(--ink); }
.jv-head { background: rgba(var(--orange-rgb), .1); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.jv-head span { color: var(--orange-hi); }
.jv-art { margin: 0; border-radius: var(--r-lg); padding: var(--s3); background: radial-gradient(ellipse at 50% 30%, rgba(255,122,26,.14), transparent 60%), #060708;
  border: 1px solid rgba(127,212,255,.2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 0 60px rgba(127,212,255,.06); }
.jv-art svg { width: 100%; height: auto; display: block; }
.jv-art figcaption { font-size: 12px; color: var(--ink-mute); text-align: center; margin-top: 6px; }
.jv-p { animation: jvFloat 6s ease-in-out infinite; transform-box: fill-box; }
.jv-p2 { animation-delay: -1.5s; } .jv-p3 { animation-delay: -3s; } .jv-p4 { animation-delay: -4.5s; }
@keyframes jvFloat { 50% { transform: translateY(-8px); } }
.jv-orb { animation: jvPulse 3s ease-in-out infinite; transform-origin: 300px 190px; }
@keyframes jvPulse { 50% { transform: scale(1.05); filter: brightness(1.15); } }
.jv-ring2 { animation: jvSpin 18s linear infinite; transform-origin: 300px 190px; }
@keyframes jvSpin { to { transform: rotate(360deg); } }
.jv-touch { animation: jvTouch 2.4s ease-out infinite; transform-origin: 418px 294px; }
@keyframes jvTouch { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jv-p, .jv-orb, .jv-ring2, .jv-touch { animation: none; } }
@media (max-width: 720px) { .jv-row { grid-template-columns: 1fr; gap: 4px; } }

/* editions.html: who each edition is for, and the trial week band */
.plan-who { font-size: 14px; color: var(--ink-soft); background: rgba(255,255,255,.03); border: 1px solid var(--stroke); border-radius: 12px; padding: 10px 14px; margin: 0; }
.plan-who b { color: var(--orange-hi); font-weight: 500; }
.trial-band { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); flex-wrap: wrap; border-color: rgba(var(--orange-rgb), .35); }
.trial-band .grow { flex: 1; min-width: 240px; }
.trial-price { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 40% 35%, rgba(var(--orange-rgb), .35), rgba(var(--orange-rgb), .06)); border: 1px solid rgba(var(--orange-rgb), .5); text-align: center; align-content: center; }
.trial-price b { font-size: 30px; font-weight: 600; line-height: 1; } .trial-price span { font-size: 13px; color: var(--ink-soft); }
.co-trial-hide[hidden] { display: none !important; }
@media (max-width: 640px) { .trial-band { flex-direction: column; text-align: center; } .trial-band .btn { width: 100%; justify-content: center; } }

/* 12/11: the gold « ★ 2 mois offerts » badge, a light sweep every few seconds (still for reduced motion) */
.badge-star { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #2a1c00;
  background: linear-gradient(135deg, #fff1b8 0%, #f5c84c 38%, #d79a12 70%, #fbe08a 100%);
  box-shadow: 0 0 0 1px rgba(255, 214, 102, .55), 0 6px 22px -6px rgba(245, 190, 60, .75); }
.badge-star::before { content: "★"; font-size: 13px; color: #6b4600; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.badge-star::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
  transform: translateX(-120%); animation: starSweep 3.6s ease-in-out infinite; }
@keyframes starSweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .badge-star::after { animation: none; display: none; } }
.formula[data-formula-card="yearly"] { box-shadow: 0 0 0 1px rgba(245, 200, 76, .35), 0 18px 60px -30px rgba(245, 190, 60, .55); }
.co-credits { display: block; margin-top: 4px; font-size: 12px; color: var(--orange-hi); }
.co-extra { margin-top: var(--s5); }
.co-extra h2 { font-size: 20px; margin-bottom: 6px; }
.co-extra .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.co-extra .tile { padding: 16px; border-radius: 16px; border: 1px solid var(--stroke-hi); }
.co-extra .tile b { display: block; font-size: 15px; margin-bottom: 4px; }
.co-extra .tile .p { font-family: var(--font-mono); color: var(--orange-hi); font-size: 13px; }
.co-extra .tile small { display: block; color: var(--ink-mute); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
.ws-plan .badge, .ws-plan .badge-star { align-self: flex-start; }
.choice .badge-star { margin-left: 10px; vertical-align: 2px; padding: 3px 10px 3px 8px; font-size: 10px; }
.choice .grow > small { display: block; margin-top: 4px; }