/* KloorStudio: the home page, the shop and the contact page. Every style lives here: the site's
   Content-Security-Policy is style-src 'self', which blocks <style> blocks and style="" alike.

   The look is KloorLauncher's own: rounded panels like the launcher's, a floating top bar, labels
   as pills with a pixel dot, sentence-case headings, keycap buttons, and the aurora of the
   launcher's artwork as the only background. Green is for actions and highlights, aqua for
   secondary accents. */
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url("fonts/ChakraPetch-Bold.woff2") format("woff2")}
:root{
  --bg:#0a0c0d;--panel:rgba(255,255,255,.028);--panel-2:rgba(255,255,255,.05);--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.13);
  --green:#5fe83d;--green-2:#b8ff94;--aqua:#3fd6e0;--aqua-2:#a8f3fb;
  --text:#eef3ef;--muted:#a3aea9;--dim:#7f8a85;--danger:#ff7a7a;
  --display:"Chakra Petch","Segoe UI",Arial,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
  --gutter:clamp(20px,3.5vw,72px);
  --r-lg:22px;--r-md:16px;--r-sm:12px;
  color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{margin:0;color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{background:
  radial-gradient(1100px 620px at 88% -8%,rgba(63,214,224,.09),transparent 62%),
  radial-gradient(900px 560px at -6% 4%,rgba(95,232,61,.09),transparent 60%),
  var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:absolute;left:16px;top:-60px;z-index:40;padding:10px 14px;border-radius:10px;background:var(--green);color:#04120a;font:600 14px var(--body)}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
/* Edge to edge: the page runs the full width of the screen, less a margin that grows with it.
   There is no maximum width, so a wide monitor is filled rather than boxed in the middle. */
.wrap{width:calc(100% - 2 * var(--gutter));margin:0 auto}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* type */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(34px,3.4vw + 10px,76px);line-height:1.02;max-width:18ch}
.lead{max-width:60ch;margin-top:18px;color:var(--muted);font-size:clamp(17px,.5vw + 12px,20px);line-height:1.65}
.chip{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 14px 8px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--text);font:600 13.5px/1 var(--body)}
.chip .dot{width:8px;height:8px;border-radius:2px;background:var(--green);box-shadow:0 0 10px rgba(95,232,61,.8)}
.small-title{margin-bottom:18px;color:var(--muted);font:600 14px/1.3 var(--body);letter-spacing:.01em}
.tagline{margin-top:6px;color:var(--aqua-2);font:500 14.5px/1.4 var(--body)}

/* buttons: keycaps -- a lit top edge and a darker bottom one, pressed down on click */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-sm);font:600 15.5px/1 var(--body);white-space:nowrap;transition:transform .12s ease,filter .12s ease,border-color .15s ease,background .15s ease}
.btn .ico{width:17px;height:17px}
.btn-primary{background:linear-gradient(180deg,#78f25a,#4ed12e);color:#04120a;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.24),0 10px 26px rgba(95,232,61,.2)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.24)}
.btn-ghost{border-color:var(--line-2);background:var(--panel-2);color:var(--text)}
.btn-ghost:hover{border-color:rgba(63,214,224,.6)}
.btn-sm{height:42px;padding:0 16px;border-radius:10px;font-size:14.5px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--green);font:600 14.5px/1.3 var(--body)}
.link .ico{width:16px;height:16px;transition:transform .15s ease}
.link:hover .ico{transform:translateX(3px)}
.link-quiet{color:var(--muted);font:600 14.5px/1.3 var(--body)}
.link-quiet:hover{color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:5px 10px;border-radius:8px;background:var(--panel-2);color:#bcc7c2;font:500 12.5px/1.3 var(--body)}
.checks{display:grid;gap:9px}
.checks li{display:flex;align-items:flex-start;gap:10px;color:#d3ddd8;font-size:14.5px;line-height:1.45}
.checks .ico{width:17px;height:17px;margin-top:1px;color:var(--green)}
.tile-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:rgba(95,232,61,.12);color:var(--green)}
.tile-icon .ico{width:22px;height:22px}

/* top bar: a rounded panel floating over the page */
.topbar{position:sticky;top:0;z-index:30;padding:12px var(--gutter) 0}
.topbar-row{display:flex;align-items:center;gap:20px;height:64px;padding:0 12px 0 16px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(11,14,15,.78);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.logo{display:flex;flex:none;align-items:center;gap:10px;font:700 19px/1 var(--display);letter-spacing:-.01em}
.logo img{width:32px;height:32px;filter:drop-shadow(0 0 10px rgba(95,232,61,.35))}
.logo b{color:var(--green);font-weight:700}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{padding:9px 13px;border-radius:10px;color:var(--muted);font:500 15px/1 var(--body)}
.nav-links a:hover{background:var(--panel-2);color:var(--text)}
.nav-links a[aria-current]{background:rgba(95,232,61,.12);color:var(--text)}
.lang-switch,.menu-lang{display:flex;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.lang-switch a,.menu-lang a{padding:7px 10px;border-radius:8px;color:var(--dim);font:700 12px/1 var(--body);letter-spacing:.04em}
.lang-switch a:hover,.menu-lang a:hover{color:var(--text)}
.lang-switch a[aria-current],.menu-lang a[aria-current]{background:var(--green);color:#04120a}
.menu{display:none;position:relative}
.menu summary{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2);font:600 14.5px/1 var(--body);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu-bars{display:grid;gap:4px}
.menu-bars i{display:block;width:16px;height:2px;border-radius:2px;background:var(--text)}
.menu[open] summary{border-color:var(--green)}
.menu-panel{position:absolute;right:0;top:52px;width:min(300px,calc(100vw - 40px));padding:10px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#0f1415;box-shadow:0 30px 70px rgba(0,0,0,.6)}
/* :not(.menu-lang), or these would win over the language switch's own flex row, padding and font */
.menu-panel nav:not(.menu-lang){display:grid}
.menu-panel nav:not(.menu-lang) a{padding:13px 12px;border-radius:10px;font:600 17px/1 var(--body)}
.menu-panel nav:not(.menu-lang) a:hover{background:var(--panel-2)}
.menu-lang{margin:8px 4px 4px;justify-content:center}
.menu-lang a{flex:1;text-align:center;padding:11px}

/* hero: the heading runs edge to edge, left-aligned, over a rail of the shop's categories */
.hero{position:relative;padding:clamp(56px,9vh,112px) 0 clamp(40px,6vh,72px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(620px 360px at 82% 22%,#000,transparent 72%);mask-image:radial-gradient(620px 360px at 82% 22%,#000,transparent 72%)}
.hero-inner{position:relative;container-type:inline-size}
/* The heading's size comes from the width of its own column (container query units), so its
   longest line fills the column on a phone and on a wide monitor alike. The divisor is that
   line's measured width in em plus 1.5% spare (English "websites and mods" 8.707em, Estonian
   "veebilehed ja modid" 9.022em) -- change the words and it has to be measured
   again. Very old browsers without container units keep the viewport-based size before it. */
.hero h1{font-size:clamp(34px,9.2vw,190px);font-size:calc(100cqi / 8.84);line-height:.96;letter-spacing:-.025em}
.hero h1:lang(et){font-size:clamp(32px,8.6vw,180px);font-size:calc(100cqi / 9.16)}
.hero h1 span{display:block}
.hero .l2{color:var(--green)}
.hero .l3{color:rgba(238,243,239,.5)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 40px;margin-top:clamp(24px,3.5vh,40px)}
.hero-lead{max-width:62ch;color:var(--muted);font-size:clamp(17px,.6vw + 12px,21px);line-height:1.6}
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(32px,5vh,56px)}
.rail-tile{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px 14px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.rail-tile:hover{border-color:rgba(95,232,61,.5);background:rgba(95,232,61,.06);transform:translateY(-2px)}
.rail-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:rgba(95,232,61,.12);color:var(--green)}
.rail-icon .ico{width:22px;height:22px}
.rail-text{min-width:0}
.rail-text strong{display:block;font:700 16px/1.2 var(--display)}
.rail-text small{display:block;margin-top:4px;color:var(--dim);font-size:13px;line-height:1.35}
.rail-arrow{margin-left:auto;width:16px;height:16px;color:var(--dim)}

/* sections */
.section{position:relative;padding:clamp(72px,8vw,128px) 0}
.section-head{max-width:860px;margin-bottom:clamp(32px,4vw,56px)}

/* shop: a bento of the five categories, KloorLauncher across the bottom */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.tile-cars{grid-column:span 4}
.tile-handling,.tile-models,.tile-mods,.tile-websites{grid-column:span 2}
.tile-handling{grid-row:span 1}
.tile-art{position:relative;display:grid;place-items:center;height:190px;margin:10px 10px 0;overflow:hidden;border-radius:var(--r-md);background:radial-gradient(360px 180px at 50% 110%,rgba(95,232,61,.16),transparent 70%),#0b1011}
.tile-cars .tile-art{height:230px;background:radial-gradient(520px 200px at 50% 115%,rgba(95,232,61,.22),transparent 70%),linear-gradient(180deg,#0b1210,#081009)}
.car-art{width:min(560px,86%);height:auto;color:var(--green);filter:drop-shadow(0 0 22px rgba(95,232,61,.28))}
.spec{display:grid;gap:12px;width:80%}
.spec span{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:12px}
.spec small{color:var(--dim);font:500 12.5px var(--body)}
.spec i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--aqua),var(--aqua-2));box-shadow:0 0 12px rgba(63,214,224,.35)}
.spec .w58{width:58%}.spec .w72{width:72%}.spec .w86{width:86%}.spec .w94{width:94%}
.cube-art{width:128px;height:128px;fill:none;stroke:var(--aqua);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 16px rgba(63,214,224,.3))}
.cube-art .faint{stroke-opacity:.35;stroke-dasharray:3 4}
.voxels{display:grid;grid-template-columns:repeat(4,24px);gap:4px;transform:rotate(-8deg)}
.voxels i{width:24px;height:24px;border-radius:4px;background:#1f4d22}
.voxels i:nth-child(3n){background:#2f7a2c}
.voxels i:nth-child(4n+1){background:#5fe83d}
.voxels i:nth-child(5n){background:#3fd6e0}
.voxels i:nth-child(7n){background:#143517}
.tile-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 22px}
.tile-body .tile-icon{margin-bottom:14px}
.tile h3{font-size:24px;line-height:1.1}
.tile-body>p:not(.tagline){margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6}
.tile .checks{margin:16px 0 18px}
.tile-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:18px}
.tile-launcher{grid-column:1 / -1;flex-direction:row;border-color:rgba(63,214,224,.3);background:linear-gradient(120deg,rgba(63,214,224,.09),rgba(255,255,255,.015) 55%)}
.tile-launcher .tile-body{flex:1 1 0;max-width:620px;padding:28px}
.tile-launcher .tile-art{flex:1 1 0;height:auto;min-height:260px;margin:12px;padding:18px;background:radial-gradient(420px 220px at 60% 100%,rgba(95,232,61,.18),transparent 70%),#081009}
.tile-launcher .tile-art img{border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.flag{align-self:flex-start;margin-bottom:16px;padding:6px 10px;border-radius:8px;background:var(--aqua);color:#031214;font:700 12.5px/1 var(--body)}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.banner{position:relative;height:clamp(180px,13vw,260px);margin:10px 10px 0;overflow:hidden;border:1px solid rgba(255,255,255,.05);border-radius:var(--r-md);background:radial-gradient(360px 160px at 50% 110%,rgba(95,232,61,.12),transparent 70%),#0b1011}
.banner img{width:100%;height:100%;object-fit:cover}
.banner-launcher img{object-position:62% 22%}
.banner-landscape img{object-position:50% 58%}
.banner-terminal code{display:grid;gap:8px;padding:22px 24px;color:#bcdcc6;font:500 12.5px/1.3 ui-monospace,"Cascadia Code",Consolas,monospace}
.banner-terminal code span:first-child{color:var(--aqua)}
.banner-site,.banner-dashboard,.banner-chat{display:grid;place-items:center}
.mini-site{display:grid;gap:8px;width:62%;padding:14px;border:1px solid var(--line-2);border-radius:10px;background:#0e1415;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mini-site i{display:block;height:7px;border-radius:3px;background:#22302c}
.mini-site i.bar{height:10px;background:#18221f}
.mini-site i.hl{width:58%;height:11px;background:#e7efe9}
.mini-site i.w70{width:70%}
.mini-site i.cta{width:34%;height:12px;background:var(--green)}
.bubbles{display:grid;gap:10px;width:100%;padding:22px}
.bubbles i{max-width:82%;padding:9px 13px;border-radius:14px;font:500 12.5px/1.3 var(--body);font-style:normal}
.bubbles .in{justify-self:start;background:#14202a;color:#bfe7ee}
.bubbles .out{justify-self:end;background:rgba(95,232,61,.14);color:#cdf7bf}
.services-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;padding:20px 22px}
.services-list span{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#0e1415;color:#c8d3ce;font:500 13px var(--body)}
.services-list i{width:8px;height:8px;border-radius:2px;background:var(--green);box-shadow:0 0 10px var(--green)}
.work-body{display:flex;flex-direction:column;flex:1;padding:18px 22px 22px}
.meta{color:var(--aqua-2);font:500 13px/1.3 var(--body)}
.work-body h3{margin-top:6px;font-size:21px;line-height:1.15}
.work-body p:not(.meta){margin-top:8px;color:var(--muted);font-size:15px;line-height:1.6}
.work-body .tags{margin-top:auto;padding-top:16px}
.work-body .link{margin-top:14px}

/* how I work: principles as tiles beside the release board */
.how{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head board" "list board";gap:0 40px;align-items:start}
.how .section-head{grid-area:head}
.principles{grid-area:list;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.principles li{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.principles h3{margin-top:14px;font-size:18px;line-height:1.25}
.principles p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.6}
.board{grid-area:board;padding:26px;border:1px solid rgba(95,232,61,.25);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(95,232,61,.08),rgba(255,255,255,.015))}
.board-title{margin-bottom:10px;font-size:21px}
.board ul:not(.tags) li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);color:#d3ddd8;font-size:15px}
.board b{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(95,232,61,.14);color:var(--green-2);font:600 13px/1 var(--body)}
.board b .ico{width:14px;height:14px}
.board-rule{margin:16px 0 18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}

/* process: a timeline, pixel nodes on one line */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:step}
.timeline::before{content:"";position:absolute;top:11px;left:12px;right:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--aqua));opacity:.45}
.timeline li{position:relative;padding-top:42px;counter-increment:step}
.node{position:absolute;top:0;left:0;width:24px;height:24px;border:2px solid var(--green);border-radius:7px;background:var(--bg);box-shadow:0 0 16px rgba(95,232,61,.35)}
.node::after{content:counter(step);position:absolute;inset:0;display:grid;place-items:center;color:var(--green);font:700 11px/1 var(--display)}
.timeline h3{font-size:18px;line-height:1.25}
.timeline p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.6}
.timeline-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* KloorLauncher: one panel over the launcher's own aurora */
.launcher-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:40px;overflow:hidden;padding:clamp(28px,4vw,56px);border:1px solid rgba(255,255,255,.1);border-radius:28px;background:#07100b}
.launcher-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.launcher-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,11,8,.94) 0%,rgba(6,11,8,.72) 48%,rgba(6,11,8,.25) 100%)}
.launcher-copy,.launcher-shot{position:relative;z-index:1;min-width:0}
.launcher-copy{container-type:inline-size}
/* "KloorLauncher" is one long word; like the hero heading, it is sized from its own column so it
   fills the column instead of spilling out of it: 6.763em measured, plus 2%. */
.launcher-copy h2{max-width:none;font-size:clamp(32px,4.6vw,124px);font-size:calc(100cqi / 6.9)}
.feature-list{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.feature-list li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.07);font-size:14px}
.feature-list .ico{width:16px;height:16px;color:var(--green)}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.dates div{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(0,0,0,.35)}
.dates small{color:var(--dim);font:500 12.5px var(--body)}
.dates b{display:block;margin-top:6px;color:var(--aqua-2);font:700 19px/1.15 var(--display)}
.launcher-shot img{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);box-shadow:0 30px 80px rgba(0,0,0,.55);transform:perspective(1400px) rotateY(-7deg)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.about blockquote{position:relative;margin-top:30px;padding-left:34px;color:var(--text);font:700 clamp(22px,1.2vw + 12px,34px)/1.32 var(--display);letter-spacing:-.01em}
.about blockquote::before{content:"\201C";position:absolute;left:0;top:-.12em;color:var(--green);font-size:1.8em;line-height:1}
.about-side .lead{margin-top:8px}
.stat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.stat-tiles div{padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.stat-tiles dt{color:var(--green);font:700 clamp(28px,1.6vw + 14px,44px)/1 var(--display)}
.stat-tiles dd{margin-top:8px;color:var(--muted);font-size:14px}

/* questions */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq{display:grid;gap:10px}
.faq details{padding:0 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.faq details[open]{border-color:rgba(95,232,61,.35);background:rgba(95,232,61,.04)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;cursor:pointer;list-style:none;font:600 16.5px/1.4 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:20px;height:20px;color:var(--aqua);transition:transform .2s ease}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details p{max-width:70ch;padding-bottom:18px;color:var(--muted);font-size:15.5px;line-height:1.7}
.faq details .link{margin:-4px 0 18px}

/* contact form. Scripts are off (script-src 'none'), so the form is plain HTML: the browser
   checks the required fields and the server checks everything again. */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.mini-steps{display:grid;gap:12px;margin-top:28px;counter-reset:mini}
.mini-steps li{display:grid;grid-template-columns:30px 1fr;gap:2px 12px;counter-increment:mini}
.mini-steps li::before{content:counter(mini);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(95,232,61,.12);color:var(--green);font:700 13px/1 var(--display)}
.mini-steps b{font:600 15px/1.4 var(--body)}
.mini-steps span{color:var(--muted);font-size:14.5px;line-height:1.5}
.form-panel{padding:clamp(22px,2.4vw,36px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(13,17,18,.9)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;margin-bottom:8px;color:var(--muted);font:600 13.5px/1.3 var(--body)}
.field label small{color:var(--dim);font-weight:500}
.field input,.field select,.field textarea{display:block;width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:10px;background:#0b0f10;color:var(--text);font:400 16px/1.45 var(--body)}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(63,214,224,.16)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field-hint{margin-top:8px;color:var(--dim);font-size:13.5px;line-height:1.5}
.field-error{margin-top:8px;color:var(--danger);font-size:14px;line-height:1.45}
.form-notice{margin-bottom:20px;padding:14px 16px;border:1px solid rgba(255,122,122,.5);border-radius:10px;background:rgba(255,122,122,.08);color:#ffd6d6;line-height:1.5}
div.form-panel .form-notice{border-color:var(--line-2);background:none;color:var(--muted)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:4px}
.form-alt{color:var(--dim);font-size:14px}
.form-alt a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.form-privacy{margin-top:16px;color:var(--dim);font-size:13px;line-height:1.55}
.form-privacy a{color:var(--muted);text-decoration:underline}
.sent{max-width:760px}
.sent .actions{margin-top:28px}

/* shop and contact pages */
.page-hero{padding:clamp(56px,8vh,104px) 0 clamp(32px,5vh,56px)}
.page-hero h1{max-width:16ch;font-size:clamp(40px,4.4vw + 12px,104px);line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);font:600 14.5px/1 var(--body)}
.chips a:hover{border-color:rgba(95,232,61,.55)}
.chips .ico{color:var(--green)}
.section.shop-how{padding-top:0}
.shop-cat{padding:clamp(48px,5vw,84px) 0;border-top:1px solid var(--line)}
.cat-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
.cat-head .tile-icon{margin-bottom:18px}
.cat-head h2{max-width:none}
.cat-head .tagline{margin-top:10px}
.cat-head .lead{margin:14px 0 26px}
.cat-panel{padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.cat-panel .checks{margin-bottom:18px}
.products-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin:40px 0 18px}
.products-head .products-label{margin:0}
.products-note{color:var(--dim);font-size:14px}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* The ready-made websites, a row for each kind under a small heading ruled to the edge. */
.product-group+.product-group{margin-top:34px}
.product-group+.products-head{margin-top:56px}
.product-group-title{display:flex;align-items:center;gap:14px;margin:0 0 14px;color:var(--text);font:600 15px/1.3 var(--body);letter-spacing:.01em}
.product-group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.product{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.product-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b1011}
.product-flag{position:absolute;top:12px;left:12px;padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(8,11,11,.74);color:var(--green-2);font:600 12px/1 var(--body);letter-spacing:.03em}
.product-art img{width:100%;height:100%;object-fit:cover}
.product-body{display:flex;flex-direction:column;flex:1;padding:18px}
.product-name{margin:0;font:700 18px/1.15 var(--display);letter-spacing:-.015em}
.product p{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.55}
.product-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}
/* Preview and Order side by side; on a narrow card they move under the price, still to the right. */
.product-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.product-actions .btn{gap:7px}
.product-actions .ico{width:15px;height:15px}
.price{color:var(--green-2);font:700 20px/1 var(--display)}
.price-request{color:var(--muted);font:600 14px/1.3 var(--body)}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,4vw,52px);border:1px solid rgba(95,232,61,.25);border-radius:28px;background:radial-gradient(700px 300px at 0% 0%,rgba(95,232,61,.14),transparent 70%),var(--panel)}

/* footer: ends with the name, as large as the page is wide */
.site-foot{margin-top:clamp(24px,4vw,56px);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%)}
.site-foot .wrap{container-type:inline-size}
.foot{display:grid;grid-template-columns:1.3fr .8fr 1.2fr .8fr;gap:40px;padding:64px 0 28px}
.foot-brand p{max-width:36ch;margin:16px 0 22px;color:var(--muted);font-size:14.5px;line-height:1.65}
.foot-label{margin-bottom:12px;color:var(--dim);font:600 13px/1.3 var(--body);letter-spacing:.01em}
h2.foot-label{max-width:none}
.foot-brand .foot-label{margin:0 0 8px}
.foot-mail{display:block;width:fit-content;color:var(--green);font-weight:600}.foot-mail+.foot-mail{margin-top:8px}
.foot-list{display:grid;gap:10px;color:var(--muted);font-size:14.5px}
.foot-list a:hover{color:var(--text)}
/* The name spans the footer the way the heading spans the hero, sized from the column:
   "KloorStudio" measures 5.214em, plus 1.5%. */
.wordmark{margin:12px 0 -.06em;font:700 calc(100cqi / 5.3)/.9 var(--display);letter-spacing:-.035em;white-space:nowrap;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,rgba(95,232,61,.26),rgba(95,232,61,.02) 85%);color:transparent;user-select:none}
.wordmark b{font-weight:700}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:20px 0;border-top:1px solid var(--line);color:var(--dim);font-size:13.5px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--text)}
.status-dot{display:inline-flex;align-items:center;gap:9px}
.status-dot::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--green);box-shadow:0 0 10px var(--green)}
.disclaimer{padding-bottom:36px;color:var(--dim);font-size:12px;line-height:1.6}

/* responsive */
@media (max-width:1180px){
  .tile-cars,.tile-launcher{grid-column:1 / -1}
  .tile-handling,.tile-models,.tile-mods,.tile-websites{grid-column:span 3}
  .rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav-links,.nav-cta{display:none}
  .lang-switch{margin-left:auto}
  .menu{display:block}
  .hero-row,.how,.launcher-panel,.about,.faq-grid,.contact-grid,.cat-grid{grid-template-columns:1fr}
  .how{grid-template-areas:"head" "list" "board";gap:24px}
  .how .section-head{margin-bottom:8px}
  .faq-grid,.contact-grid,.cat-grid,.about{gap:32px}
  .timeline,.timeline-3{grid-template-columns:1fr;gap:26px}
  .timeline::before{top:12px;bottom:12px;left:11px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--green),var(--aqua))}
  .timeline li{padding:0 0 0 44px}
  .tile-launcher{flex-direction:column}
  .tile-launcher .tile-body{max-width:none}
  .launcher-shot img{transform:none}
  .foot{grid-template-columns:1fr 1fr}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-band{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .topbar{padding-top:8px}
  .topbar-row{height:58px;padding:0 8px 0 12px;gap:10px}
  .lang-switch{display:none}
  .menu{margin-left:auto}
  .bento,.work-grid,.principles{grid-template-columns:1fr}
  .tile-handling,.tile-models,.tile-mods,.tile-websites{grid-column:1 / -1}
  .rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .rail-tile{scroll-snap-align:start}
  .form-row{grid-template-columns:1fr;gap:0}
  .products,.foot{grid-template-columns:1fr}
  .foot{gap:32px}
  .dates{grid-template-columns:1fr}
}
/* KloorStudio and the menu button need about 300px at full size; a 320px phone has 280. */
@media (max-width:400px){
  .logo{gap:8px;font-size:17px}
  .logo img{width:28px;height:28px}
  .menu summary{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.rail-tile,.link .ico,.faq summary .ico{transition:none}
}

/* The order terms (order-terms.php): a contents list beside readable sections, one column on narrow screens. */
.order-terms-section{padding-top:0}
.shop-terms{margin-top:26px}
.order-terms{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.order-terms-toc{position:sticky;top:110px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.order-terms-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:terms}
.order-terms-toc li{counter-increment:terms}
.order-terms-toc a{display:flex;gap:10px;padding:7px 0;color:var(--muted);font-size:14.5px;line-height:1.35}
.order-terms-toc a::before{content:counter(terms) ".";min-width:22px;color:var(--dim)}
.order-terms-toc a:hover{color:var(--text)}
.order-terms-body{display:grid;gap:14px;max-width:780px}
.order-terms-body section{padding:26px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.order-terms-body h2{display:flex;gap:10px;max-width:none;font-size:clamp(20px,.6vw + 15px,24px);line-height:1.2}
.order-terms-body h2 span{color:var(--green)}
.order-terms-body p{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.7}
@media (max-width:980px){.order-terms{grid-template-columns:1fr;gap:24px}.order-terms-toc{position:static}}

/* studio.js: motion on a page that is complete without it. Every rule below waits for the script
   to put .motion on <html>, which it never does for someone who asks for reduced motion, and the
   print rules at the end put back whatever the script had not shown yet. Reveals use the translate
   property, so a card's tilt can keep transform to itself; the tilt applies only under the
   pointer, so a card at rest is not given a layer of its own. */
.motion .reveal{opacity:0;translate:0 18px;transition:opacity .6s ease var(--reveal-delay,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.motion .reveal.is-in{opacity:1;translate:none}
.motion .tilt{position:relative;transition:transform .25s ease,border-color .25s ease,opacity .6s ease var(--reveal-delay,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.motion .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(420px circle at var(--glare-x,50%) var(--glare-y,50%),rgba(95,232,61,.11),transparent 46%)}
.motion .tilt:hover{border-color:rgba(95,232,61,.34);transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.motion .tilt:hover::after{opacity:1}
.motion .page-hero{position:relative}
.hero-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;background:radial-gradient(540px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(95,232,61,.12),transparent 62%)}
.hero-spot.is-on{opacity:1}
.motion .hero>:not(.hero-spot),.motion .page-hero>:not(.hero-spot){position:relative;z-index:1}
.motion .banner-terminal code.typing span{min-height:1.3em}
.motion .banner-terminal code span.caret::after{content:"\258C";margin-left:2px;color:var(--green);animation:studio-blink 1s steps(1) infinite}
.motion .board li b{position:relative;transition:color .3s ease,background-color .3s ease}
.motion .board li.is-pending b{color:transparent;background:rgba(255,255,255,.05)}
.motion .board li.is-pending b .ico{opacity:0}
.motion .board li.is-pending b::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid rgba(95,232,61,.25);border-top-color:var(--green);border-radius:50%;animation:studio-spin .7s linear infinite}
.motion .board li.is-done b{animation:studio-pop .45s cubic-bezier(.2,.9,.3,1.4)}
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:100;height:3px;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;background:linear-gradient(90deg,var(--green),var(--green-2));box-shadow:0 0 12px rgba(95,232,61,.55)}
.field-count{margin:6px 0 0;color:var(--dim);font:500 12px/1.3 ui-monospace,"Cascadia Code",Consolas,monospace;text-align:right}
.field-count.is-near{color:#ffbc3c}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes studio-blink{50%{opacity:0}}
@keyframes studio-pop{0%{transform:scale(.55)}100%{transform:none}}
@keyframes studio-spin{to{transform:rotate(360deg)}}
@media print{
  .motion .reveal{opacity:1;translate:none;transition:none}
  .motion .board li.is-pending b{color:var(--green-2);background:rgba(95,232,61,.14)}
  .motion .board li.is-pending b .ico{opacity:1}
  .motion .board li.is-pending b::after{content:none}
  .stat-count{display:none}
  .stat-count+.visually-hidden{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  .scroll-progress,.hero-spot{display:none}
}