/* RAVEN Store demo — uses the same visual language as the main RAVEN site. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #09080f;
  --bg-soft: #0c0a14;
  --surface: #100d1a;
  --surface-raised: #151120;
  --surface-3: #1a1528;
  --border: #282139;
  --border-bright: #3a3050;
  --accent: #c8a96e;
  --accent-soft: #e0c98f;
  --accent-rgb: 200, 169, 110;
  --violet: #a07ed4;
  --violet-bright: #c29af1;
  --violet-rgb: 160, 126, 212;
  --text: #e5e1ef;
  --text-soft: #b9b2c7;
  --muted: #91899f;
  --muted-dim: #655d74;
  --green: #4caf82;
  --danger: #c05c5c;
  --display: 'Rajdhani', sans-serif;
  --mono: 'Share Tech Mono', monospace;
  --body: 'Inter', sans-serif;
  --page: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
body::before {
  background-image:
    linear-gradient(rgba(var(--violet-rgb), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--violet-rgb), .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 24%, #000 20%, transparent 86%);
  mask-image: radial-gradient(ellipse 82% 72% at 50% 24%, #000 20%, transparent 86%);
}
body::after {
  z-index: -3;
  background:
    radial-gradient(circle at 74% 12%, rgba(var(--violet-rgb), .13), transparent 31rem),
    radial-gradient(circle at 12% 55%, rgba(var(--accent-rgb), .045), transparent 26rem),
    linear-gradient(180deg, #0b0912 0%, var(--bg) 52%, #08070d 100%);
}

::selection { background: rgba(var(--accent-rgb), .28); color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-shell { width: min(calc(100% - (var(--gutter) * 2)), var(--page)); margin-inline: auto; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 999; transform: translateY(-160%); padding: .7rem 1rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--accent-soft); font-family: var(--mono); font-size: .75rem; text-decoration: none; transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

/* Shared RAVEN header foundations; header-v3.css is loaded last for global alignment. */
.site-header { position: sticky; top: 0; z-index: 100; height: 76px; border-bottom: 1px solid rgba(58,48,80,.62); background: rgba(9,8,15,.78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.site-header.scrolled { background: rgba(9,8,15,.94); box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; flex: 0 0 auto; color: var(--text); text-decoration: none; }
.brand img { width: 38px; height: 38px; border: 1px solid rgba(var(--violet-rgb),.3); border-radius: 50%; object-fit: contain; box-shadow: 0 0 20px rgba(var(--violet-rgb),.12); }
.brand-copy { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: .13em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.brand-copy strong { color: var(--accent-soft); }
.desktop-nav { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.nav-link, .nav-status, .nav-primary { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .75rem; border: 1px solid transparent; border-radius: 7px; color: var(--text-soft); font-family: var(--mono); font-size: .69rem; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.nav-active { border-color: rgba(var(--violet-rgb), .28) !important; color: var(--violet-bright) !important; background: rgba(var(--violet-rgb), .05) !important; }
.nav-status { gap: .48rem; color: var(--green); }
.nav-primary { margin-left: .35rem; border-color: rgba(var(--accent-rgb),.68); color: var(--accent-soft); background: rgba(var(--accent-rgb),.07); }
.dot-sm { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(76,175,130,.7); }
.mobile-toggle { width: 40px; height: 40px; display: none; place-items: center; border: 1px solid var(--border-bright); border-radius: 8px; background: rgba(255,255,255,.02); }
.toggle-lines { display: grid; gap: 4px; }
.toggle-lines span { width: 18px; height: 1px; display: block; background: var(--text-soft); }
.mobile-nav { display: none; visibility: hidden; pointer-events: none; position: fixed; top: 76px; left: 0; right: 0; z-index: 99; padding: 1rem var(--gutter) 1.25rem; border-bottom: 1px solid var(--border-bright); background: rgba(9,8,15,.975); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: translateY(-8px); opacity: 0; transition: transform .22s ease, opacity .22s ease, visibility .22s ease; }
.mobile-nav.open { visibility: visible; pointer-events: auto; transform: translateY(0); opacity: 1; }
.mobile-nav-inner { width: min(100%, var(--page)); margin-inline: auto; display: flex; flex-direction: column; gap: .65rem; }
.mobile-nav a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: rgba(255,255,255,.018); font-family: var(--mono); font-size: .78rem; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }

/* Shared page components */
main { width: min(calc(100% - (var(--gutter) * 2)), var(--page)); margin: 0 auto; padding: clamp(2.7rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem); flex: 1; }
.breadcrumb { margin-bottom: 1.45rem; display: flex; align-items: center; gap: .55rem; color: var(--muted-dim); font-family: var(--mono); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
.breadcrumb a { color: var(--accent-soft); text-decoration: none; }
.eyebrow { margin-bottom: .75rem; color: var(--violet-bright); font-family: var(--mono); font-size: .68rem; letter-spacing: .19em; text-transform: uppercase; }
.store-hero { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); align-items: end; gap: .1rem 2rem; }
.store-hero .eyebrow, .store-hero h1 { grid-column: 1; }
.store-hero .hero-copy { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.store-hero h1 { color: #f0edf6; font-family: var(--display); font-size: clamp(2.5rem,4.5vw,3.8rem); font-weight: 700; letter-spacing: -.01em; line-height: .95; text-transform: uppercase; }
.hero-copy { max-width: 700px; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.7; }
.hero-copy strong { color: var(--accent-soft); font-weight: 500; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 0 1.15rem; border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--text); font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--accent); color: var(--bg); }
.button-primary:hover { background: var(--accent-soft); }
.button-secondary { border-color: var(--border-bright); color: var(--text-soft); background: rgba(255,255,255,.015); }
.button-secondary:hover { border-color: rgba(var(--violet-rgb),.5); color: var(--violet-bright); background: rgba(var(--violet-rgb),.05); }
.page-error { margin-top: .75rem; color: var(--danger); font-family: var(--mono); font-size: .67rem; line-height: 1.5; }
.page-error:empty, .modal-error:empty { display: none; }

/* Store hub */
.path-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.path-card { --card-accent: var(--accent); min-height: 430px; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.15rem); border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, rgba(21,17,32,.97), rgba(10,8,16,.98)); box-shadow: 0 22px 62px rgba(0,0,0,.2); }
.path-card.development { --card-accent: var(--violet-bright); }
.path-card::before { content: ''; position: absolute; top: -1px; left: 2rem; width: 110px; height: 2px; background: var(--card-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 55%, transparent); }
.path-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--card-accent); font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.path-mark { color: var(--muted-dim); font-size: .58rem; }
.path-card h2 { margin-top: 1.7rem; color: var(--text); font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.15rem); line-height: .95; text-transform: uppercase; }
.path-card > p { max-width: 540px; margin-top: .8rem; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.service-points { margin-top: 1.25rem; padding: 1.05rem; display: grid; gap: .62rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(8,7,13,.24); }
.service-points span { color: var(--text-soft); font-family: var(--mono); font-size: .78rem; letter-spacing: .025em; line-height: 1.5; }
.service-points span::before { content: '◆'; margin-right: .62rem; color: var(--card-accent); font-size: .45rem; }
.path-footer { margin-top: auto; padding-top: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.path-footer > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem; color: var(--muted); font-family: var(--mono); font-size: .62rem; }
.path-footer small { width: 100%; color: var(--muted-dim); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.path-footer strong { color: var(--accent-soft); font-family: var(--display); font-size: 2.45rem; line-height: .9; }
.trust-row { margin-top: 1rem; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: rgba(16,13,26,.74); }
.trust-row > div { min-height: 82px; padding: 1rem; display: grid; place-items: center; gap: .15rem; border-right: 1px solid var(--border); text-align: center; }
.trust-row > div:last-child { border-right: 0; }
.trust-row strong { color: var(--accent-soft); font-family: var(--display); font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.trust-row span { color: var(--muted); font-family: var(--mono); font-size: .72rem; line-height: 1.5; }
.supporter-section { margin-top: 3.5rem; position: relative; overflow: hidden; padding: clamp(1.75rem,4vw,3rem); border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(circle at 92% 4%, rgba(var(--accent-rgb),.08), transparent 24rem), linear-gradient(135deg, rgba(19,15,31,.97), rgba(11,9,18,.98)); box-shadow: 0 22px 62px rgba(0,0,0,.2); }
.supporter-section::before { content: ''; position: absolute; top: -1px; right: 11%; width: 112px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.supporter-heading { display: grid; grid-template-columns: minmax(0,.85fr) minmax(300px,1.15fr); align-items: end; gap: 2rem; }
.supporter-heading h2 { color: #ede9f4; font-family: var(--display); font-size: clamp(2.35rem,4vw,3.5rem); line-height: .96; text-transform: uppercase; }
.supporter-heading > p { max-width: 680px; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.supporter-tier-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.supporter-tier-card { --tier-rail-width: 28%; --tier-rail-opacity: .28; --tier-glow-opacity: .012; min-height: 210px; position: relative; overflow: hidden; padding: 1.35rem; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb),var(--tier-glow-opacity)), transparent 9rem), rgba(255,255,255,.016); text-align: center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.supporter-tier-card::before { content: ''; position: absolute; top: -1px; left: 50%; width: var(--tier-rail-width); height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),var(--tier-rail-opacity)), transparent); }
.supporter-tier-card:hover { transform: translateY(-2px); }
.supporter-tier-card:nth-child(2) { --tier-rail-width: 40%; --tier-rail-opacity: .42; --tier-glow-opacity: .02; }
.supporter-tier-card:nth-child(3) { --tier-rail-width: 56%; --tier-rail-opacity: .62; --tier-glow-opacity: .038; border-color: rgba(var(--accent-rgb),.24); }
.supporter-tier-card:nth-child(4) { --tier-rail-width: 72%; --tier-rail-opacity: .88; --tier-glow-opacity: .07; border-color: rgba(var(--accent-rgb),.38); box-shadow: inset 0 1px 0 rgba(var(--accent-rgb),.05), 0 16px 38px rgba(var(--accent-rgb),.035); }
.supporter-tier-card h3 { color: var(--text-soft); font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.supporter-tier-card:nth-child(3) h3 { color: #c9bdac; }
.supporter-tier-card:nth-child(4) h3 { color: var(--accent-soft); }
.supporter-price { margin: .75rem 0 1.15rem; display: flex; align-items: baseline; justify-content: center; gap: .18rem; }
.supporter-price strong { color: var(--accent-soft); font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.supporter-tier-card:nth-child(4) .supporter-price strong { text-shadow: 0 0 20px rgba(var(--accent-rgb),.2); }
.supporter-price span { color: var(--muted); font-family: var(--mono); font-size: .68rem; }
.supporter-tier-card .button { width: 100%; margin-top: auto; border-color: rgba(var(--accent-rgb),.55); color: var(--accent-soft); background: rgba(var(--accent-rgb),.025); }
.supporter-tier-card .button:hover { border-color: rgba(var(--accent-rgb),.82); color: #f0dca8; background: rgba(var(--accent-rgb),.08); }
.supporter-tier-card:nth-child(3) .button { background: rgba(var(--accent-rgb),.04); }
.supporter-tier-card:nth-child(4) .button { border-color: rgba(var(--accent-rgb),.72); background: linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.055)); box-shadow: inset 0 0 18px rgba(var(--accent-rgb),.035); }
.supporter-section .page-error { margin-bottom: 0; }
.store-support-panel { margin-top: 3.5rem; position: relative; overflow: hidden; padding: clamp(1.75rem,4vw,3rem); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); align-items: end; gap: 2rem; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(circle at 94% 0%, rgba(var(--violet-rgb),.12), transparent 20rem), linear-gradient(135deg, rgba(19,15,31,.96), rgba(12,10,19,.97)); box-shadow: 0 22px 62px rgba(0,0,0,.2); }
.store-support-panel::before { content: ''; position: absolute; top: -1px; right: 12%; width: 112px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.store-support-panel .eyebrow { margin-bottom: .45rem; }
.support-panel-copy h2 { color: #ede9f4; font-family: var(--display); font-size: clamp(2.2rem,4vw,3.25rem); line-height: .96; text-transform: uppercase; }
.support-panel-copy > p:last-child { max-width: 720px; margin-top: .7rem; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.support-panel-action { padding: 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.015); }
.support-panel-action > span { display: block; margin-bottom: .85rem; color: var(--muted); font-family: var(--mono); font-size: .62rem; text-align: center; }
.support-panel-action > span strong { color: var(--accent-soft); font-size: .78rem; }
.support-panel-action .button { width: 100%; }

/* Hosting configurator */
.configurator { margin-top: 2.6rem; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.65fr); gap: 1rem; align-items: start; opacity: .55; pointer-events: none; transition: opacity .2s ease; }
.configurator.ready { opacity: 1; pointer-events: auto; }
.config-panel, .order-summary { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, rgba(20,16,31,.98), rgba(10,8,16,.98)); box-shadow: 0 22px 62px rgba(0,0,0,.18); }
.config-panel { padding: clamp(1.35rem,3vw,2rem); }
.config-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.config-heading > div { display: flex; align-items: flex-start; gap: 1rem; }
.step-index { min-width: 34px; color: var(--accent); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; }
.config-heading p { color: var(--violet-bright); font-family: var(--mono); font-size: .59rem; letter-spacing: .12em; text-transform: uppercase; }
.config-heading h2 { margin-top: .3rem; color: var(--text); font-family: var(--display); font-size: 1.55rem; line-height: 1; text-transform: uppercase; }
.capacity-badge { flex: none; padding: .32rem .55rem; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.resource-control { margin-top: 1.35rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.014); }
.resource-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.resource-head label { color: var(--text); font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.resource-head small { display: block; margin-top: .2rem; color: var(--muted); font-size: .68rem; }
.resource-output { text-align: right; }
.resource-output strong { display: block; color: var(--accent-soft); font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.resource-output span { color: var(--green); font-family: var(--mono); font-size: .56rem; }
.resource-slider { width: 100%; height: 24px; margin-top: 1.1rem; appearance: none; background: transparent; cursor: pointer; }
.resource-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), rgba(var(--violet-rgb),.55)); }
.resource-slider::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), rgba(var(--violet-rgb),.55)); }
.resource-slider::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; appearance: none; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(var(--accent-rgb),.3); }
.resource-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.range-labels { display: flex; justify-content: space-between; color: var(--muted-dim); font-family: var(--mono); font-size: .55rem; }
.support-note { margin-top: 1rem; padding: .9rem 1rem; display: flex; align-items: flex-start; gap: .7rem; border: 1px solid rgba(var(--violet-rgb),.2); border-radius: 9px; background: rgba(var(--violet-rgb),.035); color: var(--violet-bright); }
.support-note p { color: var(--muted); font-size: .74rem; line-height: 1.55; }
.support-note strong { color: var(--text-soft); font-weight: 500; }
.support-note a { color: var(--accent-soft); font-weight: 500; text-underline-offset: .18em; }
.addon-heading, .quantity-heading { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--border); }
.addon-grid { margin-top: 1.25rem; display: grid; gap: .65rem; }
.addon-card { width: 100%; min-height: 104px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.012); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.addon-card:hover { transform: translateX(2px); border-color: var(--border-bright); }
.addon-card.selected { border-color: rgba(var(--violet-rgb),.52); background: rgba(var(--violet-rgb),.055); }
.addon-check { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-bright); border-radius: 7px; color: var(--violet-bright); font-family: var(--mono); }
.addon-card.selected .addon-check { border-color: var(--violet-bright); background: rgba(var(--violet-rgb),.12); }
.addon-copy strong { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.addon-copy small { max-width: 620px; display: block; margin-top: .2rem; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.addon-price { color: var(--accent-soft); font-family: var(--display); font-size: 1.25rem; font-weight: 700; text-align: right; }
.addon-price small { display: block; color: var(--muted); font-family: var(--mono); font-size: .52rem; font-weight: 400; }
.quantity-row { margin-top: 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.012); }
.quantity-row > div:first-child strong { display: block; color: var(--text); font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; }
.quantity-row > div:first-child span { display: block; margin-top: .2rem; color: var(--muted); font-size: .66rem; }
.quantity-picker { flex: none; display: flex; align-items: center; gap: .2rem; padding: .25rem; border: 1px solid var(--border-bright); border-radius: 8px; background: var(--surface-raised); }
.quantity-picker button { width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--violet-bright); font-size: 1rem; cursor: pointer; }
.quantity-picker button:hover:not(:disabled) { background: rgba(var(--violet-rgb),.08); }
.quantity-picker button:disabled { color: var(--muted-dim); cursor: not-allowed; }
.quantity-picker output { min-width: 2.2rem; color: var(--text); font-family: var(--mono); font-size: .82rem; text-align: center; }
.order-summary { position: sticky; top: 96px; padding: 1.45rem; border-color: rgba(var(--accent-rgb),.35); background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.08), transparent 17rem), linear-gradient(145deg, rgba(20,16,31,.99), rgba(10,8,16,.99)); }
.summary-topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--violet-bright); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.order-summary h2 { margin-top: .75rem; color: var(--text); font-family: var(--display); font-size: 2rem; text-transform: uppercase; }
.summary-specs { margin-top: 1rem; display: grid; grid-template-columns: repeat(2,1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 9px; }
.summary-specs > div { min-height: 70px; padding: .75rem; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.summary-specs > div:nth-child(2) { border-right: 0; }
.summary-specs .wide { grid-column: 1/-1; border: 0; }
.summary-specs span { color: var(--muted-dim); font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.summary-specs strong { margin-top: .2rem; color: var(--text-soft); font-family: var(--mono); font-size: .68rem; font-weight: 400; }
.summary-lines { margin-top: 1rem; padding: .85rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.summary-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; color: var(--muted); font-size: .68rem; }
.summary-lines strong { color: var(--text-soft); font-family: var(--mono); font-weight: 400; }
.summary-discount { min-height: 34px; margin-top: .75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.012); font-family: var(--mono); font-size: .57rem; line-height: 1.45; }
.summary-discount.active { border-color: rgba(76,175,130,.28); color: var(--green); background: rgba(76,175,130,.035); }
.summary-total-row { margin-top: 1.2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.summary-total-row > span { color: var(--text-soft); font-family: var(--display); font-size: 1rem; text-transform: uppercase; }
.summary-total-row div { display: flex; align-items: baseline; gap: .2rem; }
.summary-total-row strong { color: var(--accent-soft); font-family: var(--display); font-size: 2.65rem; line-height: .9; }
.summary-total-row small { color: var(--muted); font-family: var(--mono); font-size: .57rem; }
.summary-button { width: 100%; margin-top: 1.25rem; }
.summary-fineprint { margin-top: .6rem; color: var(--muted-dim); font-family: var(--mono); font-size: .55rem; text-align: center; }

/* Modular custom development */
.development-configurator { margin-top: 2rem; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.65fr); gap: 1rem; align-items: start; opacity: .55; pointer-events: none; transition: opacity .2s ease; }
.development-configurator.ready { opacity: 1; pointer-events: auto; }
.development-builder, .development-summary { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(circle at 90% 0%, rgba(var(--violet-rgb),.1), transparent 15rem), linear-gradient(145deg, rgba(21,17,32,.98), rgba(12,10,19,.97)); box-shadow: 0 18px 52px rgba(0,0,0,.18); }
.development-builder { padding: clamp(1.4rem,3vw,1.75rem); }
.development-builder::before, .development-summary::before { content: ''; position: absolute; top: -1px; left: 1.75rem; width: 72px; height: 2px; background: var(--violet-bright); box-shadow: 0 0 16px rgba(var(--violet-rgb),.5); }
.foundation-card { padding: 1.15rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(8,7,13,.28); }
.foundation-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted-dim); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.card-badge { display: inline-block; padding: .28rem .55rem; border: 1px solid rgba(var(--violet-rgb),.28); border-radius: 4px; color: var(--violet-bright); background: rgba(var(--violet-rgb),.08); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.foundation-grid { margin-top: 1.15rem; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: end; }
.foundation-grid h2 { color: #f0edf6; font-family: var(--display); font-size: clamp(1.8rem,3vw,2.35rem); line-height: 1; text-transform: uppercase; }
.foundation-grid p { max-width: 560px; margin-top: .55rem; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.foundation-price { text-align: right; }
.foundation-price strong { display: block; color: var(--accent-soft); font-family: var(--display); font-size: 2.55rem; line-height: .9; }
.foundation-price span { color: var(--muted); font-family: var(--mono); font-size: .52rem; }
.foundation-features { margin-top: 1.15rem; padding: 1rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem 1rem; border: 1px solid var(--border); border-radius: 8px; list-style: none; }
.foundation-features li { color: var(--text-soft); font-family: var(--mono); font-size: .74rem; line-height: 1.5; }
.foundation-features li::before { content: '◆'; margin-right: .5rem; color: var(--violet-bright); font-size: .38rem; }
.builder-heading { margin-top: 2rem; padding-top: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); }
.builder-heading > div { display: flex; gap: 1rem; }
.builder-heading p { color: var(--violet-bright); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.builder-heading h2 { margin-top: .25rem; color: var(--text); font-family: var(--display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.development-module-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.development-care-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.development-option-card { min-height: 128px; position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .75rem; padding: .9rem; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.012); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.development-option-card:hover { transform: translateY(-2px); border-color: var(--border-bright); }
.development-option-card.selected { border-color: rgba(var(--violet-rgb),.5); background: rgba(var(--violet-rgb),.055); }
.option-check { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border-bright); border-radius: 6px; color: var(--violet-bright); font-family: var(--mono); }
.development-option-card.selected .option-check { border-color: var(--violet-bright); background: rgba(var(--violet-rgb),.12); }
.option-copy strong { display: block; color: var(--text); font-family: var(--display); font-size: .98rem; letter-spacing: .03em; text-transform: uppercase; }
.option-copy small { display: block; margin-top: .25rem; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.option-price { grid-column: 2; align-self: end; color: var(--accent-soft); font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.option-price small { margin-left: .25rem; color: var(--muted-dim); font-family: var(--mono); font-size: .5rem; font-weight: 400; }
.care-heading { margin-top: 1.7rem; }
.care-option { min-height: 112px; }
.development-summary { position: sticky; top: 96px; padding: 1.45rem; border-color: rgba(var(--violet-rgb),.4); }
.development-summary h2 { margin-top: .75rem; color: var(--text); font-family: var(--display); font-size: 2rem; text-transform: uppercase; }
.development-selection { margin-top: 1rem; min-height: 80px; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(8,7,13,.24); }
.development-selection span { display: block; color: var(--muted-dim); font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.development-selection strong { display: block; margin-top: .3rem; color: var(--text-soft); font-family: var(--mono); font-size: .62rem; font-weight: 400; line-height: 1.5; }
.development-estimate-total { margin-top: 1.2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.development-estimate-total span { color: var(--text-soft); font-family: var(--display); font-size: 1rem; text-transform: uppercase; }
.development-estimate-total strong { color: var(--accent-soft); font-family: var(--display); font-size: 2.65rem; line-height: .9; }
.timeline-estimate { margin-top: .85rem; padding: .7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); font-family: var(--mono); font-size: .59rem; }
.timeline-estimate strong { color: var(--violet-bright); font-weight: 400; }
.deposit-credit { margin-top: .8rem; padding: .8rem; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 8px; background: rgba(var(--accent-rgb),.035); }
.deposit-credit span { color: var(--muted); font-family: var(--mono); font-size: .56rem; text-transform: uppercase; }
.deposit-credit strong { margin-left: .4rem; color: var(--accent-soft); font-family: var(--display); font-size: 1.5rem; }
.deposit-credit p { margin-top: .2rem; color: var(--muted); font-size: .62rem; }

/* Checkout modal */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 1rem; background: rgba(5,4,9,.84); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.modal-overlay.open { display: flex; }
.modal { width: min(490px,calc(100vw - 2rem)); position: relative; padding: 2rem; border: 1px solid var(--border-bright); border-radius: 14px; background: radial-gradient(circle at 100% 0%, rgba(var(--violet-rgb),.12), transparent 16rem), linear-gradient(145deg, rgba(21,17,32,.99), rgba(12,10,19,.99)); box-shadow: 0 34px 100px rgba(0,0,0,.5); }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.02); color: var(--muted); cursor: pointer; }
.modal-title { margin-top: .35rem; color: #f0edf6; font-family: var(--display); font-size: 1.9rem; text-transform: uppercase; }
.modal-copy { margin-top: .6rem; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.modal-order-summary { margin-top: .9rem; padding: .7rem; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 7px; color: var(--accent-soft); background: rgba(var(--accent-rgb),.035); font-family: var(--mono); font-size: .62rem; }
.account-card { margin-top: 1.1rem; display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); }
.account-card img { width: 40px; height: 40px; border-radius: 50%; }
.account-name { color: var(--text); font-family: var(--mono); font-size: .8rem; }
.account-note { margin-top: .12rem; color: var(--muted); font-size: .66rem; }
#accountArea > .button { width: 100%; margin-top: 1rem; }
.button-discord { border-color: #5865f2; background: #5865f2; color: #fff; }
.manual-link { margin-top: .7rem; display: block; border: 0; background: none; color: var(--muted); font-size: .68rem; text-decoration: underline; cursor: pointer; }
.manual-form { display: none; margin-top: 1rem; }
.manual-form.open { display: block; }
.field-label { display: block; margin-bottom: .4rem; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.field-input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: #0d0a16; color: var(--text); font-family: var(--mono); }
.manual-form .button, .mock-checkout { width: 100%; margin-top: .8rem; }
.modal-error { margin-top: .65rem; color: var(--danger); font-family: var(--mono); font-size: .66rem; }
.checkout-toast { display: none; position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 300; width: min(430px,calc(100vw - 2rem)); padding: 1rem 1.15rem; border: 1px solid rgba(var(--accent-rgb),.4); border-radius: 11px; background: rgba(20,16,31,.98); box-shadow: 0 22px 64px rgba(0,0,0,.45); }
.checkout-toast.open { display: block; }
.toast-title { color: var(--accent-soft); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.toast-copy { margin-top: .35rem; color: var(--text-soft); font-size: .75rem; line-height: 1.55; }

/* Shared RAVEN footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--border); background: rgba(7,6,11,.56); }
.footer-inner { padding-block: 2rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: .8rem; }
.footer-brand img { width: 34px; height: 34px; border-radius: 50%; opacity: .8; }
.footer-copy { color: var(--muted-dim); font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; line-height: 1.6; text-transform: uppercase; }
.footer-copy strong { color: var(--accent); font-weight: 400; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem 1.25rem; }
.footer-links a { color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.footer-links a:hover { color: var(--accent-soft); }

@media (max-width: 980px) {
  .configurator, .development-configurator { grid-template-columns: 1fr; }
  .order-summary, .development-summary { position: static; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 370px; }
  .supporter-tier-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .desktop-nav { display: none; }
  .mobile-toggle { display: grid; }
  .mobile-nav { display: block; }
  .store-hero, .store-support-panel, .supporter-heading { grid-template-columns: 1fr; align-items: start; }
  .store-hero .eyebrow, .store-hero h1, .store-hero .hero-copy { grid-column: 1; grid-row: auto; }
  .store-hero .hero-copy { margin-top: .8rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .site-header { height: 70px; }
  .mobile-nav { top: 70px; }
  .brand img { width: 34px; height: 34px; }
  .brand-copy { font-size: .9rem; letter-spacing: .1em; }
  main { padding-top: 2rem; }
  .store-hero h1 { font-size: clamp(2.4rem,12vw,3.35rem); }
  .path-card { min-height: 0; }
  .path-footer { align-items: stretch; flex-direction: column; }
  .path-footer .button { width: 100%; }
  .trust-row { grid-template-columns: 1fr; }
  .trust-row > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .trust-row > div:last-child { border-bottom: 0; }
  .supporter-tier-grid { grid-template-columns: 1fr; }
  .config-panel { padding: 1.15rem; }
  .config-heading h2 { font-size: 1.3rem; }
  .capacity-badge { display: none; }
  .resource-head { align-items: flex-end; }
  .addon-card { grid-template-columns: auto minmax(0,1fr); }
  .addon-price { grid-column: 2; text-align: left; }
  .quantity-row { align-items: flex-start; flex-direction: column; }
  .foundation-grid, .foundation-features, .development-module-grid, .development-care-grid { grid-template-columns: 1fr; }
  .foundation-price { text-align: left; }
  .foundation-topline { align-items: flex-start; flex-direction: column; }
  .development-builder { padding: 1.25rem; }
  .footer-brand { align-items: flex-start; }
}