/* DevHero bold — public pages. Condensed display type, near-black ground, lime signal, outlined accent lines.
   Same direction as KAUFN.COM (DMNT family). Anton: SIL Open Font License, self-hosted. No italics anywhere. */
@font-face{font-family:'Anton';src:url(anton.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold','Arial Narrow',Arial,sans-serif;--ground:#05070c;--ground2:#0a0f1a}
body:not([data-page=project]):not([data-page=account]):not([data-page=legal]){background:var(--ground)}
em,i,cite,dfn{font-style:normal}

/* headings: condensed, uppercase, tight */
h1,h2,.h1-req{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92;text-wrap:balance}
h1{font-size:clamp(46px,7.4vw,124px);margin:.18em 0 .3em}
body[data-page=home] .hero h1{font-size:clamp(56px,8.6vw,150px);line-height:.88}
h2{font-size:clamp(34px,4.6vw,76px);letter-spacing:.008em}
.h1-req{font-size:clamp(34px,4.4vw,72px)}
.h1-req .h1-sub{font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;font-size:13px}
h2.h4,h3.h4,.panel h2,.pcard h2{font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;font-size:13px;line-height:1.3;font-weight:700}

/* accent sentence: outlined in lime (Latin and Cyrillic scripts); solid lime elsewhere */
h1 .hl,h2 .hl,.punch .hl{color:var(--signal)}
:is([data-lang=en],[data-lang=de],[data-lang=fr],[data-lang=es],[data-lang=pt],[data-lang=it],[data-lang=nl],[data-lang=pl],[data-lang=tr],[data-lang=id],[data-lang=vi],[data-lang=ru],[data-lang=uk]) :is(h1,h2,.punch) .hl{color:transparent;-webkit-text-stroke:2px var(--signal);paint-order:stroke}
@media (max-width:700px){:is([data-lang=en],[data-lang=de],[data-lang=fr],[data-lang=es],[data-lang=pt],[data-lang=it],[data-lang=nl],[data-lang=pl],[data-lang=tr],[data-lang=id],[data-lang=vi],[data-lang=ru],[data-lang=uk]) :is(h1,h2,.punch) .hl{-webkit-text-stroke:1.4px var(--signal)}}

/* kicker as a terminal line */
.kicker{font-family:'Courier New',ui-monospace,monospace;letter-spacing:.14em;color:var(--signal)}
.hero .kicker::before{content:'// '}

/* hero */
body[data-page=home] .hero{padding:clamp(40px,6vw,96px) 0 clamp(28px,4vw,56px);background:radial-gradient(1100px 520px at 88% -8%,rgba(198,244,50,.16),transparent 62%),var(--ground);border-bottom:1px solid var(--line)}
body[data-page=home] .hero .lead{font-size:clamp(17px,1.35vw,20px);max-width:58ch;color:#cfd7e6}
.facts b{font-family:var(--display);font-weight:400;letter-spacing:.01em;color:var(--signal)}
.heropanel{background:rgba(10,15,26,.82);border:1px solid rgba(198,244,50,.35);box-shadow:0 0 0 1px rgba(198,244,50,.08),0 30px 80px rgba(0,0,0,.45)}

/* buttons: heavier, louder */
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:800;padding:15px 24px;border-width:2px}
.btn.primary{box-shadow:0 0 0 0 rgba(198,244,50,.55);transition:box-shadow .2s,transform .2s}
.btn.primary:hover{box-shadow:0 0 0 6px rgba(198,244,50,.18);transform:translateY(-1px)}
.btn:not(.primary){border-color:rgba(198,244,50,.6);color:var(--signal)}

/* marquee in display type */
.marquee{background:var(--signal);color:var(--on);border:0}
.marquee .mq-t span{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(18px,2vw,26px);color:var(--on)}
.marquee .mq-t span::before{color:var(--on)}

/* brand band: DEV/HERO word */
.brandx{padding:clamp(48px,7vw,110px) 0;border-bottom:1px solid var(--line);background:var(--ground2);overflow:hidden}
.brandx .wrap{display:grid;gap:clamp(20px,4vw,56px);align-items:center}
@media (min-width:980px){.brandx .wrap{grid-template-columns:1.15fr .85fr}}
.brandx .word{font-family:var(--display);text-transform:uppercase;font-size:clamp(84px,17vw,280px);line-height:.8;letter-spacing:-.005em;margin:0;color:var(--ink);white-space:nowrap}
.brandx .word span{color:transparent;-webkit-text-stroke:2px var(--signal)}
.brandx h2{margin-top:0}
.brandx .lead{color:#cfd7e6;max-width:52ch}
.punch{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.2vw,52px);line-height:.95;margin:.6em 0 0;color:var(--ink)}

/* sections */
.sx{border-bottom:1px solid var(--line)}
.idx b{font-family:var(--display);font-weight:400;color:var(--signal)}
.quote{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,4vw,64px);line-height:.95;margin:clamp(36px,5vw,72px) 0 0;padding-inline-start:clamp(14px,2vw,28px);border-inline-start:6px solid var(--signal);max-width:22ch;color:var(--ink)}
.cta h2,.ctaband h2{font-size:clamp(40px,6vw,104px)}

/* tighter on phones */
@media (max-width:599px){
  body[data-page=home] .hero h1{font-size:clamp(46px,14vw,72px)}
  h2{font-size:clamp(30px,9vw,46px)}
  .brandx .word{font-size:clamp(64px,22vw,120px)}
  .btn{padding:13px 16px;letter-spacing:.08em}
  .brandx .word span{-webkit-text-stroke:1.4px var(--signal)}
}
/* scripts without capitals or with tall glyphs: system fonts, normal case */
:is([data-lang=ar],[data-lang=fa],[data-lang=ur],[data-lang=hi],[data-lang=zh],[data-lang=ja],[data-lang=ko]) :is(h1,h2,.punch,.quote,.h1-req){font-family:var(--body);font-weight:800;text-transform:none;letter-spacing:0;line-height:1.15}
body:is([data-lang=ar],[data-lang=fa],[data-lang=ur],[data-lang=hi],[data-lang=zh],[data-lang=ja],[data-lang=ko]) .hero h1{font-size:clamp(36px,5.2vw,88px)}
/* long words (de, uk, ru, pl …) in condensed caps must never push the page wider */
h1,h2,.punch,.quote{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.hero .wrap>div,.brandx .wrap>div,.sx-head>*{min-width:0}
@media (max-width:599px){body[data-page=home] .hero h1{font-size:clamp(40px,12vw,64px)}}

/* globe page: the accent line sits on the globe — solid lime there */
body:is([data-page=globe],[data-page=ops],[data-page=projects]) .hero h1 .hl,body:is([data-page=globe],[data-page=ops],[data-page=projects]) h1 .hl{color:var(--signal)!important;-webkit-text-stroke:0!important}