/* G WEB DESIGN - "G-WEB/OS": the studio site as a futuristic operating system. Boots up, decodes its
   headline, keeps a live particle field behind a spinning G core, and shows the work as a build log. */
:root{
  --bg:#05070D; --bg-2:#0A0F1B; --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.06);
  --line:rgba(170,190,255,.12); --line-2:rgba(170,190,255,.22);
  --ink:#ECF1FF; --muted:#8E99B5; --dim:#5D6782;
  --lime:#C8FF3E; --on-lime:#071006; --cyan:#45E8FF; --violet:#8D6BFF; --pink:#FF5FD2;
  --holo:linear-gradient(115deg, var(--cyan), var(--violet) 45%, var(--pink) 80%);
  --display:"Tektur","Bahnschrift","Segoe UI",sans-serif;
  --body:"Geologica","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Martian Mono","Cascadia Mono",Consolas,monospace;
  --glow:0 0 0 1px var(--line), 0 30px 80px -40px rgba(69,232,255,.35);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F5FB; --bg-2:#E8ECF6; --panel:rgba(255,255,255,.72); --panel-2:#fff;
  --line:rgba(20,30,70,.12); --line-2:rgba(20,30,70,.22);
  --ink:#0A0F1F; --muted:#4E5874; --dim:#7A84A0;
  --lime:#BFF52E; --on-lime:#0A1405; --cyan:#0BA5C4; --violet:#6A47F0; --pink:#D8329F;
  --glow:0 0 0 1px var(--line), 0 30px 70px -40px rgba(60,40,160,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%; display:block}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; overflow-x:hidden; transition:background .4s, color .4s}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:.98; margin:0; letter-spacing:-.01em; text-wrap:balance}
h2{font-size:clamp(2.4rem,6vw,4.6rem); text-transform:uppercase}
h3{font-size:1.4rem; line-height:1.1}
p{margin:0}
a{color:inherit}
::selection{background:var(--lime); color:var(--on-lime)}
:focus-visible{outline:2px solid var(--lime); outline-offset:3px; border-radius:4px}
.wrap{max-width:1240px; margin-inline:auto; padding-inline:22px}
.sec{position:relative; padding-block:clamp(80px,11vw,150px)}
.tag{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tag::before{content:""; width:8px; height:8px; background:var(--lime); box-shadow:0 0 12px var(--lime)}
.holo-text{background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{color:var(--muted); font-size:1.15rem; max-width:40rem}
.head{display:grid; gap:18px; margin-bottom:56px; max-width:56rem}
.btn{position:relative; display:inline-flex; align-items:center; gap:12px; padding:15px 24px; font:600 .95rem var(--body); text-decoration:none; border:1px solid var(--line-2); color:var(--ink); background:var(--panel); border-radius:10px; cursor:pointer; overflow:hidden; transition:transform .2s, border-color .2s, background .2s}
.btn:hover{transform:translateY(-2px); border-color:var(--cyan)}
.btn.lime{background:var(--lime); color:var(--on-lime); border-color:transparent; box-shadow:0 0 30px -6px var(--lime)}
.btn.lime:hover{box-shadow:0 0 44px -4px var(--lime)}
.btn.lime::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); translate:-120% 0; transition:translate .6s}
.btn.lime:hover::after{translate:120% 0}
.btn svg{width:18px; height:18px}

/* boot screen */
.boot{position:fixed; inset:0; z-index:100; background:var(--bg); display:grid; place-items:center; transition:opacity .5s, visibility .5s}
.boot.done{opacity:0; visibility:hidden}
.boot pre{font-family:var(--mono); font-size:.8rem; color:var(--muted); line-height:1.9; margin:0; min-width:min(86vw,420px)}
.boot pre b{color:var(--lime); font-weight:500}
.boot .bar{height:2px; background:var(--line); margin-top:14px; overflow:hidden}
.boot .bar i{display:block; height:100%; width:0; background:var(--holo); transition:width .9s cubic-bezier(.6,.1,.2,1)}

/* cursor glow */
.cursor{position:fixed; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(69,232,255,.10), rgba(141,107,255,.06) 40%, transparent 70%); transition:opacity .3s}
:root[data-theme="light"] .cursor{background:radial-gradient(circle, rgba(106,71,240,.10), transparent 65%)}
@media (pointer:coarse){ .cursor{display:none} }

/* header */
.top{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, backdrop-filter .3s, border-color .3s; border-bottom:1px solid transparent}
.top.scrolled{background:color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--line)}
.top .wrap{display:flex; align-items:center; gap:22px; height:72px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo svg{width:38px; height:38px}
.logo b{font-family:var(--display); font-weight:800; font-size:1.15rem; letter-spacing:.08em}
.logo b span{color:var(--lime)}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:10px 12px; border-radius:8px; transition:color .2s, background .2s}
.nav a:hover{color:var(--ink); background:var(--panel-2)}
.nav a.btn{color:var(--on-lime); padding:11px 16px; margin-left:8px}
.theme{width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.theme svg{width:18px; height:18px}
.theme .sun{display:none}
:root[data-theme="light"] .theme .sun{display:block}
:root[data-theme="light"] .theme .moon{display:none}
.burger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink); cursor:pointer}
.burger svg{width:20px; height:20px; margin:auto}

/* hero */
.hero{position:relative; min-height:100svh; display:grid; align-items:center; padding-top:110px; padding-bottom:70px; overflow:hidden; isolation:isolate}
#field{position:absolute; inset:0; width:100%; height:100%; z-index:-2}
.floor{position:absolute; left:-50%; right:-50%; bottom:-10%; height:46%; z-index:-1; transform:perspective(420px) rotateX(62deg); transform-origin:50% 100%;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size:60px 60px;
  -webkit-mask-image:linear-gradient(transparent, #000 60%); mask-image:linear-gradient(transparent, #000 60%)}
@media (prefers-reduced-motion: no-preference){ .floor{animation:floor 3.5s linear infinite} @keyframes floor{to{background-position:0 60px}} }
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; width:100%}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.8rem); text-transform:uppercase; margin-block:24px 26px; font-weight:800}
.hero h1 .line{display:block}
.hero h1 .rot{display:block; min-height:1em; white-space:nowrap; font-size:.92em}
.hero h1 .rot span{background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero h1 .rot .ch{color:var(--lime); -webkit-text-fill-color:var(--lime)}
.hero .lede{font-size:1.2rem}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hud{display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:12px 36px; margin-top:54px; padding-top:22px; border-top:1px solid var(--line)}
.hud div{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.hud b{display:block; font-family:var(--display); font-size:2rem; letter-spacing:0; color:var(--ink); font-weight:700}

/* the G core */
.core{position:relative; aspect-ratio:1; width:min(100%,460px); margin-inline:auto; perspective:900px}
.core .ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-2); transform-style:preserve-3d}
.core .ring::after{content:""; position:absolute; width:10px; height:10px; border-radius:50%; top:-5px; left:calc(50% - 5px); background:var(--c,var(--cyan)); box-shadow:0 0 16px var(--c,var(--cyan))}
.core .r1{--c:var(--cyan); transform:rotateX(70deg) rotateZ(0deg)}
.core .r2{--c:var(--pink); inset:8%; transform:rotateY(68deg) rotateX(12deg)}
.core .r3{--c:var(--lime); inset:16%; transform:rotateX(58deg) rotateY(-40deg)}
@media (prefers-reduced-motion: no-preference){
  .core .r1{animation:spin1 14s linear infinite} .core .r2{animation:spin2 18s linear infinite} .core .r3{animation:spin3 11s linear infinite}
  @keyframes spin1{to{transform:rotateX(70deg) rotateZ(360deg)}}
  @keyframes spin2{to{transform:rotateY(68deg) rotateX(12deg) rotateZ(-360deg)}}
  @keyframes spin3{to{transform:rotateX(58deg) rotateY(-40deg) rotateZ(360deg)}}
  .core .g{animation:hover 6s ease-in-out infinite} @keyframes hover{50%{translate:0 -10px}}
}
.core .g{position:absolute; inset:27%; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--violet) 40%, transparent), transparent 60%), var(--panel);
  border:1px solid var(--line-2); box-shadow:0 0 80px -10px color-mix(in srgb, var(--violet) 60%, transparent), inset 0 0 40px color-mix(in srgb, var(--cyan) 25%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.core .g svg{width:62%; filter:drop-shadow(0 0 22px color-mix(in srgb, var(--cyan) 70%, transparent))}
.core .label{position:absolute; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:6px 9px; border:1px solid var(--line-2); border-radius:6px; background:var(--panel); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.core .label i{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c); margin-right:6px; box-shadow:0 0 8px var(--c)}
.core .l1{top:6%; left:-2%; --c:var(--cyan)} .core .l2{top:44%; right:-6%; --c:var(--pink)} .core .l3{bottom:6%; left:8%; --c:var(--lime)}

/* marquee */
.marquee{border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; padding-block:18px; background:var(--bg-2)}
.marquee div{display:inline-flex; gap:48px; animation:mq 40s linear infinite; font-family:var(--display); font-size:1.3rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.marquee span::after{content:"✦"; margin-left:48px; color:var(--lime)}
@keyframes mq{to{transform:translateX(-50%)}}

/* work / build log */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px}
.filters button{font:500 .7rem var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:10px 14px; border-radius:8px; border:1px solid var(--line-2); background:var(--panel); color:var(--muted); cursor:pointer; transition:all .2s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.filters button b{font-weight:400; opacity:.6; margin-left:6px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{position:relative; border-radius:16px; background:var(--panel); border:1px solid var(--line); overflow:hidden; transform-style:preserve-3d; transition:transform .25s ease-out, border-color .3s, box-shadow .3s;
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.card:hover{border-color:var(--line-2); box-shadow:var(--glow)}
.card::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.35), transparent 40%), linear-gradient(115deg, transparent 20%, rgba(69,232,255,.18), rgba(255,95,210,.18), transparent 80%)}
.card:hover::after{opacity:1}
.card > a{display:block; text-decoration:none; color:inherit}
.chrome{display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.6rem; color:var(--dim); background:var(--bg-2)}
.chrome i{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.chrome i:first-child{background:#FF5F57} .chrome i:nth-child(2){background:#FEBC2E} .chrome i:nth-child(3){background:#28C840}
.chrome span{margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.screen{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2)}
.screen img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 4s cubic-bezier(.4,.1,.2,1)}
.screen img.tall{height:auto; aspect-ratio:720/1350}
.card:hover .screen img{transform:scale(1.04)}
.card:hover .screen img.tall{transform:translateY(calc(-100% + var(--screen-h,240px)))}
.meta{padding:18px 18px 20px; display:grid; gap:8px}
.meta .row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.meta .idx{font-family:var(--mono); font-size:.66rem; color:var(--dim); letter-spacing:.1em}
.status{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; border-radius:5px; border:1px solid currentColor}
.status.live{color:var(--lime)} .status.concept{color:var(--cyan)} .status.app{color:var(--pink)}
:root[data-theme="light"] .status.live{color:#3E7400}
.meta h3{font-size:1.3rem}
.meta p{color:var(--muted); font-size:.92rem; line-height:1.5}
.stack{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.stack span{font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; padding:3px 7px; border-radius:4px; background:var(--panel-2); color:var(--muted); border:1px solid var(--line)}
.visit{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-top:4px}

/* mock screens for software/app cards */
.mock{position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--violet) 25%, transparent), transparent 60%), var(--bg-2)}
.cal{width:82%; display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.cal b{font:500 .5rem var(--mono); color:var(--dim); text-align:center; letter-spacing:.1em}
.cal i{height:26px; border-radius:5px; background:var(--panel-2); border:1px solid var(--line)}
.cal i.on{background:color-mix(in srgb, var(--cyan) 35%, transparent); border-color:var(--cyan)}
.cal i.sw{background:color-mix(in srgb, var(--pink) 35%, transparent); border-color:var(--pink)}
@media (prefers-reduced-motion: no-preference){ .cal i.sw{animation:swap 3s ease-in-out infinite} @keyframes swap{50%{background:color-mix(in srgb, var(--lime) 40%, transparent); border-color:var(--lime)}} }
.phone{width:34%; aspect-ratio:9/18.5; border-radius:18px; border:2px solid var(--line-2); background:var(--bg); padding:10px 8px; display:grid; align-content:start; gap:6px; position:relative; overflow:hidden}
.phone::before{content:""; width:30%; height:5px; border-radius:4px; background:var(--line-2); justify-self:center; margin-bottom:4px}
.phone .big{font:700 1rem var(--display); color:var(--lime)}
.phone .lbl{font:400 .44rem var(--mono); color:var(--dim); letter-spacing:.1em; text-transform:uppercase}
.phone .tx{display:flex; justify-content:space-between; font:400 .5rem var(--mono); color:var(--muted); padding:5px 6px; border-radius:6px; background:var(--panel-2)}
@media (prefers-reduced-motion: no-preference){ .phone .tx{animation:slide 4s ease-in-out infinite both} .phone .tx:nth-child(5){animation-delay:.3s} .phone .tx:nth-child(6){animation-delay:.6s} .phone .tx:nth-child(7){animation-delay:.9s}
  @keyframes slide{0%,10%{opacity:0; translate:20px 0} 25%,85%{opacity:1; translate:0 0} 100%{opacity:0}} }
.card.slot{border:1px dashed var(--line-2); background:transparent; display:grid; place-items:center; text-align:center; min-height:100%}
.card.slot > a{padding:34px 24px; display:grid; gap:14px; justify-items:center}
.card.slot .plus{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font:300 2.4rem var(--display); color:var(--on-lime); background:var(--lime); box-shadow:0 0 40px -6px var(--lime)}
@media (prefers-reduced-motion: no-preference){ .card.slot .plus{animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{50%{box-shadow:0 0 70px 0 var(--lime)}} }
.card.slot p{color:var(--muted)}

/* services */
.systems{display:grid; gap:22px}
.sys{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(22px,4vw,44px); border-radius:22px; background:var(--panel); border:1px solid var(--line); position:relative; overflow:hidden}
.sys:nth-child(even){grid-template-columns:1.05fr 1fr}
.sys:nth-child(even) .art{order:-1}
.sys::before{content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px; background:conic-gradient(from var(--a,0deg), transparent 70%, var(--cyan), var(--pink), transparent); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7; pointer-events:none}
@property --a{syntax:"<angle>"; inherits:false; initial-value:0deg}
@media (prefers-reduced-motion: no-preference){ .sys::before{animation:border 8s linear infinite} @keyframes border{to{--a:360deg}} }
.sys .num{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--lime); text-transform:uppercase}
.sys h3{font-size:clamp(2rem,4.4vw,3.4rem); text-transform:uppercase; margin-block:12px 14px}
.sys p{color:var(--muted); font-size:1.06rem}
.sys ul{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px}
.sys li{display:flex; gap:10px; align-items:baseline; font-size:.95rem}
.sys li::before{content:"▸"; color:var(--cyan); font-size:.8rem}
.art{position:relative; aspect-ratio:4/3; border-radius:16px; border:1px solid var(--line); background:var(--bg-2); overflow:hidden; display:grid; place-items:center}
/* art 1: a browser assembling itself */
.build{width:84%; border-radius:10px; border:1px solid var(--line-2); background:var(--bg); overflow:hidden}
.build .bar{height:22px; border-bottom:1px solid var(--line); display:flex; gap:5px; align-items:center; padding-inline:9px}
.build .bar i{width:7px; height:7px; border-radius:50%; background:var(--line-2)}
.build .body{padding:14px; display:grid; gap:9px}
.blk{height:12px; border-radius:4px; background:var(--panel-2); transform-origin:left}
.blk.h{height:26px; width:70%; background:var(--holo)}
.blk.w60{width:60%} .blk.w80{width:80%}
.blk.row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; height:auto; background:none}
.blk.row i{height:46px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line)}
.blk.cta{width:34%; height:22px; background:var(--lime)}
@media (prefers-reduced-motion: no-preference){
  .in .blk{animation:grow 5s cubic-bezier(.6,.1,.2,1) infinite both}
  .in .blk:nth-child(2){animation-delay:.25s} .in .blk:nth-child(3){animation-delay:.5s} .in .blk:nth-child(4){animation-delay:.75s} .in .blk:nth-child(5){animation-delay:1s}
  @keyframes grow{0%{transform:scaleX(0); opacity:0} 12%{opacity:1} 30%,85%{transform:scaleX(1); opacity:1} 100%{opacity:0}}
}
.score{position:absolute; right:7%; bottom:8%; width:74px; height:74px; display:grid; place-items:center; font:700 1.3rem var(--display); color:var(--lime)}
.score svg{position:absolute; inset:0; rotate:-90deg}
.score circle{fill:none; stroke-width:5}
.score .t{stroke:var(--line)} .score .v{stroke:var(--lime); stroke-dasharray:201; stroke-dashoffset:201; stroke-linecap:round}
.in .score .v{transition:stroke-dashoffset 2s cubic-bezier(.6,.1,.2,1) .4s; stroke-dashoffset:0}
/* art 2: dashboard */
.dash{width:86%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.kpi{grid-column:span 1; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--bg)}
.kpi small{display:block; font:400 .5rem var(--mono); color:var(--dim); letter-spacing:.12em; text-transform:uppercase}
.kpi b{font:700 1.2rem var(--display)}
.chart{grid-column:1/-1; height:120px; border-radius:10px; border:1px solid var(--line); background:var(--bg); position:relative; overflow:hidden; display:flex; align-items:flex-end; gap:6px; padding:12px}
.chart i{flex:1; border-radius:3px 3px 0 0; background:linear-gradient(var(--violet), color-mix(in srgb, var(--violet) 20%, transparent)); height:var(--h); transform-origin:bottom; transform:scaleY(.1)}
.in .chart i{transition:transform 1.2s cubic-bezier(.3,1.4,.4,1); transform:scaleY(1)}
.chart svg{position:absolute; inset:0; width:100%; height:100%}
.chart path{fill:none; stroke:var(--cyan); stroke-width:2; stroke-dasharray:600; stroke-dashoffset:600; filter:drop-shadow(0 0 6px var(--cyan))}
.in .chart path{transition:stroke-dashoffset 2.4s ease .5s; stroke-dashoffset:0}
.rows{grid-column:1/-1; display:grid; gap:5px}
.rows i{height:14px; border-radius:4px; background:var(--panel-2); border:1px solid var(--line)}
.rows i:nth-child(2){background:color-mix(in srgb, var(--lime) 20%, transparent)}
/* art 3: phones */
.phones{display:flex; gap:16px; align-items:center}
.ph{width:118px; aspect-ratio:9/19; border-radius:22px; border:2px solid var(--line-2); background:var(--bg); padding:12px 9px; display:grid; align-content:start; gap:7px; position:relative; overflow:hidden}
.ph.mid{width:140px; border-color:var(--cyan); box-shadow:0 0 50px -12px var(--cyan)}
.ph::before{content:""; width:34%; height:5px; border-radius:4px; background:var(--line-2); justify-self:center}
.ph .t{height:10px; border-radius:3px; background:var(--panel-2)}
.ph .img{height:64px; border-radius:10px; background:var(--holo); opacity:.85}
.ph .btnx{height:20px; border-radius:6px; background:var(--lime)}
.ph .notif{position:absolute; left:8px; right:8px; top:16px; padding:7px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line-2); font:400 .48rem var(--mono); color:var(--ink); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.ph .notif b{color:var(--lime)}
@media (prefers-reduced-motion: no-preference){ .in .ph .notif{animation:notif 4s ease-in-out infinite} @keyframes notif{0%,15%{translate:0 -140%} 25%,70%{translate:0 0} 85%,100%{translate:0 -140%}}
  .in .ph.side{animation:float 5s ease-in-out infinite} .in .ph.side:last-child{animation-delay:-2.5s} @keyframes float{50%{translate:0 -10px}} }
.extras{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; align-items:center}
.extras span{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:9px 12px; border:1px solid var(--line-2); border-radius:8px; color:var(--muted)}
.extras b{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:400; margin-right:6px}

/* launch sequence */
.seq{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.seq::before{content:""; position:absolute; left:0; right:0; top:34px; height:2px; background:var(--line)}
.seq::after{content:""; position:absolute; left:0; top:34px; height:2px; width:var(--p,0%); background:var(--holo); box-shadow:0 0 18px var(--cyan); transition:width .2s linear}
.stage{position:relative; display:grid; gap:12px; align-content:start}
.stage .t{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.14em}
.stage .dot{width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); background:var(--bg); position:relative; z-index:1; transition:all .3s}
.stage.lit .dot{border-color:var(--lime); background:var(--lime); box-shadow:0 0 20px var(--lime)}
.stage h3{font-size:1.5rem; text-transform:uppercase}
.stage p{color:var(--muted); font-size:.95rem}

/* stack orbit + about */
.about .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center}
.orbit{position:relative; aspect-ratio:1; width:min(100%,480px); margin-inline:auto}
.orbit .o{position:absolute; inset:0; border-radius:50%; border:1px dashed var(--line-2)}
.orbit .o2{inset:18%} .orbit .o3{inset:36%; border-style:solid; background:radial-gradient(circle, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%)}
.orbit .center{position:absolute; inset:41%; display:grid; place-items:center}
.orbit .center svg{width:100%}
.orbit .spin{position:absolute; inset:0}
.orbit .spin.s2{inset:18%}
@media (prefers-reduced-motion: no-preference){ .orbit .spin{animation:orbit 50s linear infinite} .orbit .spin.s2{animation-duration:36s; animation-direction:reverse} @keyframes orbit{to{rotate:360deg}}
  .orbit .spin span{animation:counter 50s linear infinite} .orbit .spin.s2 span{animation:counter2 36s linear infinite} @keyframes counter{to{rotate:-360deg}} @keyframes counter2{to{rotate:360deg}} }
.orbit .spin span{position:absolute; left:50%; top:50%; translate:-50% -50%; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; padding:6px 9px; border-radius:6px; border:1px solid var(--line-2); background:var(--bg-2); white-space:nowrap; color:var(--ink)}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px}
.fact{padding:16px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.fact small{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.fact b{font-weight:600}

/* contact terminal */
.term{border-radius:18px; border:1px solid var(--line-2); background:var(--bg-2); overflow:hidden; box-shadow:var(--glow)}
.term .chrome{background:transparent; padding:14px 16px; font-size:.66rem}
.term form{padding:clamp(18px,4vw,36px); display:grid; grid-template-columns:1fr 1fr; gap:18px}
.term label{display:grid; gap:8px; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--muted)}
.term label::before{content:"> "; color:var(--lime)}
.term .full{grid-column:1/-1}
.term input, .term textarea{font:400 1rem var(--body); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line-2); padding:10px 2px; outline:none; width:100%; border-radius:0; transition:border-color .2s}
.term input:focus, .term textarea:focus{border-color:var(--lime)}
.term textarea{resize:vertical; min-height:90px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips span{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; padding:9px 12px; border-radius:8px; border:1px solid var(--line-2); color:var(--muted); cursor:pointer; transition:all .2s}
.chips input:checked + span{background:var(--lime); color:var(--on-lime); border-color:var(--lime)}
.chips input:focus-visible + span{outline:2px solid var(--lime); outline-offset:2px}
.term .out{grid-column:1/-1; font-family:var(--mono); font-size:.72rem; color:var(--muted); line-height:1.9; min-height:1.9em; white-space:pre-wrap}
.term .out b{color:var(--lime); font-weight:500}
.contact .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:start}
.contact .direct{display:grid; gap:12px; margin-top:30px}
.contact .direct a{font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.9rem); text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:10px; display:flex; justify-content:space-between; align-items:center}
.contact .direct a:hover{color:var(--lime)}

/* footer */
.foot{border-top:1px solid var(--line); padding-block:40px 30px; overflow:hidden}
.foot .giant{font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,15vw,15rem); line-height:.85; letter-spacing:-.02em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px var(--line-2); white-space:nowrap; transition:color .4s}
.foot .giant:hover{color:var(--ink); -webkit-text-stroke-color:transparent; background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent}
.foot .row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:26px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.foot .row a{text-decoration:none; color:var(--muted)}
.foot .row a:hover{color:var(--lime)}

/* reveal */
.js .rv{opacity:0; translate:0 30px; filter:blur(6px); transition:opacity .8s, translate .8s cubic-bezier(.2,.7,.2,1), filter .8s}
.js .rv.in{opacity:1; translate:0 0; filter:none}
@media (prefers-reduced-motion: reduce){ .js .rv{opacity:1; translate:none; filter:none; transition:none} html{scroll-behavior:auto} .marquee div{animation:none} }

/* responsive */
@media (max-width: 1080px){
  .grid{grid-template-columns:1fr 1fr}
  .seq{grid-template-columns:repeat(5,minmax(180px,1fr)); overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory}
  .stage{scroll-snap-align:start}
}
@media (max-width: 920px){
  .nav{display:none; position:fixed; top:72px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; padding:14px 22px 24px; background:color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:14px 10px; font-size:.8rem}
  .nav a.btn{margin:10px 0 0; justify-content:center}
  .burger{display:grid; margin-left:auto}
  .hero .wrap, .about .wrap, .contact .wrap{grid-template-columns:1fr}
  .core{width:min(80%,380px); order:-1; margin-top:10px}
  .hud{grid-template-columns:repeat(2,auto)}
  .sys, .sys:nth-child(even){grid-template-columns:1fr}
  .sys:nth-child(even) .art{order:0}
}
@media (max-width: 640px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr}
  .logo b{font-size:1rem}
  .sys ul{grid-template-columns:1fr}
  .term form{grid-template-columns:1fr}
  .phones .ph.side{display:none}
  .facts{grid-template-columns:1fr}
  .hero{padding-top:96px}
  .core .label{font-size:.54rem}
}

/* fixes: contact arrows, terminal prompts, small-screen orbit and a vertical launch sequence */
.contact .direct a svg{width:24px; height:24px; flex:none}
.term label{display:block}
.term label input, .term label textarea{display:block; margin-top:6px}
.term .chips label::before{content:none}
@media (max-width: 640px){
  .orbit{width:82%}
  .orbit .spin span{font-size:.54rem; padding:4px 7px}
  .seq{grid-template-columns:1fr; overflow:visible; gap:30px; padding-left:40px}
  .seq::before{left:10px; right:auto; top:6px; bottom:6px; width:2px; height:auto}
  .seq::after{left:10px; top:6px; width:2px; height:var(--p,0%)}
  .stage .dot{position:absolute; left:-40px; top:-2px}
}

/* light mode: lime text needs a deeper shade on white */
:root[data-theme="light"] .logo b span, :root[data-theme="light"] .sys .num, :root[data-theme="light"] .term label::before,
:root[data-theme="light"] .hero h1 .rot .ch{color:#4A7F00; -webkit-text-fill-color:#4A7F00}
:root[data-theme="light"] .phone .big, :root[data-theme="light"] .score{color:#4A7F00}
:root[data-theme="light"] .marquee span::after{color:var(--violet)}
/* ---------- pricing page ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nav a[aria-current="page"]{color:var(--ink); background:var(--panel-2)}
.price-hero{min-height:auto; padding-top:150px; padding-bottom:40px}
.price-hero h1{font-size:clamp(2.8rem,7.4vw,6.4rem)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 26px; border-radius:22px; background:var(--panel); border:1px solid var(--line); transition:transform .3s, box-shadow .3s}
.plan:hover{transform:translateY(-6px); box-shadow:var(--glow)}
.plan.featured{background:linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--holo) border-box; border:2px solid transparent; box-shadow:0 30px 80px -40px color-mix(in srgb, var(--violet) 80%, transparent)}
.plan .flag{position:absolute; top:-13px; left:50%; translate:-50% 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; background:var(--lime); color:var(--on-lime); padding:6px 12px; border-radius:6px; white-space:nowrap}
.plan .tier{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
.plan h3{font-size:2rem; text-transform:uppercase}
.pblurb{color:var(--muted); font-size:.98rem; min-height:3.2em}
.price{display:flex; align-items:baseline; gap:8px; padding-block:6px 4px; border-block:1px solid var(--line)}
.price b{font-family:var(--display); font-size:3.2rem; line-height:1.1}
.plan.featured .price b{background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent}
.price span{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.plan .btn{justify-content:center}
.feats{list-style:none; padding:0; margin:4px 0 0; display:grid; gap:10px; flex:1; align-content:start}
.feats li{display:flex; gap:10px; align-items:flex-start; font-size:.95rem}
.feats svg{width:18px; height:18px; flex:none; margin-top:3px; color:var(--lime)}
:root[data-theme="light"] .feats svg{color:#4A7F00}
.pnote{font-size:.82rem; color:var(--dim); padding-top:12px; border-top:1px dashed var(--line-2)}
.fineprint{margin-top:22px; color:var(--muted); font-size:.92rem; text-align:center}
.fineprint a{color:var(--cyan)}

.editor-sec{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:center}
.editor{position:relative; display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center}
.ed-panel{border-radius:16px; border:1px solid var(--line-2); background:var(--bg-2); overflow:hidden; box-shadow:var(--glow)}
.ed-body{padding:16px; display:grid; gap:10px; position:relative}
.ed-row{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:8px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line)}
.ed-ph{width:44px; height:44px; border-radius:9px; background:linear-gradient(135deg, #E7A04A, #B4561E); transition:background .6s}
.ed-ph.p2{background:linear-gradient(135deg, #C9472A, #7A2414)} .ed-ph.p3{background:linear-gradient(135deg, #B9A3F0, #F2B6D6)}
.ed-name{font-weight:600; font-size:.92rem}
.ed-price{font-family:var(--mono); font-size:.82rem; padding:6px 10px; border-radius:6px; border:1px solid var(--line-2); min-width:72px; text-align:right}
.caret{display:inline-block; width:1.5px; height:1em; background:var(--lime); vertical-align:-2px; margin-left:2px; opacity:0}
.ed-toggle{width:38px; height:22px; border-radius:20px; background:var(--line-2); position:relative; transition:background .3s}
.ed-toggle i{position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--ink); transition:left .3s}
.ed-upload{position:relative; padding:9px 12px; border-radius:10px; border:1px dashed var(--cyan); font-family:var(--mono); font-size:.68rem; color:var(--cyan); overflow:hidden; opacity:0; transition:opacity .3s}
.ed-upload i{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--holo)}
.ed-save{justify-self:end; font:600 .8rem var(--body); padding:8px 16px; border-radius:8px; background:var(--lime); color:var(--on-lime)}
.ed-phone{width:170px; aspect-ratio:9/18; border-radius:26px; border:2px solid var(--line-2); background:var(--bg); padding:16px 12px; display:grid; align-content:start; gap:6px; box-shadow:0 0 60px -20px var(--cyan)}
.ed-live{font-family:var(--mono); font-size:.6rem; color:var(--lime); letter-spacing:.1em}
:root[data-theme="light"] .ed-live{color:#4A7F00}
.ed-ph.big{width:100%; height:86px; border-radius:12px}
.ed-phone b{font-size:.8rem; margin-top:6px}
.ed-pp{font-family:var(--mono); font-size:.74rem; color:var(--muted); transition:color .3s}
.ed-pp.flash{color:var(--lime)}
.swap.swapped{background:linear-gradient(135deg, #F5C451, #E36A2C 60%, #8C2D14)}
.editor.play .caret{animation:blink .8s steps(2) infinite}
.editor.play .ed-toggle i{left:19px} .editor.play .ed-toggle{background:var(--lime)}
.editor.play .ed-upload{opacity:1}
.editor.play .ed-upload i{transition:width 1.6s ease; width:100%}
@keyframes blink{50%{opacity:1}}

.compare{overflow-x:auto; border-radius:18px; border:1px solid var(--line)}
.compare table{width:100%; border-collapse:collapse; min-width:620px}
.compare th, .compare td{padding:14px 18px; text-align:center; border-bottom:1px solid var(--line); font-size:.94rem}
.compare thead th{font-family:var(--display); font-size:1.15rem; text-transform:uppercase; background:var(--bg-2)}
.compare thead small{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--muted); margin-top:4px; font-weight:400}
.compare tbody th{text-align:left; font-weight:500; color:var(--muted)}
.compare .hl{background:color-mix(in srgb, var(--violet) 9%, transparent)}
.compare .yes svg{width:20px; height:20px; color:var(--lime)}
:root[data-theme="light"] .compare .yes svg{color:#4A7F00}
.compare .no{color:var(--dim)}
.compare tbody tr:last-child th, .compare tbody tr:last-child td{border-bottom:0}

.talks{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.talk{display:flex; flex-direction:column; gap:12px; padding:26px; border-radius:20px; background:var(--panel); border:1px solid var(--line); position:relative; overflow:hidden}
.talk::after{content:""; position:absolute; right:-60px; top:-60px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--cyan) 25%, transparent), transparent 70%); pointer-events:none}
.talk .num{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--lime); text-transform:uppercase}
:root[data-theme="light"] .talk .num{color:#4A7F00}
.talk h3{font-size:1.7rem; text-transform:uppercase}
.talk p{color:var(--muted)}
.talk ul{list-style:none; padding:0; margin:4px 0 0; display:grid; gap:8px; flex:1; align-content:start}
.talk li{font-size:.92rem; padding-left:20px; position:relative}
.talk li::before{content:"?"; position:absolute; left:0; font-family:var(--mono); color:var(--cyan)}
.talk-foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:10px; padding-top:14px; border-top:1px solid var(--line)}
.talk .quote{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}

.faq-wrap{display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(24px,5vw,60px); align-items:start}
.faq{display:grid; gap:10px}
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:4px 18px}
.faq summary{cursor:pointer; list-style:none; padding:14px 0; font-weight:600; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--lime); font-size:1.2rem; transition:rotate .3s}
:root[data-theme="light"] .faq summary::after{color:#4A7F00}
.faq details[open] summary::after{rotate:45deg}
.faq details p{color:var(--muted); padding-bottom:16px}
.cta-band{text-align:center; padding:clamp(36px,6vw,64px) 22px; border-radius:26px; border:1px solid var(--line-2); background:radial-gradient(circle at 50% 0, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%), var(--panel); display:grid; gap:14px; justify-items:center}
.cta-band .ctas{justify-content:center; margin-top:10px}

@media (max-width: 1000px){
  .plans, .talks{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
  .editor-sec, .faq-wrap{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .editor{grid-template-columns:1fr}
  .ed-phone{display:none}
  .price-hero{padding-top:120px}
}

.swipe{display:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:-30px 0 12px}
@media (max-width: 700px){ .swipe{display:block} }

/* ---------- stack loadout ---------- */
.orbit .spin span.hot{border-color:var(--lime); color:var(--lime); box-shadow:0 0 18px -4px var(--lime)}
:root[data-theme="light"] .orbit .spin span.hot{color:#4A7F00; border-color:#4A7F00}
.newpill{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:5px; background:var(--lime); color:var(--on-lime); vertical-align:2px}
.loadout{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.kit{padding:22px; border-radius:18px; background:var(--panel); border:1px solid var(--line); display:grid; gap:10px; align-content:start; transition:border-color .3s, transform .3s}
.kit:hover{border-color:var(--line-2); transform:translateY(-4px)}
.kit:first-child{grid-column:span 1}
.kit h3{font-size:1.35rem; text-transform:uppercase}
.kit p{color:var(--muted); font-size:.92rem}
.tools{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.tool{position:relative; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; padding:7px 10px; border-radius:7px; border:1px solid var(--line-2); background:var(--bg-2)}
.tool.new{border-color:var(--lime); box-shadow:0 0 16px -6px var(--lime)}
.tool.new::after{content:"NEW"; position:absolute; top:-7px; right:-6px; font-size:.48rem; letter-spacing:.1em; padding:2px 4px; border-radius:4px; background:var(--lime); color:var(--on-lime)}
@media (prefers-reduced-motion: no-preference){ .kit.in .tool.new{animation:newglow 2.8s ease-in-out infinite} @keyframes newglow{50%{box-shadow:0 0 26px -2px var(--lime)}} }
@media (max-width: 1000px){ .loadout{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .loadout{grid-template-columns:1fr} }

/* ---------- email add-on ---------- */
.addon{margin-top:26px; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,48px); align-items:center; padding:clamp(22px,4vw,36px); border-radius:22px; border:1px dashed var(--line-2); background:var(--panel)}
.addon h3{font-size:clamp(1.6rem,3vw,2.2rem); text-transform:uppercase; margin-block:12px 10px}
.addon-copy p{color:var(--muted); margin-bottom:16px}
.addon-side{display:grid; gap:14px}
.addon-side .btn{justify-content:center}
.mailcard{border-radius:14px; border:1px solid var(--line-2); background:var(--bg-2); overflow:hidden; box-shadow:var(--glow)}
.mail-body{padding:12px 14px; display:grid; gap:2px}
.mail-row{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.88rem; align-items:baseline}
.mail-row:last-child{border-bottom:0}
.mail-row small{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.mail-row b{font-family:var(--mono); font-weight:500; font-size:.84rem; word-break:break-all}
[data-mailbox]{color:var(--lime); border-right:2px solid var(--lime); padding-right:2px}
:root[data-theme="light"] [data-mailbox]{color:#4A7F00; border-color:#4A7F00}
@media (max-width: 1000px){ .addon{grid-template-columns:1fr; max-width:560px; margin-inline:auto} }

/* ---------- domain add-on ---------- */
.addon.domain{margin-top:18px}
.addon.domain .price b{font-size:2.2rem}
.domain-search{border-radius:14px; border:1px solid var(--line-2); background:var(--bg-2); padding:14px; display:grid; gap:10px; box-shadow:var(--glow)}
.ds-bar{display:flex; align-items:baseline; gap:2px; padding:12px 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg); font-family:var(--mono); font-size:.9rem; overflow:hidden; white-space:nowrap}
.ds-www, .ds-tld{color:var(--dim)}
.ds-bar b{font-weight:500; color:var(--ink); border-right:2px solid var(--cyan); padding-right:2px}
.ds-result{display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--muted)}
.ds-result b{color:var(--lime); font-weight:600}
:root[data-theme="light"] .ds-result b{color:#4A7F00}
.ds-dot{width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 25%, transparent)}
.ds-result.checking b{color:var(--cyan)} .ds-result.checking .ds-dot{background:var(--cyan); box-shadow:0 0 0 4px color-mix(in srgb, var(--cyan) 25%, transparent)}

/* footer wordmark: always fits its container (text is ~6.6em wide) */
.foot .wrap{container-type:inline-size}
.foot .giant{font-size:calc((min(100vw, 1240px) - 44px) / 7.1); font-size:calc(100cqw / 7.1); overflow:visible}

/* two-part price: build once + monthly */
.price{flex-wrap:wrap}
.price .monthly{flex-basis:100%; display:flex; align-items:baseline; gap:8px; margin-top:-2px}
.price .monthly b{font-family:var(--display); font-size:1.9rem; line-height:1.1; color:var(--lime); -webkit-text-fill-color:var(--lime); background:none}
:root[data-theme="light"] .price .monthly b{color:#4A7F00; -webkit-text-fill-color:#4A7F00}