:root{
  --bg:#0E0F0D; --bg-2:#131512; --card:#171915;
  --ink:#E8E6DD; --ink-2:#9C9A8E; --mute:#63615A;
  --amber:#E0A83E; --amber-2:#8A6A24;
  --hair:color-mix(in srgb, var(--ink) 13%, transparent);
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad:clamp(1.2rem, 5vw, 4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; color-scheme:dark; scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.6px) 0 0 / 26px 26px,
    var(--bg);
}
::selection{background:color-mix(in srgb, var(--amber) 40%, transparent)}
a{color:var(--amber); text-decoration:none}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; z-index:10; background:var(--bg); color:var(--ink); padding:.6rem 1rem; font-family:var(--mono)}
.skip:focus{left:.75rem; top:.75rem}
.shell{width:min(76rem,100%); margin-inline:auto; padding-inline:var(--pad)}

/* mast */
.mast{border-bottom:1px dashed var(--hair)}
.mast-in{display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; padding-block:1.2rem}
.brand{font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.3em; color:var(--ink)}
.brand::after{content:"▮"; color:var(--amber); margin-left:.5em; animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.brand:hover{color:var(--ink)}
.mast nav{display:flex; gap:clamp(1.1rem,3vw,2rem)}
.mast nav a{font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
.mast nav a::before{content:"/ "; color:var(--amber-2)}
.mast nav a:hover{color:var(--ink)}

/* hero — text left, cross panel right */
.hero{padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,8vw,5.5rem); border-bottom:1px dashed var(--hair)}
.hero-grid{display:grid; gap:clamp(2.5rem,6vw,4rem); align-items:center}
@media (min-width:60rem){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.mark2{
  justify-self:end; width:min(19rem,72vw);
  border:1px solid var(--hair); padding:6px; background:var(--card);
}
.mark2-in{
  border:1px dashed var(--hair); padding:clamp(1.6rem,4vw,2.4rem);
  display:grid; place-items:center; gap:1.4rem;
  background:radial-gradient(ellipse 65% 60% at 50% 46%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 75%);
}
.mark2 svg{width:52%; height:auto; color:var(--amber); filter:drop-shadow(0 0 16px color-mix(in srgb, var(--amber) 50%, transparent))}
.mark2-cap{font-family:var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--mute)}
@media (max-width:60rem){.mark2{justify-self:start; margin-top:.5rem}}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin:0 0 1.4rem}
.eyebrow::before{content:"// "}
.hero h1{margin:0 0 1.3rem; font-size:clamp(2.4rem,6.8vw,4.9rem); font-weight:600; line-height:1.04; letter-spacing:-.03em; text-wrap:balance}
.hero h1 .dim{color:var(--mute)}
.lede{margin:0; max-width:30rem; color:var(--ink-2); font-size:clamp(1rem,1.6vw,1.15rem)}
.lede b{color:var(--ink); font-weight:550}

.spec-strip{border-bottom:1px dashed var(--hair); padding-block:.85rem}
.spec{display:flex; flex-wrap:wrap; gap:.4rem 2.2rem; margin:0; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
.spec b{color:var(--ink); font-weight:500}
.spec i{font-style:normal; color:var(--amber-2)}

/* products — spec sheets */
.products{padding-block:clamp(3rem,8vw,5.5rem)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.section-head h2{font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); margin:0}
.section-head h2::before{content:"## "; color:var(--amber-2)}
.section-head span{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--mute)}

.sheet{
  display:block; color:inherit; background:var(--card);
  border:1px solid var(--hair); padding:5px; margin-bottom:clamp(1.2rem,3vw,1.8rem);
  transition:border-color .4s cubic-bezier(.22,1,.36,1);
}
.sheet:hover{border-color:color-mix(in srgb, var(--amber) 45%, transparent)}
.sheet-in{border:1px dashed var(--hair); padding:clamp(1.3rem,3.4vw,2.1rem); display:grid; gap:1.1rem}
@media (min-width:56rem){.sheet-in{grid-template-columns:auto 1fr auto; gap:clamp(1.5rem,4vw,3rem); align-items:start}}
.sheet-idx{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; color:var(--mute); writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg)}
@media (max-width:56rem){.sheet-idx{writing-mode:horizontal-tb; transform:none}}
.sheet h3{margin:0 0 .5rem; font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:600; letter-spacing:-.025em; transition:color .35s}
.sheet:hover h3{color:var(--amber)}
.sheet p{margin:0; color:var(--ink-2); max-width:34rem}
.meta{display:flex; flex-direction:column; gap:.45rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase}
.meta div{display:flex; gap:.8rem}
.meta span{color:var(--mute); min-width:5.2rem}
.meta b{font-weight:500; color:var(--ink)}
.meta .st-beta b{color:var(--amber)}
.meta .st-soon b{color:var(--ink-2)}
@media (max-width:56rem){.meta{margin-top:.4rem}}

.aside{margin-top:clamp(1.8rem,4vw,2.6rem); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--mute)}
.aside::before{content:"> "}
.aside a{color:var(--ink-2); border-bottom:1px dashed var(--hair)}
.aside a:hover{color:var(--amber)}

/* estúdio */
.estudio{border-top:1px dashed var(--hair); padding-block:clamp(3rem,8vw,5.5rem)}
.estudio-grid{display:grid; gap:clamp(2rem,5vw,4rem)}
@media (min-width:56rem){.estudio-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.estudio h2{font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; margin:0 0 1.3rem}
.estudio h2::before{content:"## "; color:var(--amber-2)}
.estudio .txt p{margin:0 0 1rem; color:var(--ink-2); max-width:33rem; font-size:1.02rem}
.estudio .txt p:last-child{margin:0}
.table{border:1px solid var(--hair); background:var(--bg-2)}
.table p{margin:0; display:flex; justify-content:space-between; gap:1.2rem; padding:.85rem 1.1rem; border-bottom:1px dashed var(--hair); font-size:.92rem}
.table p:last-child{border-bottom:0}
.table span{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); padding-top:.25em}
.table b{font-weight:500; color:var(--ink); text-align:right}
.estudio-grid > *, .sheet-in > *{min-width:0}
@media (max-width:30rem){
  .table p{flex-direction:column; gap:.2rem}
  .table b{text-align:left}
}

/* contato */
.contato{border-top:1px dashed var(--hair); padding-block:clamp(3rem,8vw,5.5rem)}
.contato h2{font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; margin:0 0 1.3rem}
.contato h2::before{content:"## "; color:var(--amber-2)}
.contato p{margin:0 0 .9rem; color:var(--ink-2); max-width:32rem}
.mail{font-family:var(--mono); font-size:clamp(1rem,2.2vw,1.35rem); letter-spacing:.02em; color:var(--amber); border-bottom:1px solid color-mix(in srgb, var(--amber) 40%, transparent)}
.mail:hover{color:var(--ink); border-color:var(--ink)}
.note{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--mute)}

.foot{border-top:1px dashed var(--hair); padding:1.8rem 0 3rem; font-size:.8rem; color:var(--mute)}
.flinks{display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1rem}
.flinks a{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.flinks a::before{content:"/ "; color:var(--amber-2)}
.flinks a:hover{color:var(--amber)}
.foot p{margin:0 0 .45rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brand::after{animation:none}
  .sheet,.sheet h3{transition:none}
}