/* Lyra. Dark palette; the accent is the blue-white of Vega, the brightest star of the constellation Lyra. */
/* Inter (SIL OFL 1.1), weight and optical-size axes, cut by tools/fonts.py to the characters the site uses */
@font-face{font-family:"Inter";src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(../fonts/inter-greek.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Inter";src:url(../fonts/inter-cyrillic.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* "Inter Sky" is Inter without its Greek file, for the star labels of the hero ("ε Lyrae"): their Greek
   letter comes from the system font, so a page in another script never fetches the Greek file for three
   letters. Greek pages use Inter itself (see .sky .lb). The files are the ones above: no extra download. */
@font-face{font-family:"Inter Sky";src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Inter Sky";src:url(../fonts/inter-cyrillic.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0400-045F}

:root{
 --bg:#05060d;--bg2:#080a17;--card:#0c1020;--card2:#10152a;
 --ink:#eef2ff;--soft:#c5cde2;--dim:#939dba;
 --ac:#9cc2ff;--ac2:#d9cbff;--ac-ink:#05060d;--gold:#ffd27a;--ok:#7be0b5;
 --rule:#ffffff16;--rule2:#ffffff26;
 --fh:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --fb:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --fm:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --fsys:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
 --gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));
 --r-lg:20px;--r:16px;--r-md:12px;--r-sm:8px;--max:73.75rem;--ease:cubic-bezier(.2,.7,.2,1);
 color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--soft);font:400 1.0625rem/1.65 var(--fb);font-optical-sizing:auto;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--ac) 55%,transparent);text-underline-offset:.2em}
a:hover{color:var(--ac)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
::selection{background:#9cc2ff55;color:#fff}
h1,h2,h3,h4{color:var(--ink);font-family:var(--fh);font-weight:650;line-height:1.1;letter-spacing:-.025em;margin:0;text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
/* long compound words (Datenschutzhinweis, Unternehmenswebsites) break with a hyphen, never off-screen */
html:not([lang=en]) :is(h1,h2,h3,h4){hyphens:auto;hyphenate-limit-chars:10 4 4}
h1 em,h2 em{font-style:normal;color:var(--ac)}
@supports (background-clip:text) or (-webkit-background-clip:text){
 h1 em,h2 em{background:linear-gradient(100deg,var(--ac) 10%,var(--ac2) 55%,var(--ac) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite}
}
@keyframes sheen{50%{background-position:100% 0}}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
@media (min-width:720px){.wrap{padding-left:max(32px,var(--gut));padding-right:max(32px,var(--gutr))}}
.ic{width:1em;height:1em;flex:none}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ac);color:var(--ac-ink);padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:20;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.lite .top.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 96%,transparent)}
.top.scrolled,html:not(.js) .top{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--rule)}
main,.page{padding-top:0}
.bar{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:inline-flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;color:var(--ink);font:700 1.3rem/1 var(--fh);letter-spacing:-.03em;margin-right:auto}
.logo svg{width:26px;height:26px;fill:var(--ac);filter:drop-shadow(0 0 8px #9cc2ff88)}
.logo:hover{color:var(--ink)}
.nav{display:flex;gap:2px}
.nav a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--soft);font-size:.95rem;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--rule)}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 -1px var(--ac)}
details.lang,details.mnav{position:relative}
.lang summary,.mnav summary{list-style:none;cursor:pointer;min-width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--rule2);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:var(--ink);font:500 .82rem var(--fm);letter-spacing:.06em;background:#ffffff08}
.lang summary::-webkit-details-marker,.mnav summary::-webkit-details-marker{display:none}
.lang summary:hover,.mnav summary:hover{border-color:var(--ac)}
.lang ul,.mnav nav{position:absolute;right:0;top:54px;z-index:5;background:var(--card);border:1px solid var(--rule2);border-radius:var(--r-md);padding:6px;box-shadow:0 24px 60px #000c;min-width:180px}
.lang a,.mnav nav a{display:block;padding:11px 16px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.lang a:hover,.mnav nav a:hover{background:var(--rule)}
.lang a[aria-current]{color:var(--ac)}
.lang ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;min-width:300px;max-height:min(70vh,560px);overflow:auto;overscroll-behavior:contain}
.lang a{padding:9px 12px;white-space:nowrap}
/* on a narrow phone the list would start left of the screen: it opens under the menu button instead */
@media (max-width:420px){.lang ul{right:-60px}}
/* language names in the menu and footer use system fonts, so a page never loads another script's font */
.lang ul a,.nflangs a{font-family:var(--fsys)}
.mnav{display:none}
.mnav summary{flex-direction:column;gap:5px;padding:0}
.mnav summary span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s}
.mnav[open] summary span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mnav[open] summary span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mnav nav{width:min(280px,calc(100vw - 32px))}
@media (max-width:1060px){.dnav{display:none}.mnav{display:block}}
@media (max-width:560px){.bar .hcta{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid #fff;background:#fff;color:var(--ac-ink);font:600 1rem/1.2 var(--fb);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .3s;box-shadow:0 0 0 0 #9cc2ff00}
.btn:hover{background:#dbe8ff;border-color:#dbe8ff;color:var(--ac-ink);box-shadow:0 10px 40px -8px #9cc2ffaa}
.btn:active{transform:translateY(1px)}
.btn .ic{transition:transform .2s}
.btn:hover .ic{transform:translateX(3px)}
.btn-g{background:#ffffff08;color:var(--ink);border-color:var(--rule2)}
.btn-g:hover{background:var(--rule);border-color:var(--ac);color:var(--ink);box-shadow:none}
.btn-s{min-height:44px;padding:8px 16px;font-size:.92rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:112px 0 72px;overflow:hidden;isolation:isolate;min-height:min(100svh,940px);display:flex;align-items:center;background:radial-gradient(70% 60% at 75% 40%,#1a2350 0%,transparent 70%),var(--bg)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--bg));z-index:-1;pointer-events:none}
.hero>.wrap{width:100%}
.gl-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero.gl .sky{visibility:hidden}
.hero.gl{background:var(--bg)}
.gl-labels{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gl-labels span{position:absolute;left:0;top:0;font:400 12px "Inter Sky",var(--fsys);letter-spacing:.06em;color:#aab4cf;white-space:nowrap;margin:-8px 0 0 14px;opacity:0;transition:opacity 1.2s}
.gl-labels span.l{margin-left:0;translate:calc(-100% - 14px) 0}
.gl-labels span.vega{margin-left:22px;color:var(--soft)}
.gl-labels.on span{opacity:1}
:lang(el) .sky .lb,:lang(el) .gl-labels span{font-family:var(--fm)}
.hgrid{display:grid;gap:8px;align-items:center}
.eyebrow{font:600 .78rem/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ac);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac);flex:none}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.6rem);font-weight:700;letter-spacing:-.045em;line-height:1.02;text-shadow:0 2px 30px #05060dcc}
@media (min-width:720px){html:not([lang=en]) .hero h1{hyphens:manual}}
:is(:lang(el),:lang(bg)) :is(h1,h2){letter-spacing:-.025em}
.hero h1 em{text-shadow:none;filter:drop-shadow(0 0 24px #9cc2ff40)}
.hp{margin-top:22px;max-width:36em;font-size:clamp(1.06rem,1.6vw,1.2rem);color:var(--soft);text-shadow:0 1px 16px #05060d}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.points{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px 28px;margin-top:34px;color:var(--soft);font-size:.98rem}
.points li,.ticks li{display:flex;gap:10px;align-items:flex-start}
/* tick before a list item: a corner drawn with two borders and turned 45 degrees, so no icon is repeated in the page */
.points li::before,.ticks li::before,.strip li::before{content:"";flex:none;width:.27em;height:.56em;margin:.445em .365em 0;border:solid var(--ac);border-width:0 .11em .11em 0;transform:rotate(45deg)}
/* Short screens (a 1366 by 768 laptop, a phone with its browser bars showing): the hero's type and spacing follow
   the height of the screen, so the buttons and the promises under them fit the first screen. --t runs from 0 at
   620 px of height to 180 at 800 px, where every value here equals the fixed one above. svh is the height with
   the browser's bars showing, so nothing moves when they slide away. */
@supports (height:1svh){
 .hero{--t:clamp(0px,100svh - 620px,180px);padding:calc(92px + var(--t)/9) 0 calc(40px + var(--t)*8/45)}
 .hero h1{font-size:clamp(2.3rem,min(6.4vw,9.2svh),4.6rem)}
 .hero .eyebrow{margin-bottom:calc(12px + var(--t)/30)}
 .hp{margin-top:calc(14px + var(--t)*2/45)}
 .ctas{margin-top:calc(20px + var(--t)/15)}
 .points{margin-top:calc(18px + var(--t)*4/45)}
}
.hart{position:relative;order:-1;margin:-12px auto -8px;width:min(100%,330px);aspect-ratio:634/640}
.hart .sky{width:100%;height:100%}
@media (min-width:960px){
 .hgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px}
 .hart{order:0;margin:0 auto;width:100%;max-width:29.4rem}
}
/* phones and tablets: the headline comes first; the constellation sits behind it, top right */
@media (max-width:959px){.hero{padding:120px 0 64px;min-height:0}@supports (height:1svh){.hero{padding-top:calc(92px + var(--t)*7/45)}}.hart{position:absolute;order:0;top:64px;right:0;width:min(78vw,340px);margin:0;z-index:-1;opacity:.55;pointer-events:none}.hero .htext{position:relative}.hart .lb,.gl-labels{display:none}}
/* phones held sideways (short screens): a compact hero, so the buttons are on the first screen */
@media (max-height:500px) and (orientation:landscape){.hero{padding:84px 0 32px;min-height:0}.hero h1{font-size:clamp(2rem,4.6vw,2.6rem)}.hero .eyebrow{margin-bottom:12px}.hp{margin-top:12px;font-size:1rem}.ctas{margin-top:16px}.points{margin-top:16px;flex-direction:row}}
.htext{min-width:0}
.htext>*{animation:rise .9s var(--ease) both}
.htext>:nth-child(2){animation-delay:.08s}.htext>:nth-child(3){animation-delay:.16s}.htext>:nth-child(4){animation-delay:.24s}.htext>:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* SVG constellation, shown without WebGL 2 */
.sky{overflow:visible}
.sky .field path{fill:none;stroke:#cdd8ff;stroke-linecap:round}
.sky .ln{stroke:var(--ac);stroke-opacity:.5;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.6,0,.2,1) .3s forwards}
.sky .st{fill:#eaf1ff}
.sky .st.vega{fill:#fff}
.sky .halo{fill:url(#vg);animation:pulse 6s ease-in-out infinite}
.sky .halo2{fill:#cfe0ff;opacity:.18}
.sky .lb{fill:var(--dim);font:400 16px "Inter Sky",var(--fsys);letter-spacing:.03em}
.sky .tw{animation:tw 4s ease-in-out infinite}
.sky .tw1{animation-delay:-1s}.sky .tw2{animation-delay:-2.2s}.sky .tw3{animation-delay:-3.1s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{50%{opacity:.7}}
@keyframes tw{50%{opacity:.08}}

/* ---------- sections ---------- */
.sec{position:relative;padding:88px 0;border-top:1px solid var(--rule)}
/* Sections are laid out and painted only when they come near the screen, which takes more than half
   of the work out of the first render on a slow phone. A section's height is an estimate until it has
   been laid out once; then the browser remembers it ("auto"). main.js lays each one out once in idle
   time (.cv-on), and before an early jump from the menu (.cv-all), so in-page links land exactly. */
.sec{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.sec.cv-on,.cv-all .sec{content-visibility:visible}
.sec.alt{background:var(--bg2)}
@media (min-width:900px){.sec{padding:120px 0}}
.sh{max-width:46em;margin-bottom:48px}
.sh h2{font-size:clamp(1.8rem,4.4vw,3rem)}
.lede{margin-top:18px;font-size:1.12rem;color:var(--soft)}
.gname{display:flex;align-items:baseline;gap:16px;font-size:1.05rem;margin:52px 0 18px;color:var(--ink);font-family:var(--fb);font-weight:700;letter-spacing:0}
.gname:first-of-type{margin-top:0}
.gname span{font:500 .8rem var(--fm);color:var(--ac);letter-spacing:.1em}

/* reveal on scroll (only when the script runs and motion is welcome) */
.reveal [data-r]{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reveal [data-r].in{opacity:1;transform:none}
.reveal .cards>[data-r]:nth-child(2),.reveal .work>[data-r]:nth-child(2){transition-delay:.05s}
.reveal .cards>[data-r]:nth-child(3){transition-delay:.1s}
.reveal .cards>[data-r]:nth-child(4){transition-delay:.15s}

/* cards with a spotlight that follows the pointer */
.cards{display:grid;gap:16px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
/* two columns: a last card on its own takes the full row */
@media (min-width:640px) and (max-width:999px){.cards>li:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
@media (min-width:1360px){.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}
.card{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--rule);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;gap:16px;transition:border-color .3s,transform .4s var(--ease),opacity .45s var(--ease)}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0),#9cc2ff1c,transparent 45%)}
.spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0),#9cc2ffaa,transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::before,.spot:hover::after{opacity:1}
.card:hover{transform:translateY(-3px)}
.card h4{font-size:1.08rem;line-height:1.25;letter-spacing:-.01em}
.card p{font-size:.98rem}
.ticks{display:grid;gap:8px;margin-top:auto;padding-top:6px;font-size:.92rem;color:var(--soft)}

/* ---------- demo ---------- */
.demo-sec{background:radial-gradient(60% 50% at 50% 0%,#1a2452 0%,transparent 70%),var(--bg)}
.demo{border:1px solid var(--rule2);border-radius:var(--r-lg);background:linear-gradient(180deg,#0e1328,#0a0d1c);padding:10px;box-shadow:0 40px 120px -40px #3d5bff55}
.tabs{display:none;flex-wrap:wrap;gap:6px;padding:4px;border-radius:var(--r-md);background:#ffffff08}
.tabbed .tabs{display:flex}
.tabs button{flex:1 0 auto;min-height:44px;padding:10px 16px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--soft);font:500 .95rem var(--fb);cursor:pointer;transition:background .2s,color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule2)}
.panel{padding:28px 16px 8px}
@media (min-width:720px){.panel{padding:36px 32px 12px}}
.tabbed .ptitle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ptitle{font-size:1.1rem;margin-bottom:18px}
.stage{min-height:260px;display:grid;align-items:center}
.cap{margin-top:22px;color:var(--soft);font-size:1rem;max-width:44em}
.dfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px 10px;border-top:1px solid var(--rule);margin-top:18px}
@media (min-width:720px){.dfoot{padding:16px 32px 12px}}
.note{font:400 .8rem var(--fm);color:var(--dim);letter-spacing:.02em}
.replay{display:none;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid var(--rule2);background:transparent;color:var(--ink);font:500 .9rem var(--fb);cursor:pointer}
.tabbed .replay{display:inline-flex}
.replay:hover{border-color:var(--ac)}

.mock{background:#0b0f20;border:1px solid var(--rule2);border-radius:var(--r-md);overflow:hidden;font-size:.9rem}
.mbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--rule);background:#ffffff06}
.mbar i{width:8px;height:8px;border-radius:50%;background:#ffffff22}
.mbar b{margin-left:8px;font:500 .75rem var(--fm);color:var(--dim)}
.d1{display:grid;gap:16px;align-items:center}
@media (min-width:820px){.d1{grid-template-columns:1fr 90px 1.35fr}}
.form{padding-bottom:14px}
.form .ml{padding:12px 16px 4px;color:var(--dim);font-size:.8rem}
.form .mi{margin:0 14px;padding:8px 10px;border:1px solid var(--rule2);border-radius:8px;min-height:36px;color:var(--ink);white-space:nowrap;overflow:hidden}
.form .mi.tall{min-height:56px;white-space:normal}
.form .mbtn{margin:14px 14px 0;display:inline-block;padding:7px 16px;border-radius:999px;background:var(--ac);color:var(--ac-ink);font-weight:700;font-size:.85rem}
.flow{width:100%;height:40px;overflow:visible}
.flow path{fill:none;stroke:var(--rule2);stroke-width:1.2;stroke-dasharray:3 4}
.flow circle{fill:var(--ac);filter:drop-shadow(0 0 6px var(--ac))}
@media (max-width:819px){.flow{height:34px;transform:rotate(90deg);width:60px;justify-self:center}}
.sheet{position:relative}
.sheet table{width:100%;border-collapse:collapse;font-size:.85rem;table-layout:fixed}
.sheet th,.sheet td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet th{font:500 .72rem var(--fm);color:var(--dim);letter-spacing:.03em;text-transform:uppercase}
.sheet th:first-child,.sheet td:first-child{width:84px}
.sheet th:nth-child(2),.sheet td:nth-child(2){width:84px}
.sheet .old td{color:var(--dim)}
.sheet .new td{color:var(--ink);background:#9cc2ff14}
.toast{position:absolute;right:10px;bottom:10px;left:auto;max-width:calc(100% - 20px);display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);background:var(--card2);border:1px solid var(--ac);box-shadow:0 12px 30px #000a}
.toast .ic{color:var(--ac);width:18px;height:18px;margin-top:2px}
.toast strong{display:block;color:var(--ink);font-size:.85rem}
.toast span{display:block;color:var(--soft);font-size:.8rem}
.sheet{padding-bottom:78px}
.run .type{display:inline-block;animation:type .7s steps(14,end) .2s both;overflow:hidden;vertical-align:bottom;white-space:nowrap;max-width:100%}
/* the message field keeps its lines (a nowrap typing line would cut a long message off) */
.run .type.t2{display:inline;white-space:normal;animation:fadein .6s .9s both}
.run .mbtn{animation:press .4s 1.7s both}
.run .new{animation:rowin .6s var(--ease) 3.2s both}
.run .toast{animation:toast .7s var(--ease) 3.8s both}
@keyframes type{from{width:0}to{width:100%}}
@keyframes fadein{from{opacity:0}}
@keyframes press{50%{transform:scale(.92);filter:brightness(1.3)}}
@keyframes rowin{from{opacity:0;transform:translateY(-6px);background:#9cc2ff55}}
@keyframes toast{from{opacity:0;transform:translateY(12px) scale(.96)}}

.tl{position:relative;display:grid;gap:12px;padding-left:28px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--ac),var(--ac2));transform-origin:top}
.tl li{position:relative;display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:baseline;padding:12px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:#0b0f20}
.tl li::before{content:"";position:absolute;left:-25px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--ac)}
.tl time{font:500 .8rem var(--fm);color:var(--ac);letter-spacing:.04em}
.tl span{color:var(--ink)}
.leads li:last-child{border-color:#7be0b566}
.leads li:last-child::before{border-color:var(--ok);background:var(--ok)}
.leads li:last-child time{color:var(--ok)}
.run .tl::before{animation:grow 3.4s var(--ease) both}
.run .tl li{animation:stepin .6s var(--ease) both}
.run .tl li:nth-child(1){animation-delay:.2s}.run .tl li:nth-child(2){animation-delay:.9s}.run .tl li:nth-child(3){animation-delay:1.6s}.run .tl li:nth-child(4){animation-delay:2.3s}.run .tl li:nth-child(5){animation-delay:3s}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes stepin{from{opacity:0;transform:translateX(-10px)}}
@media (max-width:520px){.tl li{grid-template-columns:1fr;gap:2px}}
.d3{display:grid;gap:20px;align-items:center}
@media (min-width:820px){.d3{grid-template-columns:240px 1fr;gap:36px}}
.appt{padding:20px;border-radius:var(--r-md);border:1px solid var(--rule2);background:linear-gradient(160deg,#16204a,#0b0f20)}
.cal{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cal b{font:600 1.2rem var(--fh);color:var(--ink)}
.cal span{font:500 1.9rem/1.1 var(--fh);color:var(--ac)}
.appt p{color:var(--soft);font-size:.92rem}
.run .appt{animation:fadein .6s both}

/* ---------- process ---------- */
.steps{position:relative;display:grid;gap:16px}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){
 .steps{grid-template-columns:repeat(5,1fr)}
 .steps::before{content:"";position:absolute;left:44px;right:44px;top:45px;height:1px;background:linear-gradient(90deg,var(--ac),var(--ac2),var(--ac));opacity:.45;z-index:0}
}
.steps li{position:relative;padding:24px 24px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg)}
.num{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--ac);color:var(--ac);background:var(--bg);font:600 1rem var(--fh);margin-bottom:18px;box-shadow:0 0 22px -4px #9cc2ff66}
.steps h3{font-size:1.02rem;margin-bottom:8px;letter-spacing:-.01em}
.steps p{font-size:.95rem}
.promises{margin-top:56px;padding-top:40px;border-top:1px solid var(--rule)}
.promises h3{font-size:1.05rem;font-family:var(--fb);font-weight:700;letter-spacing:0;margin-bottom:20px}
.promises dl{display:grid;gap:24px}
@media (min-width:700px){.promises dl{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.promises dl{grid-template-columns:repeat(4,1fr)}}
.promises dt{color:var(--ink);font-weight:700;margin-bottom:6px}
.promises dd{font-size:.95rem}

/* ---------- projects and ideas (the gallery itself is styled at the end) ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font:400 .78rem var(--fm);color:var(--soft);border:1px solid var(--rule2);border-radius:999px;padding:4px 10px}

/* ---------- about ---------- */
.agrid{display:grid;gap:40px}
@media (min-width:900px){.agrid{grid-template-columns:1.4fr 1fr;gap:72px;align-items:start}}
.agrid .sh{margin-bottom:24px}
.ap{margin-bottom:16px;max-width:38em;font-size:1.06rem}
.facts{display:grid;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg);overflow:hidden}
.facts div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:16px;padding:20px 24px;border-top:1px solid var(--rule)}
.facts div:first-child{border-top:0}
.facts dt{font:500 .78rem/1.9 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.facts dd{color:var(--ink)}
.facts dt,.facts dd,.iwho{overflow-wrap:anywhere}
@media (max-width:480px){.facts div{grid-template-columns:minmax(0,1fr);gap:2px}}
.strip{margin-top:64px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:24px 28px;border:1px solid var(--rule2);border-radius:var(--r);background:linear-gradient(90deg,#9cc2ff0d,#c9b6ff0d)}
.strip p{color:var(--ink);font-weight:700}
.strip ul{display:flex;flex-wrap:wrap;gap:10px 24px}
.strip li{display:flex;gap:8px;align-items:center;font-size:.95rem}
.strip li::before{margin-top:-.19em}

/* ---------- faq ---------- */
.fqgrid{display:grid;gap:8px}
@media (min-width:900px){.fqgrid{grid-template-columns:1fr 1.5fr;gap:72px;align-items:start}.fqgrid .sh{position:sticky;top:110px}}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;color:var(--ink);font-weight:500;font-size:1.06rem}
.faq summary::-webkit-details-marker,.opt summary::-webkit-details-marker{display:none}
.faq summary::after,.opt summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after,.opt[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.faq details p{padding:0 0 24px;max-width:40em}
.faq details[open] p{animation:fadein .4s both}

/* ---------- start ---------- */
.start{background:radial-gradient(120% 80% at 0% 0%,#1a2a5a40,transparent 60%),var(--bg2)}
/* Heading, then the form, then what happens next: on a phone the first field is on screen after a tap on
   any button that leads here. On a wide screen the form takes the right column beside the other two. */
.sgrid{display:grid;gap:40px}
.sgrid>.sh{margin-bottom:0}
@media (max-width:599px){.sgrid{gap:28px}}
@media (min-width:1000px){.sgrid{grid-template:"head form" auto "aft form" 1fr/1fr 1.25fr;gap:48px 72px;align-items:start}.sgrid>.sh{grid-area:head}.brief{grid-area:form}.aft{grid-area:aft}}
.direct{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:var(--dim);font-size:.95rem}
.direct a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500}
.pending{color:var(--gold)}
.brief{display:grid;gap:20px;padding:28px 24px;background:var(--card);border:1px solid var(--rule2);border-radius:var(--r-lg);box-shadow:0 40px 120px -50px #3d5bff66}
@media (min-width:640px){.brief{grid-template-columns:1fr 1fr;padding:36px 32px}.brief .wide{grid-column:1/-1}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.opt{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.opt summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:52px;color:var(--ink);font-weight:500;font-size:.95rem}
.optg{display:grid;gap:20px;padding:8px 0 24px}
@media (min-width:640px){.optg{grid-template-columns:1fr 1fr}}
.ctac{margin:32px 0 0;text-align:center}
/* side by side, a field with a hint and one without keep their boxes level */
.fld>:is(input,select){margin-top:auto}
.fld label{color:var(--ink);font-weight:500;font-size:.95rem}
.req{color:var(--ac)}
.hint{color:var(--dim);font-size:.85rem;margin-top:-4px}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--rule2);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#ffffff40}
.fld textarea{resize:vertical;min-height:120px}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ac) 50%),linear-gradient(135deg,var(--ac) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent;box-shadow:0 0 0 6px #9cc2ff1a}
.fld [aria-invalid="true"]{border-color:#ff8a8a}
.err{color:#ffabab;font-size:.9rem}
.send{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.send .btn{flex:1 1 220px}
/* without JavaScript the form opens the visitor's e-mail app; only the script can write to WhatsApp */
html:not(.js) .send [data-via=wa]{display:none}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:56px 0 32px;background:var(--bg)}
.fgrid{display:grid;gap:28px}
@media (min-width:800px){.fgrid{grid-template-columns:1fr auto;align-items:start}}
.fgrid p{margin-top:12px;color:var(--dim);font-size:.95rem;max-width:30em}
.flinks{display:flex;flex-wrap:wrap;gap:10px 24px}
.flinks a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--soft);text-decoration:none}
.flinks a:hover{color:var(--ac)}
.fine{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);color:var(--dim);font-size:.85rem;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

/* ---------- inner pages ---------- */
.page{padding:132px 0 96px}
.narrow{max-width:760px}
.page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:12px}
.page h2{font-size:1.2rem;margin:36px 0 10px;font-family:var(--fb);font-weight:700;letter-spacing:0}
.page p{margin-bottom:12px}
.muted{color:var(--dim)}
.nf{min-height:70vh;display:grid;align-items:center}
.nf .btn{margin-top:20px}
.nflangs{margin-top:28px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.9rem}
.nflangs a{color:var(--dim)}

/* Smooth in-page jumps start once the page has loaded (main.js adds .ready), so a link that opens the
   page at a section lands there at once, before the sections below the screen are measured. */
@media (prefers-reduced-motion:no-preference){html.ready{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .sky .ln{stroke-dashoffset:0}
 .flow circle{display:none}
}
/* ---------- conversion: hero badge, proof bar, guarantee, phone call-to-action ---------- */
.hero .eyebrow{display:inline-flex;padding:7px 16px 7px 12px;border:1px solid var(--rule2);border-radius:999px;background:#0b1024b3;color:var(--ink);letter-spacing:.06em}
.proof{position:relative;border-block:1px solid var(--rule);background:linear-gradient(180deg,#0a0e1f,var(--bg))}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid li{display:flex;flex-direction:column;gap:6px;padding:28px 20px;border-left:1px solid var(--rule)}
.pgrid li:nth-child(odd){border-left:0;padding-left:0}
.pgrid li:nth-child(n+3){border-top:1px solid var(--rule)}
.pgrid b{font:700 clamp(1.9rem,4vw,2.6rem)/1 var(--fh);letter-spacing:-.04em;color:var(--ink);background:linear-gradient(180deg,#fff 30%,var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent}
.pgrid span{font-size:.92rem;line-height:1.45;color:var(--dim);hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word}
.pgrid li{min-width:0}
.pgrid span::first-letter{text-transform:uppercase}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.pgrid li{padding:36px 28px}.pgrid li:nth-child(odd){border-left:1px solid var(--rule);padding-left:28px}.pgrid li:first-child{border-left:0;padding-left:0}.pgrid li:nth-child(n+3){border-top:0}}
.sec.guar{border-top:0;padding-top:24px;background:linear-gradient(var(--bg2),var(--bg) 60%)}
.gcard{position:relative;display:grid;gap:24px;padding:36px 28px;border-radius:var(--r-lg);border:1px solid #9cc2ff40;background:radial-gradient(120% 140% at 0% 0%,#1b2a5c 0%,#0d1330 45%,#0a0e1f 100%);overflow:hidden;isolation:isolate}
.gcard::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(60% 80% at 100% 100%,#d9cbff1f,transparent 70%);z-index:-1}
.gcard .shield{width:52px;height:52px;color:var(--ac);filter:drop-shadow(0 0 18px #9cc2ff66)}
.gcard h2{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.035em}
.gcard .gtext>p:last-child{margin-top:14px;max-width:44em;color:var(--soft)}
.gcard .eyebrow{margin-bottom:12px}
.gcard .btn{justify-self:start}
@media (min-width:900px){.gcard{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:36px;padding:44px 48px}.gcard .btn{align-self:center}}
.stick{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;padding:28px 12px max(12px,env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#05060d00,#05060de0 48%);pointer-events:none;transform:translateY(110%);transition:transform .35s var(--ease)}
.stick a{pointer-events:auto;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:#fff;color:var(--ac-ink);font-weight:600;text-decoration:none;box-shadow:0 12px 40px -6px #000d,0 0 0 1px #ffffff40}
.stick.on{transform:none}
html:has(.mnav[open]) .stick{transform:translateY(110%)}
/* The bar covers the bottom of a phone's screen, so a control reached by keyboard must come to rest above it. */
@media (max-width:720px){.js .stick{display:flex}html.js{scroll-padding-bottom:calc(80px + max(12px,env(safe-area-inset-bottom,0px)))}}

/* review pass: tighter rhythm on phones, full-width hero actions, no orphan step, what happens after the brief */
@media (max-width:599px){.sec{padding:56px 0}.sh{margin-bottom:28px}.card{padding:20px;gap:12px}.ticks{gap:6px}.cards,.ideas{gap:12px}.card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}.card>:not(.sicw,h4){grid-column:1/-1}.gname{margin-top:32px}.steps{gap:12px}}
@media (max-width:480px){.hero .ctas .btn{flex:1 1 100%;justify-content:center}}
@media (min-width:700px) and (max-width:1099px){.steps li:last-child:nth-child(odd){grid-column:1/-1}}
.next{padding-top:28px;border-top:1px solid var(--rule)}
@media (max-width:999px){.next{padding-top:0;border-top:0}}
.next h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:18px}
.next ol{display:grid;gap:16px;margin:0 0 28px;padding:0;list-style:none}
.next li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start}
.nn{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #9cc2ff55;color:var(--ac);font:600 .85rem var(--fm);box-shadow:inset 0 0 16px #9cc2ff22}
.next p{margin:0;padding-top:5px;color:var(--soft)}
/* ---------- v5: service icons and buttons, tap-to-choose needs, time calculator, e-mail fallback ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sicw{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);color:var(--ac);background:linear-gradient(160deg,#1a2550,#0e1430);border:1px solid #9cc2ff33;box-shadow:inset 0 0 18px #9cc2ff14,0 0 26px -10px #9cc2ff88}
.sic{width:22px;height:22px}
.more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:2px;color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none}
.more .ic{color:var(--ac);transition:transform .2s}
.more:hover{color:var(--ac)}
.more:hover .ic{transform:translateX(3px)}
.need{display:block;border:0;margin:0;padding:0}
.need legend{padding:0;margin-bottom:10px;color:var(--ink);font-weight:500;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.cur label{position:relative;display:inline-flex}
.chip input,.cur input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--rule2);background:var(--bg);color:var(--soft);font-size:.92rem;line-height:1.3;transition:border-color .2s,background .2s,color .2s}
.chip:hover span{border-color:#ffffff45;color:var(--ink)}
.chip input:checked+span{background:#9cc2ff1f;border-color:var(--ac);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ac)}
.chip input:checked+span::before{content:"";flex:none;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.chip input:focus-visible+span,.cur input:focus-visible+span{outline:2px solid var(--ac);outline-offset:2px}

.calc-sec{background:radial-gradient(55% 60% at 90% 10%,#1a245244 0%,transparent 70%),var(--bg2)}
html:not(.js) .calc-sec{display:none}
.calc{display:grid;gap:20px}
@media (min-width:900px){.calc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}}
.cin,.cout{border:1px solid var(--rule2);border-radius:var(--r-lg);padding:28px 24px}
@media (min-width:640px){.cin,.cout{padding:36px 32px}}
.cin{display:flex;flex-direction:column;gap:28px;background:var(--card)}
.cin .cnote{margin-top:auto}
.cl{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px}
.cl label{color:var(--ink);font-weight:500;font-size:.98rem}
.cv{flex:none;font:650 1.2rem var(--fh);letter-spacing:-.01em;color:var(--ac);font-variant-numeric:tabular-nums}
.cf input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.cf input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ac),var(--ac2)) 0/var(--p,50%) 100% no-repeat,#ffffff1f}
.cf input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#ffffff1f}
.cf input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.cf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 5px #9cc2ff2e,0 4px 14px #000a;transition:box-shadow .2s}
.cf input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 5px #9cc2ff2e,0 4px 14px #000a}
.cf input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px #9cc2ff33,0 4px 14px #000a}
.cf input[type=range]:focus{outline:none}
.cf input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ac)}
.cf input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ac)}
.cur{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:0;margin:0;padding:0}
.cur legend{float:left;margin-right:8px;padding:0;color:var(--dim);font-size:.9rem}
.cur span{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid var(--rule2);color:var(--soft);font:600 .85rem var(--fm);letter-spacing:.05em;transition:background .2s,color .2s,border-color .2s}
.cur input:checked+span{background:#fff;border-color:#fff;color:var(--ac-ink)}
.cout{position:relative;display:flex;flex-direction:column;gap:24px;overflow:hidden;isolation:isolate;border-color:#9cc2ff40;background:radial-gradient(120% 120% at 100% 0%,#1b2a5c 0%,#0d1330 50%,#0a0e1f 100%)}
.cout dl{display:grid;gap:20px}
.cout dl div{display:flex;flex-direction:column-reverse;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.cout dd{font:700 clamp(2.1rem,5vw,3rem)/1 var(--fh);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cout dt{color:var(--soft);font-size:.95rem}
.cval dd{background:linear-gradient(100deg,#fff 15%,var(--ac) 60%,var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cout .btn{align-self:flex-start}
.cnote{color:var(--dim);font-size:.85rem}

.sent{display:grid;gap:10px;padding:20px;border:1px solid #9cc2ff55;border-radius:var(--r-md);background:#9cc2ff0d}
.sent:focus{outline:none}
.sent:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.sent-h{color:var(--ink);font-weight:700}
.sent-to b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.sent-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sent-ok{min-height:1.4em;color:var(--ok);font-size:.92rem}
.sent-ok:empty{display:none}
.sent-txt{width:100%;min-height:150px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--rule2);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem}

.stick{gap:10px}
.stick a.swa{flex:none;width:52px;padding:0;border-radius:50%;background:#0c1020;color:var(--ok);border:1px solid #7be0b566}
.stick a.swa .ic{width:24px;height:24px}

/* Guided brief (main.js): the form's questions one at a time in a dialog. Opened only by a click: the
   button at the bottom right on larger screens, the phone bar's main button on phones. */
.chat-go{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:30;display:none;align-items:center;gap:10px;min-height:48px;padding:12px 20px 12px 16px;border-radius:999px;border:1px solid #fff;background:#fff;color:var(--ac-ink);font:600 .95rem/1.2 var(--fb);cursor:pointer;box-shadow:0 12px 40px -6px #000d,0 0 0 1px #ffffff40;transition:transform .3s var(--ease),opacity .3s}
.chat-go svg{width:20px;height:20px;flex:none}
.chat-go:hover{background:#dbe8ff;border-color:#dbe8ff}
.chat-go.off{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
@media (min-width:721px){.chat-go{display:inline-flex}}
html.chat-on{overflow:hidden}
.chat{width:min(440px,calc(100vw - 32px));max-width:none;height:min(640px,calc(100dvh - 48px));max-height:none;margin:auto 24px 24px auto;padding:0;border:1px solid var(--rule2);border-radius:var(--r-lg);background:var(--bg2);color:var(--soft);box-shadow:0 30px 80px -20px #000}
.chat[open]{display:flex;flex-direction:column}
.chat::backdrop{background:#05060daa}
.chat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--rule)}
.chat-h{margin:0;color:var(--ink);font-weight:600;font-size:1rem}
.chat-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--soft);font:400 1.6rem/1 var(--fb);cursor:pointer}
.chat-x:hover{background:var(--rule);color:var(--ink)}
.chat-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:16px 16px 8px}
.cb{max-width:88%;margin:0;padding:10px 14px;border-radius:var(--r) var(--r) var(--r) 4px;background:var(--card2);color:var(--ink);font-size:.98rem;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;align-self:flex-start}
.cb.me{align-self:flex-end;border-radius:var(--r) var(--r) 4px var(--r);background:var(--ac);color:var(--ac-ink)}
.cb.err{background:none;border:1px solid #ff9d9d66;color:#ffc2c2}
.cb.brief-pre{max-width:100%;width:100%;font:inherit;font-size:.92rem;white-space:pre-wrap;border-radius:var(--r-md);border:1px solid var(--rule2);background:var(--card)}
.chat-in{padding:12px 16px max(16px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule)}
.chat-f{display:flex;flex-wrap:wrap;gap:8px}
.chat-f :is(input,textarea){flex:1 1 100%;min-height:48px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--rule2);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;resize:none}
.chat-f :is(input,textarea):focus{border-color:var(--ac);outline:none;box-shadow:0 0 0 3px #9cc2ff44}
.chat-f .btn{flex:1 1 120px}
.chat-opts{display:flex;flex-wrap:wrap;gap:8px}
.chip-b{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--rule2);background:#ffffff08;color:var(--ink);font:500 .95rem/1.3 var(--fb);text-align:left;cursor:pointer}
.chip-b:hover{border-color:var(--ac);background:var(--rule)}
.chat-send{display:grid;gap:8px}
@media (max-width:720px){.chat{width:100vw;height:100dvh;margin:0;border:0;border-radius:0}}
@media (prefers-reduced-motion:no-preference){.chat[open]{animation:chat-in .3s var(--ease)}.cb{animation:chat-in .25s var(--ease)}}
@keyframes chat-in{from{opacity:0;transform:translateY(8px)}}
@media print{.chat-go,.chat{display:none!important}}

/* large screens: the whole page scales up a little, so it is not a narrow column on a wide monitor */
@media (min-width:1680px){html{font-size:106.25%}}
@media (min-width:2200px){html{font-size:118.75%}}
/* Paper (or "save as PDF", for a buyer who passes the offer on): dark text on white, every section
   shown whatever has been scrolled, FAQ answers open where the browser allows it, no glow or motion. */
@media print{
 :root{--bg:#fff;--bg2:#fff;--card:#fff;--card2:#fff;--ink:#000;--soft:#1c2333;--dim:#454e63;--ac:#1d4ed8;--ac2:#5b3fd1;--rule:#0000001f;--rule2:#00000033}
 .calc-sec,.demo-sec,.more,.stick,.top,.mnav,.brief,.hart,.gl-sky,.gl-labels{display:none}
 body{background:#fff;color:#000}
 .sec{content-visibility:visible;padding:32px 0}
 .hero{min-height:0;padding:0 0 24px}
 .reveal [data-r]{opacity:1;transform:none}
 *,*::before,*::after{text-shadow:none!important;box-shadow:none!important;filter:none!important;animation:none!important;transition:none!important}
 h1 em,h2 em,.pgrid b,.cval dd{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
 .card,.idea,.gcard,.steps li,.faq details,.next li{break-inside:avoid}
}
@media print{details::details-content{content-visibility:visible;display:block}}
/* Ideas gallery: what people ask for, real projects and labelled illustrations */
.cards:has(> :nth-child(2):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ideas{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.idea{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:0 20px 20px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:border-color .3s,transform .4s var(--ease),opacity .45s var(--ease)}
.idea:hover{transform:translateY(-3px);border-color:var(--rule2)}
.ishot{position:relative;margin:0 -20px 6px;aspect-ratio:16/10;background:#0b0f1f;border-bottom:1px solid var(--rule);overflow:hidden}
.ishot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform 1.2s var(--ease)}
.idea:hover .ishot img{transform:scale(1.04)}
.badge{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;font:600 .72rem/1.3 var(--fm);letter-spacing:.02em;color:var(--soft);background:#05060dcc;border:1px solid var(--rule2)}
.iwho{font:600 .74rem/1.35 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.idea h3{font-size:1.08rem;line-height:1.25;letter-spacing:-.01em}
.idea>p:not(.iwho):not(.tags){font-size:.95rem;flex:1}
.idea .tags{gap:6px}.idea .tags span{font-size:.72rem;padding:3px 9px}
@media (prefers-reduced-motion:reduce){.idea,.ishot img{transition:none}}

/* Comparison table: Lyra's column is lit; no inner scrolling at any width. On phones each row becomes its label over four marks;
   the words stay for screen readers (font-size 0, not hidden) */
.cmpw{overflow:hidden;border:1px solid var(--rule2);border-radius:var(--r);background:var(--card)}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp th,.cmp td{padding:16px 16px;text-align:center;border-top:1px solid var(--rule)}
.cmp thead th,.cmp thead td{border-top:0;color:var(--ink);font-weight:600;font-size:.9rem}
.cmp tbody th{text-align:left;font-weight:500;color:var(--soft);width:34%}
.cmp td{color:var(--dim);white-space:nowrap}
.cmp tbody td::before{content:"–";display:inline-block;width:1.2em;margin-right:.2em;font-weight:700}
.cmp td.y::before{content:"";width:.34em;height:.68em;margin:0 .6em .12em .3em;border:solid var(--ok);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cmp td.n::before{content:"×";color:#ff9d9d;font-size:1.15em}
.cmp :is(th,td):nth-child(2){background:#9cc2ff14;color:var(--ink)}
.cmp thead th:nth-child(2){color:var(--ac)}
@media (max-width:719px){
 .cmp{min-width:0;font-size:.9rem}
 .cmp tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 .cmp thead td{display:none}
 .cmp thead th{padding:12px 2px;font-size:.72rem;line-height:1.3;white-space:normal;align-self:center;overflow-wrap:break-word;hyphens:auto}
 .cmp tbody th{grid-column:1/-1;width:auto;padding:16px 16px 4px;border-top:1px solid var(--rule)}
 .cmp tbody td{font-size:0;border-top:0;padding:6px 0 16px}
 .cmp tbody td{line-height:1.6rem}
 .cmp tbody td::before{font-size:1.1rem;margin:0;vertical-align:middle}
 .cmp tbody td.n::before{font-size:1.3rem}
 .cmp tbody td.y::before{margin:0 0 .3em}
}
/* Public profiles (LYRA_PROFILES), under the footer links */
.fprof{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none;font-size:.92rem}
.fprof a{color:var(--dim);text-decoration:none;padding:4px 0}
.fprof a:hover{color:var(--ac)}

/* fixed packages: a price line under the name, delivery and rounds as small labels */
.pack h3{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
.pprice{color:var(--soft);font-size:.95rem!important}
.pprice b{display:inline-block;margin-left:.2em;font:600 1.9rem/1.1 var(--fb);color:var(--ink);letter-spacing:-.02em}
.pprice.q{color:var(--ac);font-weight:600}
.pmeta{display:flex;flex-wrap:wrap;gap:8px}
.pmeta span{font-size:.8rem;color:var(--soft);border:1px solid var(--rule2);border-radius:999px;padding:4px 10px}
.pnote{margin-top:20px;max-width:70ch}
/* price estimator under the packages (D23); hidden without JavaScript, like the time calculator */
html:not(.js) .est{display:none}
.est{margin-top:28px}
.est [hidden]{display:none!important}
.est h3{font:600 1.35rem/1.2 var(--fh);letter-spacing:-.02em;color:var(--ink)}
.est .cin{display:flex;flex-direction:column;gap:18px}
.epack legend,.eboxes legend{float:none;display:block;width:100%;margin:0 0 10px}
.epack span{letter-spacing:0;font-family:var(--fb)}
.eboxes{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0}
.eboxes legend{padding:0;color:var(--dim);font-size:.9rem}
.ebox{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;color:var(--soft)}
.ebox input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ac);cursor:pointer}
.ebox input:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.emonth{color:var(--soft);font-weight:600}