/* =====================================================================
STUDIO HAJINAIM — Premium Digital Practice
Editorial · Asymmetric · Dual-accent · Edge-to-edge
Pure CSS · Handcrafted · No frameworks
===================================================================== */
/* ---------- 0. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(var(--accent-rgb),0.18)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;color-scheme:dark light}
body,h1,h2,h3,h4,p,figure,blockquote,ol,ul,dl,pre{margin:0}
ol,ul{padding:0;list-style:none}
img,svg,video,iframe{max-width:100%;display:block}
iframe{border:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none;-webkit-touch-callout:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--copper);color:#fff}
/* ---------- 1. TOKENS — DARK PURPLE (default) ---------- */
:root{
/* Deep navy-violet layered surfaces — rich & vibrant */
--bg: #0B0718; /* deepest: obsidian violet */
--bg-2: #120B28; /* shade up */
--bg-3: #1A1240; /* higher */
--surface: #231659; /* card base */
--surface-2: #2D1F72; /* elevated */
--surface-3: #382886; /* highest */
/* Near-white lavender text stack */
--ink: #F4F1FF;
--ink-2: #C8C0E8;
--ink-mute: #9289B8;
--ink-faint: #615889;
/* Lines */
--line: rgba(244,241,255,0.10);
--line-soft: rgba(244,241,255,0.05);
--line-strong: rgba(244,241,255,0.22);
/* Triple accents — electric violet + luminous magenta + smooth peach (3-color) */
--copper: #B35DFF; /* semantic alias kept: electric violet (primary) */
--copper-soft: #9333EA;
--copper-bright: #D8B4FE;
--accent-rgb: 179,93,255;
--gold: #E879F9; /* semantic alias kept: luminous magenta (secondary) */
--gold-soft: #D946EF;
--gold-bright: #F0ABFC;
--accent-2-rgb: 232,121,249;
/* Tertiary warm accent — smooth peach/amber for status, markers, highlights */
--amber: #FDBA74;
--amber-soft: #F97316;
--amber-bright: #FED7AA;
--accent-3-rgb: 253,186,116;
--sage: #7D6FB0; /* quiet violet-grey */
/* Inverted surface (pure white for light-mode reference) */
--inv-bg: #FFFFFF;
--inv-bg-2: #FAFAFA;
--inv-ink: #0F0A1F;
/* Typography — editorial premium pairing */
--serif: "Instrument Serif","EB Garamond","Cormorant Garamond","Times New Roman",Georgia,serif;
--sans: "Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--mono: "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
/* Layout — full edge-to-edge with generous gutter */
--gutter: clamp(28px, 5.6vw, 120px);
--gutter-tight: clamp(20px, 3.2vw, 56px);
--section-y: clamp(80px, 11vw, 180px);
/* Motion */
--ease: cubic-bezier(0.22,0.61,0.36,1);
--ease-out: cubic-bezier(0.16,1,0.3,1);
--ease-in-out: cubic-bezier(0.65,0,0.35,1);
--t-fast: 220ms;
--t-med: 520ms;
--t-slow: 920ms;
}
/* ---------- 1b. LIGHT THEME OVERRIDES (clean white — purple only as accent) ---------- */
:root[data-theme="light"]{
/* Pure white / near-white backgrounds — NO tint */
--bg: #FFFFFF; /* true white */
--bg-2: #FAFAFA;
--bg-3: #F4F4F6;
--surface: #FFFFFF;
--surface-2: #FAFAFA;
--surface-3: #F4F4F6;
/* Near-black text with subtle violet undertone */
--ink: #0F0A1F;
--ink-2: #3A3550;
--ink-mute: #72707E;
--ink-faint: #B4B1BE;
/* Lines — soft neutral grey, not tinted purple */
--line: rgba(15,10,31,0.10);
--line-soft: rgba(15,10,31,0.05);
--line-strong: rgba(15,10,31,0.18);
/* Triple accents — vivid royal violet + rich magenta + burnt orange */
--copper: #7C3AED; /* rich royal violet (primary) */
--copper-soft: #6D28D9;
--copper-bright: #8B5CF6;
--accent-rgb: 124,58,237;
--gold: #C026D3; /* luminous magenta (secondary) */
--gold-soft: #A21CAF;
--gold-bright: #D946EF;
--accent-2-rgb: 192,38,211;
/* Tertiary warm accent — burnt orange richer for white bg contrast */
--amber: #EA580C;
--amber-soft: #C2410C;
--amber-bright: #FB923C;
--accent-3-rgb: 234,88,12;
--sage: #7D6FB0;
/* Inverted surface becomes the dark obsidian */
--inv-bg: #0B0718;
--inv-bg-2: #1A1240;
--inv-ink: #F4F1FF;
}
/* ---------- 2. BASE ---------- */
html,body{background:var(--bg);color:var(--ink);min-height:100%}
body{
font-family:var(--sans);
font-size:16px;line-height:1.65;font-weight:400;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
letter-spacing:-0.011em;overflow-x:hidden;
transition:background-color 320ms var(--ease), color 320ms var(--ease);
}
p{color:var(--ink-2)}
strong{font-weight:500;color:var(--ink)}
em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--copper-bright)}
:root[data-theme="light"] em{color:var(--copper)}
hr{border:0;height:1px;background:var(--line);margin:0}
/* ---------- 2b. AURORA AMBIENT (galaxy nebula + drifting ribbons) ---------- */
/* Fixed full-screen ambient layer. Very subtle. Disabled for reduced-motion. */
.grain{display:none} /* legacy grain replaced by aurora */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;isolation:isolate}
.aurora::before,
.aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:0.75;mix-blend-mode:screen;will-change:transform}
.aurora::before{
width:75vmax;height:75vmax;left:-15vmax;top:-25vmax;
background:radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),0.68), rgba(var(--accent-rgb),0) 62%);
animation:auroraDriftA 32s cubic-bezier(0.45,0.05,0.55,0.95) infinite alternate;
}
.aurora::after{
width:65vmax;height:65vmax;right:-12vmax;bottom:-22vmax;
background:radial-gradient(circle at 50% 50%, rgba(var(--accent-2-rgb),0.55), rgba(var(--accent-2-rgb),0) 60%);
animation:auroraDriftB 40s cubic-bezier(0.45,0.05,0.55,0.95) infinite alternate;
}
.aurora__ribbon{
position:absolute;inset:-10%;
background:
conic-gradient(from 180deg at 50% 50%,
rgba(var(--accent-rgb),0.00) 0deg,
rgba(var(--accent-rgb),0.22) 50deg,
rgba(var(--accent-2-rgb),0.22) 130deg,
rgba(var(--accent-3-rgb),0.18) 210deg,
rgba(var(--accent-rgb),0.00) 280deg);
filter:blur(100px);opacity:0.80;mix-blend-mode:screen;
animation:auroraSpin 90s linear infinite;
}
.aurora__stars{position:absolute;inset:0;background-repeat:repeat;opacity:0.55}
/* Light mode: keep aurora VERY subtle \u2014 white bg stays clean, purple only as aura hint */
:root[data-theme="light"] .aurora::before{opacity:0.12}
:root[data-theme="light"] .aurora::after{opacity:0.10}
:root[data-theme="light"] .aurora__ribbon{opacity:0.10;mix-blend-mode:multiply}
:root[data-theme="light"] .aurora__stars{opacity:0.0}
@keyframes auroraDriftA{
0% {transform:translate3d(0,0,0) scale(1)}
50% {transform:translate3d(6vmax,4vmax,0) scale(1.08)}
100%{transform:translate3d(-4vmax,8vmax,0) scale(0.96)}
}
@keyframes auroraDriftB{
0% {transform:translate3d(0,0,0) scale(1)}
50% {transform:translate3d(-5vmax,-3vmax,0) scale(1.12)}
100%{transform:translate3d(3vmax,-6vmax,0) scale(0.94)}
}
@keyframes auroraSpin{
from{transform:rotate(0deg)}
to {transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
.aurora::before,.aurora::after,.aurora__ribbon{animation:none}
}
/* Ambient halo (kept for hero sections — now using purple tokens) */
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ambient::before{content:"";position:absolute;left:50%;top:-30%;width:120vw;height:120vw;transform:translateX(-50%);
background:radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),0.10), rgba(var(--accent-2-rgb),0.06) 30%, transparent 60%);filter:blur(2px)}
/* ---------- 3. LAYOUT — FULL EDGE-TO-EDGE ---------- */
.wrap{
width:100%;
padding-left:var(--gutter);
padding-right:var(--gutter);
}
.wrap--tight{padding-left:var(--gutter-tight);padding-right:var(--gutter-tight)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y);position:relative}
.section--tight{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px)}
.divider{height:1px;background:var(--line);width:100%}
/* ---------- 4. (custom cursor removed — default OS cursor) ---------- */
/* ---------- 4b. TOPBAR — universal utility strip (always visible, holds theme toggle) ---------- */
.topbar{
position:sticky;top:0;z-index:70;
height:36px;
display:flex;align-items:center;justify-content:space-between;
padding:0 var(--gutter);
background:color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line-soft);
font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
color:var(--ink-mute);
transition:background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.topbar__meta{display:inline-flex;align-items:center;gap:14px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-width:0}
.topbar__meta .tb-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px rgba(var(--accent-3-rgb),0.22);animation:pulse 2.4s ease-in-out infinite;flex:none}
.topbar__meta .sep{opacity:0.35}
.topbar__meta strong{color:var(--ink-2);font-weight:500;letter-spacing:0.18em}
.topbar__right{display:inline-flex;align-items:center;gap:12px;flex:none}
.topbar__label{color:var(--ink-mute);font-size:10px;letter-spacing:0.2em}
@media (max-width:760px){
.topbar{font-size:9.5px;letter-spacing:0.16em;padding:0 14px;height:34px;gap:10px}
.topbar__meta .hide-sm{display:none}
.topbar__label{display:none}
}
/* Topbar theme toggle — compact variant */
.topbar .nav__theme{width:26px;height:26px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2);background:transparent}
.topbar .nav__theme:hover{border-color:var(--copper);color:var(--copper-bright);transform:none}
.topbar .nav__theme svg{width:14px;height:14px}
/* ---------- 5. NAV ---------- */
.nav{
position:sticky;top:36px;z-index:60;
background:color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter:saturate(140%) blur(14px);
-webkit-backdrop-filter:saturate(140%) blur(14px);
border-bottom:1px solid transparent;
transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
@media (max-width:760px){ .nav{top:34px} }
.nav.is-stuck{border-bottom-color:var(--line);background:color-mix(in srgb, var(--bg) 92%, transparent)}
.nav__inner{
width:100%;
padding:18px var(--gutter);
display:flex;align-items:center;gap:24px;flex-wrap:nowrap;
}
.nav__inner > .brand{margin-right:auto}
.nav__links{flex:0 1 auto;margin-inline:auto}
.nav.is-stuck .nav__inner{padding-top:14px;padding-bottom:14px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
border:1px solid var(--line-strong);border-radius:999px;color:var(--copper);flex:none;
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.brand-mark img{width:22px;height:22px;display:block;color:inherit;filter:none}
.brand:hover .brand-mark{border-color:var(--copper);color:var(--copper-bright)}
.brand-word{display:inline-flex;flex-direction:column;line-height:1}
.brand-word__main{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:-0.01em;color:var(--ink)}
.brand-word__sub{margin-top:3px;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.nav__links{display:flex;gap:34px;justify-content:center}
.nav__links a{
font-size:13.5px;letter-spacing:0.02em;color:var(--ink-2);position:relative;padding:6px 0;
transition:color var(--t-fast) var(--ease);
}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--copper);transition:right var(--t-med) var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{right:0;background:var(--copper)}
.nav__time{
display:none;font-family:var(--mono);font-size:11px;letter-spacing:0.2em;color:var(--ink-mute);text-transform:uppercase;
}
@media (min-width:1280px){ .nav__time{display:inline-flex;align-items:center;gap:8px;padding-left:18px;border-left:1px solid var(--line)} }
.nav__time::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.nav__cta{
display:inline-flex;align-items:center;gap:10px;
font-size:13px;letter-spacing:0.02em;color:var(--bg);background:var(--ink);
padding:11px 18px 11px 22px;border-radius:999px;border:1px solid var(--ink);
transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
font-weight:500;
}
.nav__cta:hover{background:var(--copper);color:#fff;border-color:var(--copper);transform:translateY(-1px)}
.nav__cta svg{transition:transform var(--t-med) var(--ease)}
.nav__cta:hover svg{transform:translateX(3px)}
.nav__toggle{
display:none;width:48px;height:48px;
border:1px solid var(--line-strong);border-radius:999px;
position:relative;flex:none;
transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__toggle:active{background:rgba(var(--accent-rgb),0.06)}
.nav__toggle[aria-expanded="true"]{border-color:var(--copper)}
.nav__toggle span{
position:absolute;left:14px;right:14px;height:1.4px;background:var(--ink);
border-radius:1px;transition:transform var(--t-med) var(--ease), background var(--t-fast) var(--ease);
transform-origin:center;
}
.nav__toggle span:nth-child(1){top:20px}
.nav__toggle span:nth-child(2){top:26px}
.nav__toggle[aria-expanded="true"] span{background:var(--copper)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
/* Backdrop behind drawer */
.nav__backdrop{
position:fixed;inset:0;background:rgba(8,8,10,0.55);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
opacity:0;pointer-events:none;z-index:54;
transition:opacity var(--t-med) var(--ease);
}
.nav__backdrop.is-open{opacity:1;pointer-events:auto}
.nav__drawer{
position:fixed;top:0;right:0;bottom:0;
width:min(420px,86vw);
background:linear-gradient(180deg,#0B0D11 0%, var(--bg) 60%);
display:flex;flex-direction:column;
padding:calc(env(safe-area-inset-top) + 22px) clamp(24px,6vw,40px) calc(env(safe-area-inset-bottom) + 28px);
transform:translateX(100%);
transition:transform 480ms var(--ease);
z-index:55;overflow-y:auto;-webkit-overflow-scrolling:touch;
border-left:1px solid var(--line);
box-shadow:-30px 0 60px -20px rgba(0,0,0,0.5);
}
.nav__drawer.is-open{transform:translateX(0)}
.nav__drawer-head{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:24px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.nav__drawer-head .ttl{
font-family:var(--mono);font-size:10.5px;letter-spacing:0.28em;
text-transform:uppercase;color:var(--ink-mute);
}
.nav__drawer-head .ttl em{font-style:normal;color:var(--copper)}
.nav__drawer-list{display:flex;flex-direction:column}
.nav__drawer a{
position:relative;display:flex;align-items:center;justify-content:space-between;
padding:20px 0;border-bottom:1px solid var(--line);
font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:-0.02em;
color:var(--ink-2);min-height:60px;
transition:color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.nav__drawer a::after{
content:"\2192";font-family:var(--sans);font-size:14px;color:var(--ink-faint);
transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__drawer a:active{color:var(--copper-bright);padding-left:10px}
.nav__drawer a:active::after{color:var(--copper);transform:translateX(4px)}
.nav__drawer a.is-active{color:var(--ink)}
.nav__drawer a.is-active::before{
content:"";position:absolute;left:-clamp(24px,6vw,40px);top:50%;transform:translateY(-50%);
width:3px;height:24px;background:var(--copper);border-radius:0 2px 2px 0;
}
.nav__drawer a.is-active::after{color:var(--copper)}
.nav__drawer-cta{
margin-top:28px;padding:20px 24px !important;border-bottom:0 !important;
background:var(--copper);color:#fff !important;border-radius:999px;
text-align:center;justify-content:center !important;
font-family:var(--sans) !important;font-weight:500 !important;font-size:15px !important;
letter-spacing:0 !important;
min-height:56px;
}
.nav__drawer-cta::before,.nav__drawer-cta::after{display:none !important;content:none !important}
.nav__drawer-meta{
margin-top:auto;padding-top:32px;
display:flex;flex-direction:column;gap:10px;
font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;
text-transform:uppercase;color:var(--ink-mute);
}
.nav__drawer-meta .pulse{
display:inline-flex;align-items:center;gap:8px;
}
.nav__drawer-meta .pulse::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);
box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.18);animation:pulse 2.4s ease-in-out infinite;
}
/* Lock body scroll when drawer open */
body.nav-open{overflow:hidden;touch-action:none}
/* ---------- 6. BUTTONS ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;
font-size:14px;letter-spacing:0.01em;
padding:14px 22px;border-radius:999px;border:1px solid transparent;
transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
white-space:nowrap;font-weight:500;position:relative;
}
.btn svg{transition:transform var(--t-med) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--copper);color:#fff;border-color:var(--copper);box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
.btn--primary:hover{background:var(--copper-bright);transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(var(--accent-rgb),0.55)}
.btn--ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--ink:hover{background:var(--copper);color:#fff;border-color:var(--copper);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--copper);color:var(--copper-bright);transform:translateY(-2px)}
.btn--lg{padding:18px 30px;font-size:15px}
/* ---------- 7. EYEBROW & VERTICAL LABEL ---------- */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:0.32em;text-transform:uppercase;
color:var(--copper);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--copper)}
.v-label{
position:absolute;left:calc(var(--gutter) * 0.5 - 4px);top:0;height:100%;
display:flex;align-items:flex-start;
font-family:var(--mono);font-size:10.5px;letter-spacing:0.32em;text-transform:uppercase;color:var(--ink-mute);
writing-mode:vertical-rl;transform:rotate(180deg);
padding-top:clamp(40px,5vw,80px);
pointer-events:none;
}
@media (max-width:980px){ .v-label{display:none} }
/* Big background numerals — editorial decoration */
.bg-numeral{
position:absolute;font-family:var(--serif);font-style:italic;font-weight:300;
font-size:clamp(180px,32vw,540px);line-height:0.85;
color:var(--bg-3);opacity:0.55;
z-index:0;pointer-events:none;letter-spacing:-0.04em;
}
/* ---------- 8. SECTION HEAD ---------- */
.section-head{max-width:1100px;margin-bottom:clamp(56px,7vw,120px);position:relative;z-index:2}
.section-head--center{text-align:center;margin-left:auto;margin-right:auto}
.section-head__num{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--mono);font-size:11.5px;letter-spacing:0.32em;text-transform:uppercase;
color:var(--copper);margin-bottom:36px;
}
.section-head__num strong{color:var(--ink);font-weight:500}
.section-head__num::before{content:"";display:inline-block;width:36px;height:1px;background:var(--copper)}
.section-head__title{
font-family:var(--serif);font-weight:300;
font-size:clamp(40px,6.4vw,96px);line-height:0.98;letter-spacing:-0.035em;
color:var(--ink);
}
.section-head__title em{font-style:italic;font-weight:400;color:var(--copper-bright)}
.section-head__title .alt{font-style:italic;color:var(--copper-bright);font-weight:400}
.section-head__lede{margin-top:28px;max-width:64ch;font-size:17px;line-height:1.7;color:var(--ink-mute)}
.section-head--center .section-head__lede{margin-left:auto;margin-right:auto}
/* ---------- 9. PAGE HERO (inner pages) ---------- */
.page-hero{
position:relative;
padding:clamp(72px,10vw,160px) 0 clamp(48px,6vw,96px);
border-bottom:1px solid var(--line);
isolation:isolate;
overflow:hidden;
}
.page-hero__inner{position:relative;z-index:2}
.page-hero__crumbs{
display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
color:var(--ink-mute);margin-bottom:36px;
}
.page-hero__crumbs a{color:var(--ink-mute);transition:color var(--t-fast) var(--ease)}
.page-hero__crumbs a:hover{color:var(--copper)}
.page-hero__crumbs .sep{color:var(--ink-faint)}
.page-hero__title{
font-family:var(--serif);font-weight:300;
font-size:clamp(48px,8.4vw,128px);line-height:1.04;letter-spacing:-0.04em;
color:var(--ink);max-width:18ch;
padding-bottom:0.05em;
}
.page-hero__title em{font-style:italic;font-weight:400;color:var(--copper-bright)}
.page-hero__lede{margin-top:32px;max-width:62ch;font-size:17px;line-height:1.7;color:var(--ink-mute)}
.page-hero__meta{
margin-top:48px;display:flex;flex-wrap:wrap;gap:18px 40px;
font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute);
padding-top:28px;border-top:1px solid var(--line);
}
.page-hero__meta strong{color:var(--ink);font-weight:500}
/* ---------- 10. HOME — EDITORIAL HERO ---------- */
.hero{
position:relative;
padding:clamp(60px,8vw,120px) 0 clamp(80px,10vw,160px);
border-bottom:1px solid var(--line);
overflow:hidden;
isolation:isolate;
}
.hero__bg-num{
position:absolute;top:50%;right:-4vw;transform:translateY(-50%);
font-family:var(--serif);font-style:italic;font-weight:300;
font-size:clamp(280px,42vw,720px);line-height:0.82;
color:var(--bg-2);opacity:0.55;letter-spacing:-0.06em;z-index:0;
pointer-events:none;
}
.hero__inner{
position:relative;z-index:2;
display:grid;grid-template-columns:minmax(80px,12vw) 1fr;
gap:clamp(32px,5vw,80px);align-items:flex-start;
}
.hero__rail{
display:flex;flex-direction:column;gap:14px;
font-family:var(--mono);font-size:10.5px;letter-spacing:0.32em;text-transform:uppercase;
color:var(--ink-mute);padding-top:8px;
}
.hero__rail-line{width:1px;background:var(--line-strong);height:120px;margin:6px 0;display:none}
@media (min-width:980px){ .hero__rail-line{display:block} }
.hero__rail strong{color:var(--copper);font-weight:500;letter-spacing:0.32em}
.hero__main{display:flex;flex-direction:column;gap:48px}
.hero__meta{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
color:var(--ink-mute);
}
.hero__meta .dot{color:var(--copper);font-size:14px;line-height:1}
.hero__meta-pulse{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
}
.hero__meta-pulse::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.2);animation:pulse 2.4s ease-in-out infinite}
.hero__title{
font-family:var(--serif);font-weight:300;
font-size:clamp(54px,11.4vw,200px);line-height:1.02;letter-spacing:-0.045em;
color:var(--ink);max-width:22ch;position:relative;
padding-bottom:0.06em;
}
.hero__title em{font-style:italic;font-weight:400;color:var(--copper-bright);display:inline-block;margin-left:0.05em}
.hero__title .pull{display:block;margin-left:clamp(20px,5vw,140px)}
.hero__title .pull-r{display:block;text-align:right;margin-right:clamp(0px,5vw,80px)}
.hero__sub{
display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,4vw,72px);align-items:start;
border-top:1px solid var(--line);padding-top:36px;
}
.hero__sub-mark{
font-family:var(--mono);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--copper);
}
.hero__sub p{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:54ch}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__ctas .quiet{font-size:13px;color:var(--ink-mute);font-family:var(--mono);letter-spacing:0.18em;text-transform:uppercase;margin-left:8px}
@media (max-width:980px){
.hero__inner{grid-template-columns:1fr;gap:32px}
.hero__rail{flex-direction:row;flex-wrap:wrap;gap:14px 24px;padding-top:0}
.hero__rail-line{display:none}
.hero__sub{grid-template-columns:1fr;gap:18px;padding-top:28px}
.hero__title .pull{margin-left:0}
.hero__title .pull-r{text-align:left;margin-right:0}
}
/* ---------- 11. MARQUEE ---------- */
.marquee{
position:relative;overflow:hidden;
padding:28px 0;
background:transparent;
-webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
display:flex;align-items:center;gap:64px;width:max-content;
animation:mq 36s linear infinite;
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(20px,2.2vw,28px);color:var(--ink-mute);letter-spacing:-0.01em;
}
.marquee__track:hover{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:64px;white-space:nowrap}
.marquee__track .sep{font-family:var(--mono);font-style:normal;color:var(--copper);font-size:14px;letter-spacing:0.2em}
@keyframes mq{ to { transform:translateX(-50%); } }
/* ---------- 12. TRUST STRIP — asymmetric ---------- */
.trust{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.trust__grid{
display:grid;grid-template-columns:1.2fr 0.9fr 0.9fr 1fr;gap:0;
padding:clamp(48px,5.6vw,96px) 0;
}
.trust__cell{
display:flex;flex-direction:column;gap:14px;
padding:0 clamp(24px,3vw,56px);
border-right:1px solid var(--line-soft);position:relative;
}
.trust__cell:last-child{border-right:0}
.trust__cell:nth-child(odd){padding-top:24px}
.trust__cell:nth-child(even){padding-top:0;align-self:flex-end}
.trust__cell:nth-child(2){padding-bottom:32px}
.trust__num{
font-family:var(--serif);font-weight:300;
font-size:clamp(56px,7vw,108px);line-height:0.96;letter-spacing:-0.04em;
color:var(--ink);display:inline-flex;align-items:baseline;
}
.trust__num .small{margin-left:6px;font-size:0.36em;color:var(--copper);font-style:italic;font-weight:400}
.trust__label{font-size:13.5px;line-height:1.55;color:var(--ink-mute);letter-spacing:0.005em;max-width:24ch}
.trust__label strong{display:block;color:var(--ink);font-weight:500;margin-bottom:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase}
/* ---------- 13. SERVICE LIST — editorial rows with offset ---------- */
.svc-list{border-top:1px solid var(--line);position:relative;z-index:2}
.svc-row{
position:relative;display:grid;
grid-template-columns:90px 1fr 320px 48px;gap:36px;align-items:start;
padding:42px 0;border-bottom:1px solid var(--line);
transition:padding var(--t-med) var(--ease), background var(--t-med) var(--ease);
isolation:isolate;
}
.svc-row::before{content:"";position:absolute;left:-100%;right:100%;top:0;height:1px;background:linear-gradient(to right,transparent,var(--copper),transparent);transition:left var(--t-slow) var(--ease), right var(--t-slow) var(--ease)}
.svc-row:hover::before{left:0;right:0}
.svc-row::after{content:"";position:absolute;inset:0;background:linear-gradient(to right, rgba(var(--accent-rgb),0.04), transparent 40%);opacity:0;transition:opacity var(--t-med) var(--ease);z-index:-1}
.svc-row:hover::after{opacity:1}
.svc-row:hover{padding-left:18px}
.svc-row:nth-child(2n){padding-left:clamp(0px,3vw,40px)}
.svc-row:nth-child(2n):hover{padding-left:clamp(18px,4vw,56px)}
.svc-row__num{font-family:var(--mono);font-size:11.5px;letter-spacing:0.22em;color:var(--copper);padding-top:14px}
.svc-row__num span{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:46px;color:var(--ink);margin-top:6px;line-height:1}
.svc-row__body{display:flex;flex-direction:column;gap:14px}
.svc-row__title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.8vw,40px);letter-spacing:-0.025em;line-height:1.05;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.svc-row:hover .svc-row__title{color:var(--copper-bright)}
.svc-row__title em{font-style:italic;color:var(--copper-bright);font-weight:400}
.svc-row__desc{font-size:15.5px;line-height:1.7;color:var(--ink-mute);max-width:60ch}
.svc-row__tags{display:flex;flex-direction:column;gap:8px;padding-top:14px}
.svc-row__tags li{font-family:var(--mono);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-2);transition:color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease)}
.svc-row__tags li::before{content:"— ";color:var(--copper)}
.svc-row:hover .svc-row__tags li{color:var(--ink)}
.svc-row__link{
display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
margin-top:10px;border-radius:999px;color:var(--ink);border:1px solid var(--line-strong);
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.svc-row__link:hover{background:var(--copper);color:#fff;border-color:var(--copper);transform:rotate(-12deg) scale(1.08)}
/* ---------- 14. CASE STUDY — asymmetric editorial ---------- */
.case{
display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;
padding:clamp(56px,7vw,120px) 0;border-bottom:1px solid var(--line);
position:relative;
}
.case:last-of-type{border-bottom:0}
.case--reverse{direction:rtl}
.case--reverse>*{direction:ltr}
.case__index{
position:absolute;top:clamp(28px,3.5vw,48px);left:0;font-family:var(--serif);font-style:italic;font-weight:300;
font-size:clamp(120px,16vw,260px);line-height:1;color:var(--bg-2);z-index:0;pointer-events:none;letter-spacing:-0.04em;
}
.case--reverse .case__index{left:auto;right:0}
.case__visual{
position:relative;aspect-ratio:5/4;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;
z-index:1;
transition:transform var(--t-slow) var(--ease);
}
.case:hover .case__visual{transform:translateY(-8px)}
.case__visual-art{position:absolute;inset:0;display:grid;place-items:center;padding:8%}
.case-grid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px),linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 60%,transparent 100%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,#000 60%,transparent 100%)}
/* Mock window */
.case-mock{
position:relative;width:80%;background:var(--surface);border:1px solid var(--line);border-radius:8px;
box-shadow:0 30px 60px -30px rgba(0,0,0,0.6),0 8px 18px -8px rgba(0,0,0,0.4);
overflow:hidden;
}
.case-mock__bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line)}
.case-mock__bar::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--line-strong);box-shadow:12px 0 0 var(--line-strong),24px 0 0 var(--line-strong)}
.case-mock__hero{padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px}
.case-mock__h1{height:14px;background:var(--ink);border-radius:2px;width:80%}
.case-mock__h1.short{width:50%;background:var(--ink-mute)}
.case-mock__btn{margin-top:8px;width:120px;height:30px;background:var(--copper);border-radius:999px}
.case-mock__rows{padding:0 22px 22px;display:flex;flex-direction:column;gap:6px}
.case-mock__rows span{display:block;height:6px;background:var(--line-strong);border-radius:2px}
.case-mock__rows span:nth-child(1){width:92%}
.case-mock__rows span:nth-child(2){width:76%}
.case-mock__rows span:nth-child(3){width:58%}
.case-mock__chart{height:130px;margin:18px 22px 12px;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:10px}
.case-mock__chart span{display:block;height:var(--h);background:linear-gradient(to top,var(--copper),var(--copper-bright));border-radius:2px 2px 0 0}
.case-mock__nodes{position:relative;height:130px;margin:22px}
.case-mock__nodes .node{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--copper)}
.case-mock__nodes .n1{top:22%;left:12%}
.case-mock__nodes .n2{top:50%;left:48%}
.case-mock__nodes .n3{top:22%;left:82%}
.case-mock__nodes .n4{top:78%;left:82%}
.node-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--line-strong);stroke-width:1.2}
.case__body{position:relative;z-index:1}
.case__meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px}
.case__title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,52px);letter-spacing:-0.025em;line-height:1.05;color:var(--ink)}
.case__title em{font-style:italic;color:var(--copper-bright)}
.case__role{margin-top:10px;font-size:13.5px;letter-spacing:0.04em;color:var(--ink-mute);text-transform:uppercase;font-family:var(--mono)}
.case__problem,.case__solution{margin-top:22px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.case__problem::before,.case__solution::before{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);margin-right:8px}
.case__problem::before{content:"Tantangan — "}
.case__solution::before{content:"Pendekatan — "}
.case__metrics{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:24px;border-top:1px solid var(--line)}
.case__metrics li{display:flex;flex-direction:column;gap:6px}
.case__metrics strong{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:-0.025em;color:var(--copper-bright);font-style:italic}
.case__metrics span{font-size:12px;letter-spacing:0.04em;color:var(--ink-mute);text-transform:uppercase;font-family:var(--mono)}
/* ---------- 15. WHY GRID — irregular ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.why-cell{
padding:clamp(32px,4vw,56px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
background:transparent;transition:background var(--t-med) var(--ease), transform var(--t-med) var(--ease);
position:relative;
}
.why-cell:hover{background:var(--bg-2)}
.why-cell:nth-child(2n){padding-top:clamp(48px,6vw,88px)}
.why-cell-num{
font-family:var(--serif);font-style:italic;font-weight:300;
font-size:34px;color:var(--copper);margin-bottom:24px;line-height:1;letter-spacing:-0.02em;
}
.why-cell h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-0.02em;line-height:1.18;color:var(--ink);margin-bottom:16px}
.why-cell h3 em{font-style:italic;color:var(--copper-bright)}
.why-cell p{font-size:15px;line-height:1.7;color:var(--ink-mute)}
/* ---------- 16. CONSULT FORM ---------- */
.consult-wrap{display:grid;grid-template-columns:0.85fr 1.4fr;gap:clamp(28px,4vw,64px);align-items:start}
.terminal{
background:#08080A;border:1px solid var(--line);border-radius:6px;
font-family:var(--mono);font-size:12.5px;color:var(--ink);overflow:hidden;
position:sticky;top:96px;
}
.terminal__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.terminal__bar .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.terminal__bar .ttl{margin-left:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute)}
.terminal__body{padding:18px 16px;margin:0;white-space:pre-wrap;line-height:1.85;color:var(--ink)}
.terminal__body .prompt{color:var(--copper);margin-right:6px}
.terminal__body .val{color:var(--ink)}
.terminal__body .ok{color:var(--copper-bright)}
.caret{display:inline-block;width:8px;margin-left:1px;animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.form{display:flex;flex-direction:column;gap:22px;padding:36px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper)}
.field input,.field select,.field textarea{
appearance:none;-webkit-appearance:none;background:transparent;color:var(--ink);
border:0;border-bottom:1px solid var(--line-strong);padding:10px 0 12px;
font-size:15.5px;letter-spacing:-0.005em;border-radius:0;
transition:border-color var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field select{padding-right:24px;
background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),linear-gradient(135deg,var(--copper) 50%,transparent 50%);
background-position:calc(100% - 14px) 55%, calc(100% - 8px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--copper)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form__actions{margin-top:8px;display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.form__assurance{font-size:12.5px;color:var(--ink-mute);line-height:1.7}
.form__success{
margin-top:14px;padding:18px;border:1px solid var(--copper);border-radius:6px;
background:rgba(var(--accent-rgb),0.06);font-size:14px;color:var(--ink);
}
.form__success a{display:inline-block;margin-top:6px;color:var(--copper-bright);text-decoration:underline;text-underline-offset:3px}
/* ---------- 17. TESTIMONIALS — asymmetric column ---------- */
.testi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start}
.testi-card{
position:relative;padding:40px 36px;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;
transition:transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-med) var(--ease);
}
.testi-card:nth-child(2){margin-top:48px}
.testi-card:nth-child(3){margin-top:96px}
.testi-card:hover{border-color:var(--copper);transform:translateY(-6px);background:var(--surface)}
.quote-mark{width:32px;height:24px;color:var(--copper);margin-bottom:22px}
.testi-card blockquote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;letter-spacing:-0.005em;color:var(--ink);font-weight:400}
.testi-card figcaption{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.testi-name{font-weight:500;font-size:14px;color:var(--ink);letter-spacing:-0.005em}
.testi-role{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute)}
@media (max-width:1080px){
.testi-card:nth-child(2),.testi-card:nth-child(3){margin-top:0}
}
/* ---------- 18. FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:32px;
padding:30px 0;text-align:left;
font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);font-weight:400;letter-spacing:-0.018em;color:var(--ink);
transition:padding var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq-q:hover{padding-left:14px;color:var(--copper-bright)}
.faq-q em{font-style:italic;color:var(--copper-bright)}
.faq-icon{position:relative;flex:none;width:20px;height:20px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--ink);border-radius:1px;transition:transform var(--t-med) var(--ease), background var(--t-fast) var(--ease)}
.faq-icon::before{top:9.5px;left:0;width:20px;height:1px}
.faq-icon::after{top:0;left:9.5px;width:1px;height:20px}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:scaleY(0)}
.faq-q[aria-expanded="true"] .faq-icon::before{background:var(--copper)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease)}
.faq-a p{padding:0 0 32px 0;max-width:64ch;color:var(--ink-mute);font-size:16px;line-height:1.75}
/* ---------- 19. CTA STRIP ---------- */
.cta-strip{
position:relative;
padding:clamp(80px,11vw,160px) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:radial-gradient(ellipse 60% 80% at center top, rgba(var(--accent-rgb),0.12), transparent 65%), var(--bg);
text-align:center;overflow:hidden;
}
.cta-strip::before{
content:"";position:absolute;inset:0;
background:url("data:image/svg+xml;utf8,");
background-size:24px 24px;opacity:0.5;pointer-events:none;
}
.cta-strip__eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:0.32em;text-transform:uppercase;color:var(--copper);margin-bottom:28px;display:inline-flex;align-items:center;gap:14px;position:relative}
.cta-strip__eyebrow::before,.cta-strip__eyebrow::after{content:"";width:24px;height:1px;background:var(--copper)}
.cta-strip__title{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6vw,84px);line-height:1.02;letter-spacing:-0.035em;color:var(--ink);max-width:24ch;margin:0 auto;position:relative}
.cta-strip__title em{font-style:italic;font-weight:400;color:var(--copper-bright)}
.cta-strip__actions{margin-top:48px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
/* ---------- 20. FOOTER ---------- */
.footer{background:var(--bg);border-top:1px solid var(--line);position:relative;overflow:hidden}
.footer__big{
font-family:var(--serif);font-style:italic;font-weight:300;
font-size:clamp(80px,16vw,260px);line-height:0.9;letter-spacing:-0.04em;color:var(--bg-3);
padding:clamp(40px,5vw,72px) 0 0;text-align:center;
white-space:nowrap;overflow:hidden;
}
.footer__inner{padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px);display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__brand-main{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-0.015em;color:var(--ink);margin-bottom:4px}
.footer__brand-sub{font-size:12px;letter-spacing:0.04em;color:var(--ink-mute)}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer__nav>div{display:flex;flex-direction:column;gap:12px}
.footer__nav-title{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);margin-bottom:6px}
.footer__nav a,.footer__nav span{font-size:14px;color:var(--ink-2);letter-spacing:-0.005em;transition:color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease)}
.footer__nav a:hover{color:var(--copper-bright);padding-left:6px}
.footer__base{padding:24px 0 36px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-mute);letter-spacing:0.01em;border-top:1px solid var(--line)}
/* ---------- 21. TEMPLATE GALLERY ---------- */
.tg-toolbar{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
padding-top:clamp(28px,3.5vw,40px);padding-bottom:clamp(28px,3.5vw,40px);
border-bottom:1px solid var(--line);
}
.tg-toolbar__count{font-family:var(--mono);font-size:11.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute)}
.tg-toolbar__count strong{color:var(--copper);font-weight:500}
.tg-filter{display:flex;flex-wrap:wrap;gap:8px}
.tg-chip{
font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-2);
transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tg-chip:hover{color:var(--ink);border-color:var(--ink-mute)}
.tg-chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* ---------- 21b. TEMPLATES GALLERY — editorial layout (grid + list views) ---------- */
.tg-grid{
padding-top:clamp(40px,5vw,64px);
}
.tg-grid[data-view="grid"]{
display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;
}
.tg-grid[data-view="list"]{
display:flex;flex-direction:column;gap:0;
border-top:1px solid var(--line);
}
/* ===== Niche group header (zigzag separator between niches in gallery) =====
Alternating left / right alignment per niche — adds editorial rhythm and
prevents the eye from getting fatigued on one side of the page. */
.tg-niche-header{
display:flex;align-items:baseline;gap:18px;
padding:8px 0 14px;border-bottom:1px solid var(--line-soft);
}
.tg-niche-header__rule{
flex:0 0 36px;height:1px;background:var(--copper-bright);align-self:center;
display:inline-block;
}
.tg-niche-header__label{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-0.01em;
color:var(--ink);
}
.tg-niche-header__count{
margin-left:auto;
font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
color:var(--ink-2);
}
/* Right-aligned variant — flip child order so label sits on the right
and the count slides over to the left. */
.tg-niche-header--right{flex-direction:row-reverse}
.tg-niche-header--right .tg-niche-header__count{margin-left:0;margin-right:auto}
.tg-niche-header--right .tg-niche-header__label{text-align:right}
.tg-grid[data-view="grid"] .tg-niche-header{
grid-column:1 / -1;
margin-top:clamp(28px,3vw,44px);
}
.tg-grid[data-view="grid"] .tg-niche-header:first-child{margin-top:0}
.tg-grid[data-view="list"] .tg-niche-header{
margin-top:clamp(20px,2.4vw,32px);padding-bottom:10px;
}
.tg-grid[data-view="list"] .tg-niche-header:first-child{margin-top:0}
@media (max-width:760px){
.tg-niche-header{gap:12px;padding-bottom:10px}
.tg-niche-header__rule{flex-basis:24px}
.tg-niche-header__count{font-size:10px;letter-spacing:0.18em}
/* On mobile keep all niche headers left-aligned to save horizontal space */
.tg-niche-header--right{flex-direction:row}
.tg-niche-header--right .tg-niche-header__count{margin-left:auto;margin-right:0}
.tg-niche-header--right .tg-niche-header__label{text-align:left}
}
/* ===== shared card base ===== */
.tg-card{
position:relative;display:flex;flex-direction:column;
color:var(--ink);text-decoration:none;
transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* ===== GRID view ===== */
.tg-grid[data-view="grid"] .tg-card{
background:transparent;border:none;
}
.tg-grid[data-view="grid"] .tg-card__head{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:0 2px 12px;
border-bottom:1px solid var(--line);
}
.tg-grid[data-view="grid"] .tg-card__idx{
font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;line-height:1;
color:var(--copper-bright);letter-spacing:-0.01em;
}
.tg-grid[data-view="grid"] .tg-card__niche{
font-family:var(--mono);font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;
color:var(--ink-2);
}
.tg-grid[data-view="grid"] .tg-card__thumb{
position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden;
margin-top:16px;border:1px solid var(--line);
}
/* Static screenshot thumbnail — primary preview (fast, consistent). */
.tg-card__thumbimg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:top center;
display:block;border:0;
transition:transform var(--t-slow) var(--ease);
}
.tg-card:hover .tg-card__thumbimg{ transform:scale(1.02); }
/* Iframe renders at fixed desktop viewport (1280x960) — fallback when preview.png missing. JS sets scale per-card. */
.tg-card__thumb iframe{
position:absolute;top:0;left:0;right:auto;bottom:auto;
width:1280px;height:960px;max-width:none;max-height:none;border:0;
transform-origin:top left;transform:scale(0.34);
pointer-events:none;background:#fff;transition:transform var(--t-slow) var(--ease);
}
.tg-card__soon{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute);
background:
linear-gradient(45deg, transparent 48%, var(--line-soft) 49%, var(--line-soft) 51%, transparent 52%),
var(--bg-2);
background-size:14px 14px, 100% 100%;
}
.tg-card__soon-ico{
width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-faint);display:inline-block;
}
.tg-card__overlay{
position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;
background:linear-gradient(to top, rgba(11,7,24,0.88), rgba(11,7,24,0) 60%);
opacity:0;transition:opacity var(--t-med) var(--ease);
}
.tg-card:hover .tg-card__overlay{opacity:1}
.tg-card__overlay-cta{
display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
background:var(--copper);color:#fff;border-radius:999px;
font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0.02em;
transform:translateY(6px);transition:transform var(--t-med) var(--ease);
}
.tg-card:hover .tg-card__overlay-cta{transform:translateY(0)}
.tg-card[data-status="soon"] .tg-card__overlay{display:none}
.tg-grid[data-view="grid"] .tg-card__body{padding:20px 2px 0;display:flex;flex-direction:column;gap:10px}
.tg-grid[data-view="grid"] .tg-card__title{
font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.015em;color:var(--ink);
margin:4px 0 0;
}
.tg-grid[data-view="grid"] .tg-card__title em{
font-style:italic;color:var(--copper-bright);font-weight:400;
}
.tg-card__num-suffix{
font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:0.18em;color:var(--ink-mute);
font-style:normal;display:inline-block;margin-left:4px;vertical-align:middle;
}
.tg-card__sub{
font-family:var(--serif);font-size:15px;line-height:1.3;color:var(--ink-2);margin:0;
}
.tg-card__sub em{font-style:italic;color:var(--copper-bright)}
.tg-grid[data-view="grid"] .tg-card__desc{font-size:14px;line-height:1.6;color:var(--ink-mute);max-width:42ch}
.tg-grid[data-view="grid"] .tg-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tg-grid[data-view="grid"] .tg-card__meta{
margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;align-items:center;gap:12px;
font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);
}
.tg-card__meta-status{display:inline-flex;align-items:center;gap:8px}
.tg-card__meta-status .dot{width:6px;height:6px;border-radius:50%;background:var(--copper);flex:none}
.tg-card__meta-status.is-soon .dot{background:var(--amber)}
.tg-card__sep{color:var(--ink-faint)}
.tg-card__tier-text{color:var(--ink-2);letter-spacing:0.2em}
.tg-card__arrow{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.tg-card:hover .tg-card__arrow{color:var(--copper);transform:translateX(3px)}
/* hover lift on grid card — subtle, no AI-look heavy shadow */
.tg-grid[data-view="grid"] .tg-card:hover .tg-card__title{color:var(--copper-bright)}
.tg-grid[data-view="grid"] .tg-card:hover .tg-card__thumb{border-color:var(--copper)}
/* ===== LIST view ===== */
.tg-grid[data-view="list"] .tg-card{
flex-direction:row;align-items:stretch;gap:0;
padding:28px 6px;border-bottom:1px solid var(--line);
}
.tg-grid[data-view="list"] .tg-card:hover{background:rgba(var(--accent-rgb),0.03)}
.tg-grid[data-view="list"] .tg-card__head{
flex:0 0 140px;display:flex;flex-direction:column;gap:6px;padding-right:20px;
font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
}
.tg-grid[data-view="list"] .tg-card__idx{
font-family:var(--serif);font-style:italic;font-size:38px;line-height:1;letter-spacing:-0.02em;color:var(--copper);font-weight:400;
}
.tg-grid[data-view="list"] .tg-card__niche{color:var(--ink-mute);letter-spacing:0.2em}
.tg-grid[data-view="list"] .tg-card__thumb{
flex:0 0 200px;position:relative;aspect-ratio:auto;height:auto;min-height:120px;
border:1px solid var(--line);overflow:hidden;background:var(--bg-2);margin-right:28px;
}
.tg-grid[data-view="list"] .tg-card__thumb iframe{width:1280px;height:720px;max-width:none;max-height:none;transform:scale(0.156);transform-origin:top left}
.tg-grid[data-view="list"] .tg-card__overlay{background:rgba(11,7,24,0.7)}
.tg-grid[data-view="list"] .tg-card__overlay-cta{font-size:10.5px;padding:7px 12px}
.tg-grid[data-view="list"] .tg-card__body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0;min-width:0}
.tg-grid[data-view="list"] .tg-card__title{
font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.12;letter-spacing:-0.015em;color:var(--ink);margin:0;
}
.tg-grid[data-view="list"] .tg-card__desc{font-size:14px;line-height:1.55;color:var(--ink-mute);max-width:72ch;margin:0}
.tg-grid[data-view="list"] .tg-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tg-grid[data-view="list"] .tg-card__meta{
display:flex;align-items:center;gap:14px;margin-top:10px;
font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);
}
.tg-grid[data-view="list"] .tg-card__arrow{margin-left:auto}
/* hide staggered transform legacy — removed to avoid "AI" look */
.tg-card:nth-child(3n+2){transform:none !important}
/* ---------- 22. PREVIEW PAGE ---------- */
html.preview-page,html.preview-page body{height:100%;overflow:hidden}
.preview-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg-2)}
.preview-bar{
flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
padding:14px var(--gutter);border-bottom:1px solid var(--line);background:var(--bg);
}
.preview-bar__brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.preview-bar__brand .brand-word__main{font-size:16px}
.preview-bar__crumbs{
display:flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute);
}
.preview-bar__crumbs strong{color:var(--ink);font-weight:500;letter-spacing:0.18em}
.preview-bar__crumbs .sep{color:var(--ink-faint)}
.preview-bar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.viewport-toggle{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.viewport-toggle button{
display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.viewport-toggle button:hover{color:var(--ink)}
.viewport-toggle button.is-active{background:var(--copper);color:#fff}
.viewport-toggle button svg{width:13px;height:13px}
.preview-pill{
display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;
font-size:12.5px;color:var(--ink-2);transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.preview-pill:hover{border-color:var(--copper);color:var(--copper-bright);transform:translateY(-1px)}
.preview-pill--solid{background:var(--copper);color:#fff;border-color:var(--copper);font-weight:500}
.preview-pill--solid:hover{background:var(--copper-bright);color:#fff}
.preview-stage{
flex:1 1 auto;position:relative;overflow:auto;
background:radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb),0.05), transparent 40%), var(--bg-2);
padding:clamp(16px,2.5vw,32px);
display:flex;align-items:flex-start;justify-content:center;
}
.preview-frame-wrap{
position:relative;width:100%;max-width:100%;
background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
transition:max-width var(--t-slow) var(--ease);
}
.preview-stage[data-vp="desktop"] .preview-frame-wrap{max-width:100%}
.preview-stage[data-vp="tablet"] .preview-frame-wrap{max-width:820px}
.preview-stage[data-vp="mobile"] .preview-frame-wrap{max-width:390px}
.preview-frame{display:block;width:100%;height:calc(100vh - 90px);height:calc(100dvh - 90px);min-height:600px;border:0;background:#fff}
/* ---------- 23. UTIL & ANIMATIONS ---------- */
.text-center{text-align:center}
.muted{color:var(--ink-mute)}
.copper{color:var(--copper-bright)}
.gold{color:var(--gold-bright)}
.spacer-sm{height:32px}
.spacer-md{height:64px}
.spacer-lg{height:128px}
/* Reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
[data-reveal].is-revealed{opacity:1;transform:translateY(0)}
/* Word stagger — give room for italic descenders so g/j/y don't clip */
[data-stagger]{display:inline-block}
.stg-w{
display:inline-block;overflow:hidden;line-height:inherit;
padding-bottom:0.22em;margin-bottom:-0.22em;
vertical-align:bottom;
}
.stg-w > *{display:inline-block;transform:translateY(110%);transition:transform 900ms var(--ease-out);transition-delay:calc(var(--si,0) * 60ms)}
[data-stagger].is-revealed .stg-w > *{transform:translateY(0)}
[data-stagger] .stg-w{position:relative}
/* Use inner span auto-injected */
/* Inline letter mask reveal */
[data-stagger] .stg-w::after{content:""}
/* Clip-reveal for visuals */
.clip-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1200ms var(--ease-out)}
[data-reveal].is-revealed .clip-reveal{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.001ms !important;transition-duration:0.001ms !important}
[data-reveal],[data-reveal].is-revealed{opacity:1 !important;transform:none !important}
.stg-w > *{transform:none !important}
.clip-reveal{clip-path:none !important}
.marquee__track{animation:none}
}
/* ---------- 24. NICHE PLACEHOLDER (used inside templates//index.html) ---------- */
/* (placeholder lives in template files — global styles only here) */
/* ---------- 25. RESPONSIVE ---------- */
@media (max-width:1280px){
.nav__links{gap:24px}
.svc-row{grid-template-columns:80px 1fr 240px 48px;gap:28px}
}
@media (max-width:1080px){
.case{grid-template-columns:1fr;gap:36px;padding:64px 0}
.case--reverse{direction:ltr}
.why-grid{grid-template-columns:repeat(2,1fr)}
.testi-grid{grid-template-columns:1fr;gap:18px}
.footer__inner{grid-template-columns:1fr;gap:40px}
.consult-wrap{grid-template-columns:1fr}
.terminal{position:static}
.tg-grid[data-view="grid"]{grid-template-columns:repeat(2,1fr);gap:36px 24px}
.tg-grid[data-view="list"] .tg-card{padding:24px 4px}
.tg-grid[data-view="list"] .tg-card__head{flex:0 0 110px}
.tg-grid[data-view="list"] .tg-card__idx{font-size:32px}
.trust__grid{grid-template-columns:repeat(2,1fr);gap:24px 0}
.trust__cell:nth-child(odd){padding-top:0}
.trust__cell:nth-child(even){align-self:flex-start}
.trust__cell:nth-child(2){border-right:0}
.trust__cell:nth-child(1),.trust__cell:nth-child(2){padding-bottom:32px;border-bottom:1px solid var(--line-soft)}
}
@media (max-width:980px){
.nav__links{display:none}
.nav__cta{display:none}
.nav__time{display:none}
.nav__toggle{display:inline-block}
}
@media (max-width:760px){
.svc-row{
grid-template-columns:60px 1fr 36px;
grid-template-areas:"num title link" ". desc ." ". tags .";
gap:8px 16px;padding:32px 0;
}
.svc-row__num{grid-area:num;padding-top:6px}
.svc-row__num span{font-size:34px}
.svc-row__body{grid-area:title}
.svc-row__desc{grid-area:desc}
.svc-row__tags{grid-area:tags;flex-direction:row;flex-wrap:wrap;gap:14px;padding-top:10px}
.svc-row__tags li::before{content:""}
.svc-row__link{grid-area:link;margin-top:0;width:36px;height:36px}
.svc-row:nth-child(2n){padding-left:0}
.field-row{grid-template-columns:1fr}
.form{padding:24px}
.tg-grid[data-view="grid"]{grid-template-columns:1fr;gap:36px}
.tg-grid[data-view="list"] .tg-card{flex-direction:column;gap:16px;padding:24px 2px}
.tg-grid[data-view="list"] .tg-card__head{flex:0 0 auto;flex-direction:row;align-items:baseline;justify-content:space-between;padding:0}
.tg-grid[data-view="list"] .tg-card__idx{font-size:28px}
.tg-grid[data-view="list"] .tg-card__thumb{flex:0 0 auto;width:100%;aspect-ratio:16/9;min-height:0;margin-right:0}
.tg-grid[data-view="list"] .tg-card__thumb iframe{width:1280px;height:720px;transform:scale(0.34)}
.tg-grid[data-view="list"] .tg-card__title{font-size:24px}
.tg-toolbar{flex-direction:column;align-items:flex-start}
.tg-view{width:100%;justify-content:stretch}
.tg-view__btn{flex:1}
.tg-filterbar__hint{display:none}
.preview-bar{grid-template-columns:auto auto;gap:12px;padding:12px var(--gutter)}
.preview-bar__crumbs{display:none}
.footer__nav{grid-template-columns:1fr 1fr}
.why-grid{grid-template-columns:1fr}
.case__metrics{grid-template-columns:1fr;gap:14px}
.footer__base{flex-direction:column;gap:8px}
.trust__grid{grid-template-columns:1fr}
.trust__cell{border-right:0;border-bottom:1px solid var(--line-soft);padding-bottom:24px}
.trust__cell:last-child{border-bottom:0;padding-bottom:0}
.viewport-toggle button span{display:none}
.viewport-toggle button{padding:8px 10px}
.preview-pill{padding:9px 12px;font-size:11.5px}
.hero__title{font-size:clamp(44px,11vw,80px)}
.marquee__track{font-size:18px;gap:42px}
.marquee__track span{gap:42px}
}
/* (default cursor everywhere — no overrides needed) */
/* ===========================================================================
26. TERMINAL CMD FORM (consultation page)
=========================================================================== */
.cmd{
width:100%;max-width:1080px;margin:0 auto;
background:#08080A;border:1px solid var(--line);border-radius:8px;overflow:hidden;
box-shadow:0 30px 80px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--accent-rgb),0.04);
font-family:var(--mono);
position:relative;
}
.cmd::before{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb),0.06), transparent 50%);
}
.cmd__bar{
display:flex;align-items:center;gap:8px;
padding:12px 16px;border-bottom:1px solid var(--line);
background:#0B0B0E;position:relative;z-index:1;
}
.cmd__bar .dot{
display:inline-flex;align-items:center;justify-content:center;
width:12px;height:12px;border-radius:50%;background:var(--line-strong);
border:0;padding:0;flex:none;position:relative;
}
.cmd__bar .dot--close{background:#E04C44}
.cmd__bar .dot--min{background:#E0B040;cursor:pointer;transition:transform 220ms var(--ease), filter 220ms var(--ease)}
.cmd__bar .dot--max{background:#41BC52}
.cmd__bar .dot--min:hover{transform:scale(1.15);filter:brightness(1.12)}
.cmd__bar .dot--min:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
/* Show min/max glyph on hover (macOS style) */
.cmd__bar .dot--min::before{
content:"";position:absolute;left:3px;right:3px;top:50%;height:1.4px;
background:#5A3A0A;border-radius:1px;opacity:0;transition:opacity 180ms var(--ease);
transform:translateY(-50%);
}
.cmd__bar:hover .dot--min::before{opacity:0.85}
.cmd.is-min .cmd__bar .dot--min::before{
content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;height:auto;background:transparent;
border:1.4px solid #5A3A0A;border-radius:1px;opacity:0.85;transform:none;
}
.cmd__bar .ttl{
margin-left:14px;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
color:var(--ink-mute);font-weight:500;
}
.cmd__bar .ttl em{font-family:var(--mono);font-style:normal;color:var(--copper);font-weight:400}
.cmd__bar .session{
margin-left:auto;display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);
}
.cmd__bar .session::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.2);animation:pulse 2.4s ease-in-out infinite}
/* Body collapse animation */
.cmd__body{
max-height:3000px;
transition:max-height 480ms var(--ease), opacity 320ms var(--ease), padding 480ms var(--ease);
}
.cmd.is-min .cmd__body{
max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;pointer-events:none;
}
.cmd__min-note{
display:none;align-items:center;gap:10px;
padding:10px 18px;border-top:1px dashed var(--line);
font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);
background:#0B0B0E;
}
.cmd__min-note span{color:var(--copper)}
.cmd.is-min .cmd__min-note{display:flex;animation:cmdFade 0.3s var(--ease-out)}
.cmd__body{
padding:28px 28px 32px;position:relative;z-index:1;
font-size:14px;line-height:1.85;color:var(--ink-2);
display:flex;flex-direction:column;gap:6px;
}
.cmd__line{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.cmd__line--note{color:var(--ink-mute);padding-left:0}
.cmd__line--note span{color:var(--copper)}
.cmd__line--header{
display:block;color:var(--ink);padding:14px 0 8px;
font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
border-bottom:1px dashed var(--line);margin-bottom:18px;
}
.cmd__line--header em{color:var(--copper);font-style:normal}
.cmd__prompt{color:var(--copper);flex:none;font-weight:500;letter-spacing:0.02em;user-select:none}
.cmd__key{color:var(--ink);min-width:170px;padding-right:8px;flex:none}
.cmd__key::after{content:":";color:var(--ink-mute);margin-left:2px}
.cmd__field{
flex:1 1 auto;min-width:240px;
display:flex;align-items:center;gap:6px;position:relative;
}
.cmd__field input,
.cmd__field select,
.cmd__field textarea{
flex:1 1 auto;width:100%;
background:transparent;border:0;outline:0;
padding:6px 0;color:var(--ink);
font-family:var(--mono);font-size:14px;letter-spacing:-0.005em;
border-bottom:1px dashed transparent;
transition:border-color var(--t-fast) var(--ease);
}
.cmd__field textarea{resize:vertical;min-height:84px;line-height:1.7}
.cmd__field input::placeholder,.cmd__field textarea::placeholder{color:var(--ink-faint);font-style:italic}
.cmd__field input:focus,.cmd__field select:focus,.cmd__field textarea:focus{border-bottom-color:var(--copper)}
.cmd__field select{
padding:6px 26px 6px 0;color:var(--ink);
appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),linear-gradient(135deg,var(--copper) 50%,transparent 50%);
background-position:calc(100% - 14px) 55%, calc(100% - 8px) 55%;background-size:6px 6px;background-repeat:no-repeat;
}
.cmd__field select option{background:#0E0E12;color:var(--ink)}
.cmd__caret{
display:inline-block;width:8px;height:16px;background:var(--copper-bright);
margin-left:2px;animation:blink 1.05s steps(1,end) infinite;flex:none;align-self:center;
}
.cmd__field:focus-within .cmd__caret{background:var(--copper-bright)}
.cmd__field:not(:focus-within) .cmd__caret{opacity:0.4}
.cmd__textarea{
display:flex;flex-direction:column;gap:4px;
padding-left:18px;border-left:1px dashed var(--line);
margin:6px 0 6px 18px;
}
.cmd__divider{
border-top:1px dashed var(--line);margin:18px 0 14px;
}
.cmd__actions{
margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding-top:18px;border-top:1px dashed var(--line);
}
.cmd__submit{
display:inline-flex;align-items:center;gap:10px;
padding:14px 22px;border-radius:6px;
background:var(--copper);color:#fff;border:1px solid var(--copper);
font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.04em;
cursor:pointer;
transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cmd__submit:hover{background:var(--copper-bright);transform:translateY(-1px);box-shadow:0 14px 30px -16px rgba(var(--accent-rgb),0.55)}
.cmd__submit kbd{
display:inline-flex;align-items:center;justify-content:center;
background:rgba(0,0,0,0.25);color:#fff;
padding:3px 8px;border-radius:4px;font-family:var(--mono);
font-size:10.5px;letter-spacing:0.06em;border:1px solid rgba(255,255,255,0.18);
}
.cmd__hint{color:var(--ink-mute);font-size:12px;letter-spacing:0.04em}
.cmd__hint span{color:var(--copper)}
.cmd__busy{
margin-left:auto;display:none;align-items:center;gap:8px;
color:var(--ink-mute);font-size:12px;letter-spacing:0.04em;
}
.cmd__busy.is-on{display:inline-flex}
.cmd__busy::before{
content:"";width:10px;height:10px;border-radius:50%;
border:1.5px solid var(--copper-bright);border-right-color:transparent;
animation:spin 0.85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cmd__output{
margin-top:24px;padding:18px 18px 18px 18px;
border:1px dashed var(--line);border-radius:6px;
background:rgba(var(--accent-rgb),0.04);
display:none;flex-direction:column;gap:6px;
font-size:13px;color:var(--ink-2);line-height:1.75;
}
.cmd__output.is-on{display:flex;animation:cmdFade 0.4s var(--ease-out)}
.cmd__output .ok{color:var(--copper-bright)}
.cmd__output .ok::before{content:"[ OK ] ";color:var(--copper);font-weight:500}
.cmd__output .err{color:#E08A6E}
.cmd__output .err::before{content:"[ !! ] ";color:#E08A6E;font-weight:500}
.cmd__output a{color:var(--copper-bright);text-decoration:underline;text-underline-offset:3px}
@keyframes cmdFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ----- Split column row (2 fields side by side, decluttered form) ----- */
.cmd__line--split{
display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;align-items:flex-start;
}
.cmd__line--split .cmd__col{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
}
.cmd__line--split .cmd__key{min-width:120px}
.cmd__line--split .cmd__field{flex:1 1 auto;min-width:0}
/* ----- Inline Y/N prompt inside the success output ----- */
.cmd__prompt-row{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;
font-family:var(--mono);color:var(--ink);
}
.cmd__prompt-row .cmd__prompt{font-size:14px}
.cmd__prompt-q{color:var(--ink-2)}
.cmd__prompt-k{
font-family:var(--mono);font-size:11px;letter-spacing:0.06em;
display:inline-flex;align-items:center;justify-content:center;
min-width:28px;height:24px;padding:0 8px;
border:1px solid var(--line);border-radius:4px;
background:rgba(var(--accent-rgb),0.08);color:var(--copper-bright);
cursor:pointer;user-select:none;
transition:background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.cmd__prompt-k:hover{background:rgba(var(--accent-rgb),0.18);border-color:var(--copper);transform:translateY(-1px)}
.cmd__prompt-k:active{transform:translateY(0)}
.cmd__prompt-sep{color:var(--ink-mute)}
.cmd__prompt-row .cmd__caret{margin-left:2px}
.cmd__prompt-row.is-done{opacity:0.55;pointer-events:none}
.cmd__prompt-row.is-done .cmd__caret{display:none}
.cmd__prompt-help{
font-size:11px;letter-spacing:0.04em;color:var(--ink-mute);margin-top:2px;
}
.cmd__prompt-help kbd{
font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:3px;
border:1px solid var(--line);background:transparent;color:var(--ink-2);
}
.cmd__prompt-after{
margin-top:6px;color:var(--copper-bright);
animation:cmdFade 0.35s var(--ease-out);
}
.cmd__prompt-after em{color:var(--ink-2);font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:0.06em}
.cmd__prompt-after::before{content:""}
.cmd__prompt-link{margin-top:2px}
@media (max-width:760px){
.cmd__body{padding:20px 18px 24px;font-size:13px}
.cmd__key{min-width:0;width:100%}
.cmd__line{flex-wrap:wrap}
.cmd__field{min-width:100%}
.cmd__textarea{margin-left:6px;padding-left:10px}
.cmd__line--split{grid-template-columns:1fr;gap:10px}
.cmd__line--split .cmd__col{flex-wrap:wrap}
.cmd__line--split .cmd__key{width:100%}
.cmd__prompt-row{font-size:12.5px}
.cmd__prompt-help{font-size:10.5px}
}
/* ===========================================================================
27. MULTI-CHIP CATEGORY FILTER (templates page)
=========================================================================== */
.tg-filterbar{
border-bottom:1px solid var(--line);
padding-top:clamp(28px,3.5vw,40px);padding-bottom:clamp(28px,3.5vw,40px);
display:flex;flex-direction:column;gap:24px;
}
.tg-filterbar__row{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.tg-filterbar__label{
flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
color:var(--ink-mute);min-width:110px;
}
.tg-filterbar__label strong{color:var(--copper);font-weight:500}
.tg-filterbar__chips{display:flex;flex-wrap:wrap;gap:8px}
.tg-chipx{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
padding:9px 14px 9px 12px;border:1px solid var(--line-strong);border-radius:999px;
color:var(--ink-2);background:transparent;cursor:pointer;
transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
position:relative;
}
.tg-chipx::before{
content:"";display:inline-block;width:11px;height:11px;border-radius:3px;
border:1px solid var(--line-strong);background:transparent;flex:none;
transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tg-chipx:hover{color:var(--ink);border-color:var(--ink-mute)}
.tg-chipx.is-active{
color:var(--bg);background:var(--ink);border-color:var(--ink);
}
.tg-chipx.is-active::before{
background:var(--copper);border-color:var(--copper);
background-image:url("data:image/svg+xml;utf8,");
background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}
.tg-chipx--master{
border-color:var(--copper);color:var(--copper-bright);
}
.tg-chipx--master.is-active{
background:var(--copper);color:#fff;border-color:var(--copper);
}
.tg-chipx--master.is-active::before{
background:#fff;border-color:#fff;
background-image:url("data:image/svg+xml;utf8,");
}
.tg-filterbar__count{
font-family:var(--mono);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);
margin-left:auto;
}
.tg-filterbar__count strong{color:var(--copper);font-weight:500}
.tg-filterbar__reset{
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);
padding:9px 10px;cursor:pointer;
transition:color var(--t-fast) var(--ease);
}
.tg-filterbar__reset:hover{color:var(--copper-bright)}
.tg-empty{
grid-column:1/-1;
text-align:center;padding:80px 24px;
border:1px dashed var(--line);border-radius:8px;
display:none;flex-direction:column;align-items:center;gap:12px;
background:radial-gradient(ellipse at top, rgba(var(--accent-rgb),0.05), transparent 60%);
}
.tg-empty.is-on{display:flex}
.tg-empty__title{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink)}
.tg-empty__lede{color:var(--ink-mute);font-size:14px;max-width:42ch}
@media (max-width:760px){
.tg-filterbar__label{width:100%}
.tg-filterbar__count{margin-left:0;width:100%;text-align:left}
}
/* ===========================================================================
28. MOBILE FINE-TUNING — Touch friendly, safe-area, no horizontal scroll
=========================================================================== */
/* Prevent any 100vw element from causing horizontal scroll due to scrollbar */
html,body{max-width:100%;overflow-x:hidden}
/* Safe-area insets on root layouts */
.nav__inner{
padding-left:max(var(--gutter), env(safe-area-inset-left));
padding-right:max(var(--gutter), env(safe-area-inset-right));
}
.footer .wrap{
padding-left:max(var(--gutter), env(safe-area-inset-left));
padding-right:max(var(--gutter), env(safe-area-inset-right));
}
.footer{padding-bottom:env(safe-area-inset-bottom)}
/* Disable hover-only effects on touch devices */
@media (hover:none){
.btn:hover, .nav__cta:hover, .magnet:hover, .case:hover, .tg-card:hover{
transform:none !important;box-shadow:none !important;
}
.tg-card:hover .tg-card__thumb{transform:none}
}
/* Form controls — prevent iOS auto-zoom by ensuring 16px on focus */
@media (max-width:760px){
input,select,textarea{font-size:16px !important}
.cmd__field input,.cmd__field select,.cmd__field textarea{font-size:15px !important}
/* terminal aesthetic — smaller is OK because we add letter-spacing & monospace */
}
/* Touch target minimums */
@media (max-width:980px){
.btn{padding:14px 20px;min-height:48px}
.nav__cta{min-height:44px}
.faq__q{min-height:64px;padding:22px 0}
.tg-chipx{min-height:42px;padding:10px 14px}
.preview-bar__view button,.viewport-toggle button{min-height:40px;min-width:40px}
}
/* Mobile hero — let the giant numerals breathe, not overflow */
@media (max-width:760px){
.hero{padding-top:clamp(40px,7vw,80px)}
.hero__bg-num{font-size:clamp(220px,60vw,420px);right:-12vw;opacity:0.35}
.hero__rail{display:none}
.hero__inner{grid-template-columns:1fr;gap:24px}
.hero__title{font-size:clamp(40px,9.4vw,64px);line-height:1.05;max-width:100%}
.hero__title .pull,.hero__title .pull-r{margin:0}
.hero__sub p{font-size:16px;line-height:1.55}
.hero__sub-mark{font-size:10px;letter-spacing:0.22em}
.hero__ctas{gap:10px}
.hero__ctas .quiet{margin-left:0;width:100%;font-size:11px}
}
/* Page hero (sub-pages) on mobile */
@media (max-width:760px){
.page-hero{padding-top:clamp(32px,6vw,64px) !important;padding-bottom:clamp(40px,7vw,72px) !important}
.page-hero__title{font-size:clamp(36px,8.8vw,56px);line-height:1.06;max-width:100%}
.page-hero__lede{font-size:15.5px;line-height:1.6;margin-top:22px}
.page-hero__meta{margin-top:32px;gap:12px 24px;font-size:10.5px;padding-top:20px}
}
/* Marquee — slower, smaller, mobile-respectful */
@media (max-width:760px){
.marquee{padding:18px 0}
.marquee__track{font-size:16px;gap:32px;animation-duration:48s}
.marquee__track span{gap:32px}
}
/* Section padding */
@media (max-width:760px){
:root{--section-y:clamp(56px,10vw,96px)}
}
/* Trust strip */
@media (max-width:760px){
.trust__cell .trust__num{font-size:clamp(56px,16vw,84px)}
}
/* Service rows — already fixed, refine */
@media (max-width:480px){
.svc-row{grid-template-columns:48px 1fr 32px;gap:6px 12px}
.svc-row__num span{font-size:28px}
.svc-row__title{font-size:22px;line-height:1.15}
.svc-row__desc{font-size:14.5px;line-height:1.55}
.svc-row__tags{font-size:11px}
}
/* Templates — chip layout & cards */
@media (max-width:760px){
.tg-filterbar{padding-top:24px;padding-bottom:24px;gap:18px}
.tg-filterbar__row{gap:10px}
.tg-filterbar__chips{gap:8px}
.tg-chipx{font-size:11px;letter-spacing:0.08em}
.tg-filterbar__count{font-size:10.5px}
.tg-card__thumb{aspect-ratio:1.45 / 1}
}
/* Preview viewer — mobile toolbar */
@media (max-width:760px){
.preview-bar{
grid-template-columns:1fr auto !important;gap:8px !important;
padding:10px var(--gutter) !important;
}
.preview-bar__brand .brand-word__sub{display:none}
.preview-bar__view{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.preview-bar__view::-webkit-scrollbar{display:none}
.preview-stage{padding:14px 8px !important}
.preview-frame{width:100% !important;max-width:100% !important;height:calc(100vh - 220px) !important;min-height:480px}
}
/* Footer — collapse columns gracefully */
@media (max-width:760px){
.footer{padding-top:64px;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.footer__inner{flex-direction:column;gap:36px;align-items:flex-start}
.footer__brand{align-items:flex-start}
.footer__nav{grid-template-columns:1fr 1fr;gap:24px}
.footer__base{flex-direction:column;align-items:flex-start;gap:8px;font-size:12px}
}
@media (max-width:420px){
.footer__nav{grid-template-columns:1fr}
}
/* CMD form — improved mobile layout */
@media (max-width:760px){
.cmd{border-radius:6px}
.cmd__bar{padding:11px 14px;gap:7px;flex-wrap:wrap}
.cmd__bar .ttl{margin-left:8px;font-size:10.5px;letter-spacing:0.12em}
.cmd__bar .session{font-size:10px;letter-spacing:0.12em;margin-left:auto;flex-shrink:0}
.cmd__body{padding:18px 14px 22px;font-size:13px;gap:4px}
.cmd__line{flex-wrap:wrap;gap:6px;align-items:flex-start}
.cmd__prompt{font-size:14px}
.cmd__key{min-width:0;width:100%;color:var(--copper-bright);font-size:11.5px;letter-spacing:0.04em}
.cmd__key::after{display:none}
.cmd__field{width:100%;min-width:0}
.cmd__field input,.cmd__field select,.cmd__field textarea{
padding:8px 10px;border:1px solid var(--line);border-radius:4px;
background:rgba(255,255,255,0.02);
}
.cmd__field input:focus,.cmd__field select:focus,.cmd__field textarea:focus{
border-color:var(--copper);background:rgba(var(--accent-rgb),0.04);
}
.cmd__caret{display:none}
.cmd__textarea{margin-left:0;padding-left:0}
.cmd__line--header{font-size:10.5px;margin-top:14px}
.cmd__line--note{font-size:11.5px;letter-spacing:0.04em}
.cmd__actions{flex-direction:column;align-items:stretch;gap:14px}
.cmd__submit{width:100%;justify-content:center;min-height:54px;padding:16px 20px}
.cmd__hint{font-size:11px;text-align:center}
.cmd__min-note{padding:10px 14px;font-size:10.5px;letter-spacing:0.12em}
.cmd__output{padding:14px;font-size:12.5px}
}
/* FAQ on mobile */
@media (max-width:760px){
.faq__q{font-size:17px;line-height:1.35;gap:14px}
.faq__a p{font-size:15px;line-height:1.65}
}
/* Approach 6-cell + process */
@media (max-width:760px){
.why-grid,.principles{gap:0}
.principles__row{padding:24px 0}
.process-step{padding:24px 0;gap:14px}
.process-step__num{font-size:48px}
}
/* CTA strip & final CTA */
@media (max-width:760px){
.cta-strip__title,.cta-final h2{font-size:clamp(34px,8.6vw,56px);line-height:1.06}
.cta-strip__actions,.cta-final__actions{flex-direction:column;width:100%;align-items:stretch;gap:10px}
.cta-strip__actions .btn,.cta-final__actions .btn{justify-content:center;width:100%}
}
/* Better focus visibility on dark bg for keyboard users */
@media (max-width:760px){
:focus-visible{outline-offset:4px}
}
/* Avoid grain overlay covering interactive cmd in iOS Safari */
.grain{pointer-events:none}
/* Niche template preview iframes — fallback default (JS rescaleThumbs() applies precise per-card scale on render & resize) */
.tg-card__thumb iframe{
position:absolute;top:0;left:0;right:auto;bottom:auto;
width:1280px;height:960px;max-width:none;max-height:none;
transform-origin:top left;border:0;
}
/* ===========================================================================
29. TEMPLATE GALLERY — manifest-driven card refinements
=========================================================================== */
.tg-loading{
grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;
padding:80px 24px;color:var(--ink-mute);
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
}
.tg-loading__bar{
width:120px;height:1.5px;background:var(--line);border-radius:2px;position:relative;overflow:hidden;
}
.tg-loading__bar::after{
content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;
background:linear-gradient(90deg,transparent,var(--copper),transparent);
animation:tgLoad 1.4s ease-in-out infinite;
}
@keyframes tgLoad{0%{left:-40%}100%{left:100%}}
.tg-card__tags{
display:flex;flex-wrap:wrap;gap:6px;
}
.tg-card__tag{
font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:lowercase;
padding:3px 9px;border:1px solid var(--line);border-radius:2px;color:var(--ink-mute);
}
/* ===== View toggle (grid / list switcher) ===== */
.tg-filterbar__row--view{align-items:center}
.tg-view{
display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--bg-2);
}
.tg-view__btn{
display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
background:transparent;border:0;color:var(--ink-mute);cursor:pointer;
font-family:var(--mono);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
border-radius:999px;transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tg-view__btn:hover{color:var(--ink)}
.tg-view__btn.is-active{background:var(--ink);color:var(--bg)}
.tg-view__btn svg{opacity:0.9}
.tg-filterbar__hint{
margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;color:var(--ink-faint);
}
/* =====================================================================
THEME TOGGLE — sun/moon icon button (nav) + pill switch (drawer)
===================================================================== */
/* ------- Nav icon button ------- */
.nav__theme{
width:44px;height:44px;border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line-strong);
color:var(--ink-2);
background:transparent;
position:relative;overflow:hidden;
transition:border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.nav__theme:hover{border-color:var(--copper);color:var(--copper-bright);transform:translateY(-1px)}
.nav__theme:active{transform:translateY(0)}
.nav__theme-ic{
position:absolute;inset:0;margin:auto;
transition:transform 420ms var(--ease), opacity 320ms var(--ease);
}
/* Dark: show moon */
:root:not([data-theme="light"]) .nav__theme-ic--sun{transform:translateY(-12px) rotate(-90deg);opacity:0}
:root:not([data-theme="light"]) .nav__theme-ic--moon{transform:none;opacity:1}
/* Light: show sun */
:root[data-theme="light"] .nav__theme-ic--moon{transform:translateY(12px) rotate(90deg);opacity:0}
:root[data-theme="light"] .nav__theme-ic--sun{transform:none;opacity:1}
/* Theme toggle stays visible on all viewports \u2014 compact size on small */
@media (max-width:980px){
.nav__theme{width:40px;height:40px}
}
@media (max-width:560px){
.nav__theme{width:38px;height:38px}
}
/* ------- Drawer pill switch ------- */
.nav__drawer-theme{
margin-top:14px;width:100%;
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border:1px solid var(--line);border-radius:999px;
background:var(--surface);
color:var(--ink-2);
font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
min-height:48px;cursor:pointer;
transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.nav__drawer-theme .lbl{color:var(--ink)}
.nav__drawer-theme:hover{border-color:var(--copper)}
.nav__drawer-theme .sw{
position:relative;display:inline-flex;align-items:center;justify-content:space-between;
width:62px;height:30px;border-radius:999px;background:var(--bg-3);
border:1px solid var(--line-strong);padding:0 6px;
}
.nav__drawer-theme .sw-ic{
font-size:14px;color:var(--ink-mute);z-index:1;line-height:1;
transition:color var(--t-med) var(--ease);
}
.nav__drawer-theme .sw-knob{
position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
background:var(--copper);
box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.22), 0 6px 12px -4px rgba(var(--accent-rgb),0.5);
transition:transform var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease);
}
:root[data-theme="light"] .nav__drawer-theme .sw-knob{transform:translateX(32px)}
:root:not([data-theme="light"]) .nav__drawer-theme .sw-ic--moon{color:var(--copper)}
:root[data-theme="light"] .nav__drawer-theme .sw-ic--sun{color:var(--copper)}
/* =====================================================================
LIGHT THEME OVERRIDES — component-level tweaks
(dark-purple components that need a light-mode adjustment)
===================================================================== */
:root[data-theme="light"] .btn--ink{
background:var(--inv-bg); /* dark royal in light mode */
color:var(--inv-ink);
border-color:var(--inv-bg);
}
:root[data-theme="light"] .btn--ink:hover{
background:var(--copper);color:#fff;border-color:var(--copper);
}
/* Light mode: softer field backgrounds so CMD form reads well */
:root[data-theme="light"] .form,
:root[data-theme="light"] .cmd{
background:var(--surface);
box-shadow:0 30px 80px -40px rgba(45,27,105,0.18), 0 0 0 1px rgba(var(--accent-rgb),0.06);
}
/* Preview shell in light: invert the dark chrome so toolbar remains crisp */
:root[data-theme="light"] .preview-shell{background:var(--bg-2)}
:root[data-theme="light"] .preview-toolbar{background:var(--bg);border-bottom-color:var(--line)}
/* Iframe thumbs in templates gallery: lighter overlay in light mode */
:root[data-theme="light"] .tg-card__overlay{
background:linear-gradient(to top, rgba(26,19,51,0.92) 0%, rgba(26,19,51,0.55) 55%, rgba(26,19,51,0) 100%);
}
/* Aurora nav-bar blend: dark mode uses dark scrim, light mode soft white */
:root[data-theme="light"] .nav{
background:color-mix(in srgb, var(--bg) 82%, transparent);
}
/* Footer big text should stay readable */
:root[data-theme="light"] .footer__big{
color:rgba(var(--accent-rgb),0.12);
}
/* Section tint backgrounds (hero teasers, etc) need purple gradients on light */
:root[data-theme="light"] .section[style*="background:var(--bg-2)"]{
background:var(--bg-2) !important;
}