/* ============================================================
   DNAi HOUSE — THE BACKBONE  (Dapper × DNAi system)
   Every page inherits this. A product page expresses itself by
   overriding --accent to its own hue. One genome, many strands.
   ============================================================ */

:root{
  --bg:      #ebebe8;
  --card:    #ffffff;
  --tile:    #f1f1ee;
  --ink:     #131311;
  --ink-60:  rgba(19,19,17,.62);
  --ink-40:  rgba(19,19,17,.4);
  --hair:    rgba(19,19,17,.13);

  --accent:  #ff4400;          /* house orange — products override this */
  --accent-2:#e03a00;
  --on-accent:#ffffff;         /* text/icon color on accent */

  --r:    16px;
  --sans: "Archivo", -apple-system, sans-serif;
  --serif:"Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", Menlo, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.55; overflow-x:hidden;
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, nav, footer{ position:relative; z-index:1; }
::selection{ background:var(--accent); color:var(--on-accent); }

.wrap{ max-width:1280px; margin:0 auto; padding-inline:clamp(18px,4vw,56px); }
.mono-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); }

/* ---------- floating pill nav ---------- */
.navbar{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:8px;
  background:var(--card); border-radius:999px; padding:10px 12px 10px 20px;
  box-shadow:0 10px 40px rgba(19,19,17,.1);
  width:min(1060px, calc(100% - 32px));
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.03em; color:var(--ink); text-decoration:none; }
.brand img{ width:26px; height:26px; }
.brand i{ font-style:normal; color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a.lnk{ position:relative; color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem; }
.nav-links a.lnk::after{ content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--accent); transition:right .3s var(--ease); }
.nav-links a.lnk:hover::after{ right:0; }
.talk{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; font-size:.95rem; }
@media (max-width:820px){ .nav-links a.lnk{ display:none; } }

/* ---------- the arrow square (signature interaction) ---------- */
.sq{ width:38px; height:38px; border-radius:10px; background:var(--accent); display:grid; place-items:center; position:relative; overflow:hidden; flex:none; transition:background .25s; }
.sq svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.sq svg path{ stroke:var(--on-accent); }
.sq .fly{ position:absolute; transform:translate(-150%,150%); }
a:hover > .sq, .sq:hover{ background:var(--accent-2); }
a:hover > .sq svg:first-child, .sq:hover svg:first-child{ transform:translate(150%,-150%); }
a:hover > .sq .fly, .sq:hover .fly{ transform:translate(0,0); }

/* ---------- chip eyebrow w/ pixel-tile glyph ---------- */
.chip{ display:inline-flex; align-items:center; gap:10px; background:var(--card); border-radius:999px; padding:8px 16px 8px 11px; font-weight:600; font-size:.92rem; box-shadow:0 4px 18px rgba(19,19,17,.06); text-decoration:none; color:var(--ink); }
.chip a{ color:inherit; }
.px{ width:16px; height:16px; position:relative; flex:none; }
.px::before, .px::after{ content:""; position:absolute; width:7px; height:7px; background:var(--ink); }
.px::before{ left:0; bottom:0; }
.px::after{ right:0; top:0; background:var(--accent); }

/* ---------- type ---------- */
h1,h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; line-height:1.0; margin:0; }
h1{ font-size:clamp(2.7rem,7vw,6rem); }
h2{ font-size:clamp(2rem,4.6vw,3.8rem); }
.it{ font-family:var(--serif); font-style:italic; font-weight:480; letter-spacing:-.01em; }
.sub{ font-size:clamp(1.02rem,1.4vw,1.22rem); color:var(--ink); font-weight:600; max-width:44ch; }
.sub.soft{ color:var(--ink-60); font-weight:500; }
.discover-link{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-weight:700; text-decoration:none; }

/* ---------- sequence ticker ---------- */
.seq{ overflow:hidden; border-block:1px solid var(--hair); padding-block:12px; background:var(--bg); }
.seq-track{ display:flex; width:max-content; animation:seqmove 42s linear infinite; font-family:var(--mono); font-size:.8rem; letter-spacing:.32em; color:var(--ink-60); white-space:nowrap; }
.seq:hover .seq-track{ animation-play-state:paused; }
.seq-track b{ color:var(--accent); font-weight:700; }
@keyframes seqmove{ to{ transform:translateX(-50%);} }

/* ---------- cards ---------- */
.card{ background:var(--card); border-radius:var(--r); padding:26px; transition:transform .35s var(--ease), box-shadow .35s; }
.card--hover:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(19,19,17,.1); }
.tile{ background:var(--tile); border-radius:12px; padding:16px 14px; }
.tile b{ display:block; font-size:1.45rem; letter-spacing:-.03em; line-height:1; margin-bottom:7px; }
.tile span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-60); display:block; line-height:1.4; }
.mark{ border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; }

/* ---------- CTA ---------- */
.cta-btn{ display:inline-flex; align-items:center; gap:14px; background:var(--ink); color:#fff; border-radius:999px; padding:15px 12px 15px 28px; font-weight:700; font-size:1.05rem; text-decoration:none; transition:transform .3s var(--ease), background .3s; }
.cta-btn:hover{ transform:translateY(-3px); background:var(--accent-2); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hair); padding-block:44px 34px; }
.foot-word{ display:block; font-family:var(--sans); font-weight:800; letter-spacing:-.04em; line-height:.9; font-size:clamp(3rem,11vw,10rem); color:var(--ink); user-select:none; }
.foot-word i{ font-style:normal; color:var(--accent); }
.foot-grid{ display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; font-size:.9rem; color:var(--ink-60); margin-top:26px; }
.foot-grid a{ color:var(--ink); text-decoration:none; font-weight:600; }
.foot-grid a:hover{ color:var(--accent); }

/* ---------- reveals ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d,0)*90ms); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } .seq-track{ animation:none; } html{ scroll-behavior:auto; } }