/* ============================================================
   Alvaro Aramayo Chain — portfolio
   Palette: midnight navy · warm amber (booked) · violet (digital)
   ============================================================ */

:root{
  --ink:      #0B0E1A;
  --ink-2:    #101527;
  --raise:    #161C33;
  --line:     #232A45;
  --paper:    #E9E7F2;
  --muted:    #8A90AE;
  --amber:    #F0A742;
  --violet:   #7C6BF5;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --ease: cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

::selection{ background:var(--amber); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--amber); color:var(--ink);
  padding:.6rem 1rem; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ── page-wide scroll fx: progress bar, drifting background,
   animated edges — layered behind everything, in front of nothing ── */

.scroll-progress{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:3px;
  background:linear-gradient(90deg, var(--amber), var(--violet));
  transform:scaleX(0); transform-origin:0 0;
  pointer-events:none;
}

.bg-fx{
  position:fixed; inset:0; z-index:-3;
  overflow:hidden;
  pointer-events:none;
  transform:translate3d(0, var(--shift, 0px), 0);
}
.bg-fx__blob{
  position:absolute;
  width:52vmax; height:52vmax;
  border-radius:50%;
  filter:blur(90px);
  opacity:.16;
  will-change:transform;
}
.bg-fx__blob--a{
  top:-18vmax; left:-14vmax;
  background:radial-gradient(circle, var(--amber), transparent 68%);
  animation:blob-drift-a 26s ease-in-out infinite;
}
.bg-fx__blob--b{
  top:35vmax; right:-20vmax;
  background:radial-gradient(circle, var(--violet), transparent 68%);
  animation:blob-drift-b 32s ease-in-out infinite;
}
.bg-fx__blob--c{
  bottom:-22vmax; left:22vw;
  width:44vmax; height:44vmax;
  background:radial-gradient(circle, var(--violet), transparent 70%);
  opacity:.12;
  animation:blob-drift-a 22s ease-in-out infinite reverse;
}
@keyframes blob-drift-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vmax,4vmax) scale(1.08); }
}
@keyframes blob-drift-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vmax,-5vmax) scale(1.1); }
}

.edge-fx{
  position:fixed; top:0; bottom:0; z-index:-2;
  width:3px;
  pointer-events:none;
  opacity:.55;
  background:linear-gradient(180deg,
    transparent 0%, var(--amber) 20%, var(--violet) 50%, var(--amber) 80%, transparent 100%);
  background-size:100% 220%;
  animation:edge-shimmer 9s linear infinite;
}
.edge-fx--left{ left:0; }
.edge-fx--right{ right:0; animation-direction:reverse; }
@keyframes edge-shimmer{
  0%{ background-position:0 0; }
  100%{ background-position:0 220%; }
}

/* ── shared bits ─────────────────────────────────────────── */

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.6rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:1px; background:var(--amber); flex:none;
}

.h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.6rem,1.1rem + 2.3vw,2.9rem);
  line-height:1.12;
  letter-spacing:-.022em;
  margin:0 0 1.4rem;
  max-width:22ch;
  text-wrap:balance;
}

.section{
  padding:clamp(4.5rem,10vw,9rem) var(--pad);
  max-width:1240px;
  margin-inline:auto;
  position:relative;
}
.section + .section{ border-top:1px solid var(--line); }

/* scroll reveal */
.reveal{
  opacity:0;
  transform:perspective(1000px) translate3d(0,28px,-30px) rotateX(-8deg);
  transition:opacity .9s var(--ease) var(--d,0s),
             transform .9s var(--ease) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

/* stronger 3D entrance for cards / tiles — alternates tilt direction */
.reveal--tilt:nth-of-type(odd){ --ry-dir: -1; }
.reveal--tilt:nth-of-type(even){ --ry-dir: 1; }
.reveal--tilt{
  transform:perspective(1100px)
            translate3d(0,46px,-90px)
            rotateX(10deg)
            rotateY(calc(var(--ry-dir,-1) * 16deg))
            scale(.94);
}

/* ── nav ─────────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--pad);
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }

.nav__mark{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.16em;
  text-decoration:none;
}
.nav__slab{
  width:.85rem; height:.85rem; border-radius:3px;
  background:var(--amber);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent);
  animation:pulse 3.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,70%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); }
  35%{ box-shadow:0 0 0 7px transparent; }
}

.nav__links{ display:flex; gap:clamp(.9rem,2vw,1.9rem); }
.nav__links a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em;
  text-decoration:none; color:var(--muted);
  padding:.2rem 0;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav__links a:hover{ color:var(--paper); border-bottom-color:var(--amber); }

/* ── language switch ─────────────────────────────────────── */

.lang{
  display:flex; align-items:center;
  gap:.15rem;
  padding:.18rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb, var(--raise) 55%, transparent);
}
.lang__btn{
  appearance:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  line-height:1;
  padding:.42rem .62rem;
  border-radius:999px;
  color:var(--muted);
  background:transparent;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.lang__btn:hover{ color:var(--paper); }
.lang__btn.is-active{
  color:var(--ink);
  background:var(--amber);
  font-weight:500;
}
.lang__btn.is-active:hover{ color:var(--ink); }


/* ── hero ────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:7rem var(--pad) 4.5rem;
  overflow:hidden;
  isolation:isolate;
}

.lattice{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:-2;
  opacity:0;
  transition:opacity 1.6s ease .25s;
}
.lattice.ready{ opacity:1; }

.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 85% at 12% 42%, color-mix(in srgb, var(--ink) 88%, transparent) 0%, transparent 62%),
    linear-gradient(to top, var(--ink) 0%, transparent 42%);
  pointer-events:none;
}

.hero__inner{ max-width:min(60rem,100%); }

.hero__eyebrow span{ color:var(--paper); }

.hero__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.35rem,1.1rem + 6.6vw,5.6rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 1.6rem;
}
.hero__title em{
  font-style:normal;
  color:var(--amber);
  position:relative;
  white-space:nowrap;
}
.hero__title em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.06em;
  height:.075em;
  background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  animation:rule 1.1s var(--ease) 1.35s forwards;
}
@keyframes rule{ to{ transform:scaleX(1); } }

.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translate3d(0,105%,0);
  animation:rise 1.05s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.15s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.28s; }
.hero__title .line:nth-child(3) > span{ animation-delay:.41s; }
@keyframes rise{ to{ transform:none; } }

.hero__sub{
  max-width:34ch;
  color:var(--muted);
  font-size:clamp(1rem,.94rem + .4vw,1.2rem);
  margin:0 0 2.2rem;
  opacity:0; animation:fade .9s var(--ease) .72s forwards;
}
@keyframes fade{ to{ opacity:1; } }

.hero__actions{
  display:flex; flex-wrap:wrap; gap:.7rem;
  opacity:0; animation:fade .9s var(--ease) .9s forwards;
}

.btn{
  font-family:var(--mono);
  font-size:.8rem; letter-spacing:.08em;
  text-decoration:none;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1px solid var(--line);
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:500; }
.btn--solid:hover{ background:#ffbe63; border-color:#ffbe63; }
.btn--ghost:hover{ border-color:var(--paper); }

.hero__legend{
  position:absolute; right:var(--pad); bottom:2rem;
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  opacity:0; animation:fade 1s var(--ease) 1.6s forwards;
}
.key{ width:.7rem; height:.45rem; border-radius:2px; display:inline-block; }
.key--open{ background:var(--line); }
.key--booked{ background:var(--amber); margin-left:.9rem; }

/* ── about ───────────────────────────────────────────────── */

.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:clamp(1.8rem,5vw,4.5rem);
  align-items:start;
}

.portrait{ margin:0; position:relative; padding:5px; }
.portrait img{
  position:relative; z-index:1;
  border-radius:5px;
  border:1px solid var(--line);
}
.portrait__ring{
  content:"";
  position:absolute; inset:0;
  border-radius:9px;
  padding:2px;
  background:conic-gradient(from 0deg,
    var(--amber) 0deg, var(--violet) 120deg, transparent 200deg, var(--amber) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:ring-spin 8s linear infinite;
  pointer-events:none;
}
@keyframes ring-spin{ to{ transform:rotate(360deg); } }
.portrait::before{
  content:"";
  position:absolute; inset:auto auto -.7rem -.7rem;
  width:38%; height:32%;
  border-left:1px solid var(--amber);
  border-bottom:1px solid var(--amber);
  pointer-events:none;
}
.portrait figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  margin-top:.95rem;
}

.lede{ color:var(--muted); max-width:52ch; margin:0 0 2.2rem; }

.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.facts li{
  display:grid;
  grid-template-columns:minmax(7.5rem,10rem) 1fr;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.facts span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  padding-top:.22rem;
}

.highlights{
  list-style:none; margin:2.2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px;
  overflow:hidden;
}
.highlight{
  background:var(--ink); padding:1.4rem 1.3rem 1.6rem;
  transition:background .4s var(--ease);
}
.highlight:hover{ background:var(--ink-2); }
.highlight__num{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  color:var(--amber); margin-bottom:.7rem;
}
.highlight h3{
  font-family:var(--display); font-weight:500; font-size:1rem;
  margin:0 0 .5rem; letter-spacing:-.01em;
}
.highlight p{ margin:0; color:var(--muted); font-size:.85rem; line-height:1.55; }

/* pointer-driven 3D tilt (see app.js) — no-op until JS sets --rx/--ry */
[data-tilt]{
  --rx:0deg; --ry:0deg; --lift:0px;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition:transform .4s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}

/* ── work ────────────────────────────────────────────────── */

.work__head{ max-width:26ch; }

.case{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);
  align-items:start;
  margin-top:2.5rem;
}

.case__frame{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
  transition:transform .4s var(--ease), border-color .6s var(--ease);
}
.case__frame:hover{ --lift:-4px; border-color:#2f3860; }

.case__chrome{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem .9rem;
  background:var(--raise);
  border-bottom:1px solid var(--line);
}
.dot{ width:.5rem; height:.5rem; border-radius:50%; background:#2c3454; }
.case__url{
  margin-left:.7rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--muted);
}
.case__shot{ width:100%; display:block; }

.case__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0 0 .8rem;
}
.case__what{ color:var(--muted); margin:0 0 1.7rem; }

.spec{ margin:0 0 1.7rem; display:grid; gap:.1rem; border-top:1px solid var(--line); }
.spec > div{
  display:grid; grid-template-columns:6.5rem 1fr; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
}
.spec dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.spec dd{ margin:0; font-size:.92rem; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.4rem; padding:0; }
.chips li{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  padding:.38rem .7rem;
  border:1px solid var(--line); border-radius:999px;
  color:var(--muted);
}

/* ── live-site link on a case study ──────────────────────── */

.case__live{ margin:1.15rem 0 0; }
.livelink{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem .95rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb, var(--raise) 55%, transparent);
  text-decoration:none;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--paper);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.livelink:hover{
  border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 10%, transparent);
  transform:translateY(-1px);
}
.livelink__dot{
  width:.45rem; height:.45rem; border-radius:50%;
  background:#3ddc97;
  box-shadow:0 0 0 0 color-mix(in srgb, #3ddc97 60%, transparent);
  animation:livepulse 2.6s var(--ease) infinite;
  flex:none;
}
@keyframes livepulse{
  0%,70%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, #3ddc97 55%, transparent); }
  35%{ box-shadow:0 0 0 6px transparent; }
}
.livelink__url{ color:var(--amber); }

@media (max-width:420px){
  .livelink{ flex-wrap:wrap; row-gap:.25rem; }
}

.case__note{
  font-size:.82rem; color:var(--muted);
  border-left:2px solid var(--violet);
  padding-left:.85rem; margin:0;
}

/* ── site-preview demo: a browsable recreation of the real page ──
   the frame has its own sticky nav + a scrollable body, both lit
   with Salta Sistemas' real tokens (not the portfolio's dark palette) */

.demo{
  --sp-bg:     #ffffff;
  --sp-bg-alt: #f8fafc;
  --sp-text:   #0f172a;
  --sp-muted:  #64748b;
  --sp-border: #e5e7eb;
  --sp-accent: #2563eb;
}

/* each demo recreates its own project's real palette, not the portfolio's */
#mochecDemo{
  --sp-bg:     #fbf9f3;
  --sp-bg-alt: #f7f3e8;
  --sp-text:   #2c2115;
  --sp-muted:  #7a6650;
  --sp-border: #e7d8ad;
  --sp-accent: #3c6b47;
}

.demo__scroll{
  height:24rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--sp-border) var(--sp-bg);
}
.demo__scroll::-webkit-scrollbar{ width:8px; }
.demo__scroll::-webkit-scrollbar-track{ background:var(--sp-bg); }
.demo__scroll::-webkit-scrollbar-thumb{ background:var(--sp-border); border-radius:999px; }

.site-preview{
  background:var(--sp-bg);
  color:var(--sp-text);
  font-family:var(--body);
}

.site-preview__nav{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem;
  padding:.9rem 1.4rem;
  background:color-mix(in srgb, var(--sp-bg) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sp-border);
  font-size:.72rem;
}
.site-preview__logo{
  display:flex; align-items:center; gap:.4rem;
  font-weight:600; letter-spacing:-.01em; color:var(--sp-text);
}
.site-preview__dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--sp-accent); flex:none;
}
.site-preview__navlinks{ display:flex; gap:.9rem; }
.site-preview__navlinks button{
  font:inherit; color:var(--sp-muted);
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .2s var(--ease);
}
.site-preview__navlinks button:hover{ color:var(--sp-accent); }

.sp-hero, .sp-block{ padding:1.5rem 1.4rem; }
.sp-block + .sp-block{ border-top:1px solid var(--sp-border); }

.site-preview__eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sp-accent);
  margin:0 0 .6rem;
}
.site-preview__title{
  font-family:var(--display); font-weight:600;
  font-size:1.35rem; letter-spacing:-.02em; line-height:1.15;
  margin:0 0 .6rem;
}
.site-preview__lead{
  color:var(--sp-muted); font-size:.86rem; line-height:1.55;
  margin:0 0 1.3rem; max-width:34ch;
}

.site-preview__actions{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.1rem; }
.site-preview__btn{
  font:inherit; font-size:.76rem; font-weight:500;
  padding:.55rem 1rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
}
.site-preview__btn--solid{ background:var(--sp-accent); color:#fff; }
.site-preview__btn--outline{ border-color:var(--sp-border); color:var(--sp-text); background:none; }

.sp-trust{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem;
  margin:0; font-size:.72rem; color:var(--sp-muted);
}

.site-preview__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:.6rem;
}
.site-preview__card{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  padding:.9rem .9rem;
  border:1px solid var(--sp-border);
  border-radius:8px;
  font-size:.8rem; font-weight:500;
  color:var(--sp-text);
  background:var(--sp-bg-alt);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.site-preview__card:hover{ border-color:var(--sp-accent); transform:translateY(-2px); }
.sp-icon{
  display:flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem;
  border-radius:6px;
  color:var(--sp-accent);
  background:color-mix(in srgb, var(--sp-accent) 10%, transparent);
}
.sp-icon svg{ width:1.05rem; height:1.05rem; }

.sp-portfolio{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:.7rem;
}
.sp-portfolio__card{
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.76rem;
}
.sp-portfolio__card strong{ font-size:.82rem; color:var(--sp-text); }
.sp-portfolio__card small{ color:var(--sp-muted); }
.sp-portfolio__thumb{
  display:block; height:5rem; border-radius:8px;
  border:1px solid var(--sp-border);
}
.sp-portfolio__thumb--a{ background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.sp-portfolio__thumb--b{ background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.sp-portfolio__thumb--c{ background:linear-gradient(135deg,#047857,#065f46); }
.sp-portfolio__thumb--mc-a{ background:linear-gradient(135deg,#6e8f55,#3c6b47); }
.sp-portfolio__thumb--mc-b{ background:linear-gradient(135deg,#c9a24b,#a9822f); }
.sp-portfolio__thumb--mc-c{ background:linear-gradient(135deg,#3c6b47,#1b2e20); }

.sp-contact__title{
  font-family:var(--display); font-weight:600; font-size:1.1rem;
  margin:0 0 .5rem; color:var(--sp-text);
}

.sp-footer{
  padding:1.1rem 1.4rem;
  border-top:1px solid var(--sp-border);
  font-size:.68rem; color:var(--sp-muted);
}

/* ── "coming soon" placeholder demo — a third, deliberately
   minimal register next to the two full sites above ───────── */

#soonDemo .demo__scroll{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  height:24rem;
  padding:2rem 1.6rem;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, #2FE3C4 16%, transparent), transparent 60%),
    #0B0B0F;
  color:#F4F4F5;
  scrollbar-color:#2b2b32 #0B0B0F;
}
#soonDemo .demo__scroll::-webkit-scrollbar-track{ background:#0B0B0F; }
#soonDemo .demo__scroll::-webkit-scrollbar-thumb{ background:#2b2b32; }

.soon__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:#2FE3C4;
  border:1px solid color-mix(in srgb, #2FE3C4 40%, transparent);
  border-radius:999px;
  padding:.4rem .9rem;
  margin-bottom:1.4rem;
}
.soon__dot{
  width:.4rem; height:.4rem; border-radius:50%;
  background:#2FE3C4;
  box-shadow:0 0 0 0 color-mix(in srgb, #2FE3C4 55%, transparent);
  animation:soon-pulse 2.6s ease infinite;
}
@keyframes soon-pulse{
  0%,70%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, #2FE3C4 55%, transparent); }
  35%{ box-shadow:0 0 0 6px transparent; }
}

.soon__mark{
  font-size:1.6rem; color:#2FE3C4;
  margin-bottom:1rem;
  animation:soon-spin 7s linear infinite;
  display:inline-block;
}
@keyframes soon-spin{ to{ transform:rotate(360deg); } }

.soon__title{
  font-family:var(--display); font-weight:600;
  font-size:1.5rem; letter-spacing:-.02em; line-height:1.2;
  margin:0 0 .7rem;
  max-width:20ch;
}
.soon__lead{
  color:#9A9AA5; font-size:.86rem; line-height:1.55;
  margin:0 0 1.6rem; max-width:30ch;
}

.soon__form{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center;
  margin-bottom:1.6rem;
}
.soon__form input{
  font:inherit; font-size:.82rem;
  padding:.65rem .9rem;
  border-radius:8px;
  border:1px solid #26262E;
  background:#151519; color:#F4F4F5;
  width:12rem;
}
.soon__form input::placeholder{ color:#6B6B75; }
.soon__form button{
  font:inherit; font-size:.78rem; font-weight:600;
  padding:.65rem 1.1rem;
  border-radius:8px;
  border:0;
  background:#2FE3C4; color:#06110E;
}

.soon__foot{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  color:#6B6B75; margin:0;
}

/* ── toolkit ─────────────────────────────────────────────── */

.stack{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-top:2.5rem;
}
.stack__group{
  background:var(--ink);
  padding:1.5rem 1.3rem 1.8rem;
  transition:background .45s var(--ease), opacity .85s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s);
}
.stack__group:hover{ background:var(--ink-2); }
.stack__group h3{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
  margin:0 0 1.1rem; font-weight:500;
}
.tools{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));
  gap:.9rem;
}
.tool{
  --brand: var(--amber);
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  padding:.9rem .8rem;
  border-radius:10px;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.tool:hover{ background:color-mix(in srgb, var(--raise) 70%, transparent); transform:translateY(-3px); }

.tool__icon{
  display:flex; align-items:center; justify-content:center;
  width:3.4rem; height:3.4rem;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55);
  animation:tool-float 5s ease-in-out infinite;
  animation-delay:calc(var(--fi,0) * .35s);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tool__icon svg{ width:2.05rem; height:2.05rem; }
.tool:nth-child(1) .tool__icon{ --fi:0; }
.tool:nth-child(2) .tool__icon{ --fi:1; }
.tool:nth-child(3) .tool__icon{ --fi:2; }
.tool:nth-child(4) .tool__icon{ --fi:3; }
.tool:hover .tool__icon{
  transform:scale(1.08);
  box-shadow:
    0 14px 26px -12px rgba(0,0,0,.6),
    0 0 0 7px color-mix(in srgb, var(--brand) 30%, transparent);
}
@keyframes tool-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

.tool__label{
  font-size:.85rem;
  font-weight:500;
  color:var(--paper);
  line-height:1.3;
}

/* ── contact ─────────────────────────────────────────────── */

.contact{ text-align:left; }
.contact__head{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2rem,1.2rem + 4.5vw,4.4rem);
  letter-spacing:-.035em; line-height:1.05;
  margin:0 0 2.5rem;
  max-width:18ch;
}

.contact__links{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.clink{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem;
  background:var(--ink);
  padding:1.3rem .2rem;
  text-decoration:none;
  transition:padding .4s var(--ease), background .4s var(--ease),
             opacity .85s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s);
}
.clink:hover{ background:var(--ink-2); padding-inline:1rem .2rem; }
.clink__icon{
  display:flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; flex:none;
  border-radius:9px;
  background:var(--raise);
  color:var(--paper);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.clink__icon svg{ width:1.35rem; height:1.35rem; }
.clink:hover .clink__icon{
  background:var(--amber); color:var(--ink);
  transform:rotate(-6deg) scale(1.06);
}
.clink__label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  min-width:5rem;
}
.clink__value{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,.95rem + .8vw,1.6rem);
  letter-spacing:-.015em;
  word-break:break-word;
}
.clink:hover .clink__value{ color:var(--amber); }

.sig{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  margin:2.5rem 0 0;
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width:860px){
  .about__grid{ grid-template-columns:1fr; }
  .portrait{ max-width:19rem; }
  .case{ grid-template-columns:1fr; }
  .hero__legend{ display:none; }
  .facts li{ grid-template-columns:1fr; gap:.15rem; }
  .facts span{ padding-top:0; }
}

@media (max-width:640px){
  /* two rows: wordmark + language on top, section links underneath —
     keeps everything legible instead of squeezing one crowded row */
  .nav{
    flex-wrap:wrap;
    row-gap:.45rem;
    gap:.6rem;
    padding:.7rem 1rem .6rem;
  }
  .nav__mark{ font-size:.74rem; letter-spacing:.12em; }
  .nav__links{
    order:3;
    flex:1 0 100%;
    justify-content:center;
    gap:clamp(.8rem,4.5vw,1.5rem);
  }
}

@media (max-width:520px){
  .nav__links{ gap:.85rem; }
  .nav__links a{ font-size:.7rem; }
  .lang__btn{ padding:.38rem .5rem; font-size:.63rem; letter-spacing:.08em; }
  .spec > div{ grid-template-columns:5.5rem 1fr; }
  .demo__inner{ min-height:23rem; }
  .demo__slots{ grid-template-columns:repeat(auto-fill,minmax(3.9rem,1fr)); }
}

@media (max-width:400px){
  .nav__links a{ font-size:.66rem; letter-spacing:.05em; }
}

/* ── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    transition-duration:.001s !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .line > span{ transform:none; }
  .lattice{ opacity:1; }
}