/* ============================================================
   Hornstack Labs — Brand 2.1 site stylesheet
   Tokens per .claude/skills/hornstack-branding (Blue system)
   ============================================================ */
:root {
  --blue:#00AEEF;   /* Horizon Blue — accent: fills, large text, graphics only */
  --depth:#036A93;  /* Depth Blue — links, small UI, hovers. AA on white */
  --tint:#CCEFFC;   /* Sky Tint */
  --ink:#111827;    /* headlines & body */
  --navy:#0A1A2F;   /* Night Navy — dark sections */
  --mist:#F3F6F9;
  --slate:#4B5563;
  --line:#E5E9EF;
  --signal:#D97757; /* Signal Orange — live traffic in diagrams, nothing else */
  --r-sm:12px; --r-lg:20px; --r-full:999px;
  --t-fast:150ms; --t-base:220ms; --ease:cubic-bezier(.25,.6,.35,1);
  --font:'Satoshi',-apple-system,'Helvetica Neue',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); color:var(--ink); background:#fff; font-size:16px; line-height:1.7; }
img { max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 48px; }
section { padding:96px 0; position:relative; }

/* type */
.display { font-size:64px; font-weight:500; line-height:1.06; letter-spacing:-0.02em; }
h2.title { font-size:42px; font-weight:500; line-height:1.15; letter-spacing:-0.015em; margin-bottom:20px; }
h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
.lede { font-size:19px; color:var(--slate); max-width:680px; }
.accent { color:var(--blue); }
a.textlink { color:var(--depth); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* eyebrow chip */
.eyebrow { display:inline-flex; align-items:center; margin-bottom:24px; font-size:12.5px; font-weight:700; }
.eyebrow .tag { background:var(--blue); color:#fff; border-radius:var(--r-full) 0 0 var(--r-full); padding:5px 12px 5px 14px; }
.eyebrow .lab { background:var(--tint); color:var(--ink); border-radius:0 var(--r-full) var(--r-full) 0; padding:5px 16px 5px 12px; }
.eyebrow.dark .lab { background:rgba(255,255,255,.14); color:#fff; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-size:15px; font-weight:700; border-radius:var(--r-full); padding:14px 28px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:all var(--t-base) var(--ease); }
.btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--depth); transform:translateY(-1px); }
.btn-outline { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-outline:hover { border-color:var(--ink); transform:translateY(-1px); }
.btn-ghost-dark { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-dark:hover { background:rgba(255,255,255,.1); }
.btn-white { background:#fff; color:var(--depth); }
.btn-white:hover { transform:translateY(-1px); }

/* nav */
nav.site { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
nav.site .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; }
nav.site img { height:28px; display:block; }
nav.site .links { display:flex; gap:30px; font-size:14.5px; font-weight:500; }
nav.site .links a { color:var(--slate); text-decoration:none; transition:color var(--t-fast) var(--ease); }
nav.site .links a:hover { color:var(--depth); }
nav.site .links a.active { color:var(--depth); font-weight:700; }
nav.site .btn { padding:11px 22px; font-size:14px; }

/* hero */
.hero { padding:120px 0 110px; overflow:hidden; }
.hero .hornfield { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero .wrap { position:relative; z-index:1; }
.hero .cta-row { display:flex; gap:14px; margin-top:38px; }

/* stat row */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
.stat { padding:32px 12px; border-radius:var(--r-sm); background:var(--mist); }
.stat b { display:block; font-size:40px; font-weight:700; color:var(--blue); letter-spacing:-0.01em; line-height:1.15; }
.stat span { font-size:14px; color:var(--slate); font-weight:500; }
.stat.dark { background:var(--navy); }
.stat.dark b { color:#7FD8F7; }
.stat.dark span { color:rgba(255,255,255,.7); }

/* sectors strip */
.sectors { display:flex; justify-content:space-between; align-items:center; padding:26px 40px; border:1px solid var(--line); border-radius:var(--r-lg); flex-wrap:wrap; gap:14px; }
.sectors span { font-size:13.5px; font-weight:700; letter-spacing:.12em; color:#9CA3AF; text-transform:uppercase; }

/* cards */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
a.card { display:block; color:inherit; text-decoration:none; } /* whole-card links (contact channels) */
.card { border-radius:var(--r-lg); padding:32px 28px; transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,26,47,.10); }
.card.light { background:#fff; border:1px solid var(--line); }
.card.tint { background:var(--tint); }
.card.dark { background:var(--navy); color:#fff; }
.card .q { font-size:19px; font-weight:500; line-height:1.35; display:block; margin-bottom:10px; }
.card p { font-size:14.5px; color:var(--slate); }
.card.dark p { color:rgba(255,255,255,.72); }
.card .goto { display:inline-block; margin-top:14px; font-size:14px; font-weight:700; color:var(--depth); text-decoration:none; }
.card.dark .goto { color:#7FD8F7; }
.card .icp { width:46px; height:46px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:var(--tint); color:var(--depth); }
.card.dark .icp { background:rgba(255,255,255,.1); color:#7FD8F7; }
.card.tint .icp { background:#fff; }
.card .icp svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.status-pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:var(--r-full); padding:3px 11px; background:var(--mist); color:var(--slate); border:1px solid var(--line); }
.status-pill.live { background:#E7F6EC; color:#137A3D; border:none; }
.status-pill.dev { background:#FDF2E3; color:#9A5B13; border:none; }

/* section variants */
.sec-mist { background:var(--mist); }
.sec-blue { background:var(--blue); color:#fff; }
.sec-blue .lede { color:rgba(255,255,255,.88); }
.sec-blue h2.title { color:#fff; }
.sec-navy { background:var(--navy); color:#fff; }
.sec-navy .lede { color:rgba(255,255,255,.72); }
.sec-navy h2.title { color:#fff; }

/* platform blocks */
.plat { display:grid; grid-template-columns:280px 1fr; gap:44px; padding:52px 0; border-bottom:1px solid var(--line); align-items:start; }
.plat:last-of-type { border-bottom:none; }
.plat .pname { position:sticky; top:100px; }
.plat .pname .wname { font-size:30px; font-weight:700; letter-spacing:-0.01em; }
.plat .pname .dlabel { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--depth); margin-top:6px; }
.plat h3 { font-size:26px; font-weight:500; letter-spacing:-0.01em; margin-bottom:14px; }
.plat p { color:var(--slate); max-width:620px; }
.plat .trust { margin-top:16px; font-size:14px; color:var(--depth); background:var(--tint); border-radius:var(--r-sm); padding:12px 18px; display:inline-block; }
.plat .rule { margin-top:16px; font-size:15px; font-weight:700; }

/* numbered steps */
.step { display:grid; grid-template-columns:110px 1fr; gap:36px; padding:44px 0; border-bottom:1px solid var(--line); }
.step:last-of-type { border-bottom:none; }
.step .n { font-size:44px; font-weight:700; color:var(--blue); line-height:1; letter-spacing:-0.02em; }
.step h3 { font-size:23px; font-weight:500; margin-bottom:8px; }
.step p { color:var(--slate); max-width:640px; }
.step p b { color:var(--ink); }

/* duo panels */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel { border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; background:#fff; }
.panel.dark { background:var(--navy); color:#fff; border:none; }
.panel.dark p { color:rgba(255,255,255,.75); }
.panel p { font-size:14.5px; color:var(--slate); }
.panel .ph { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--depth); margin-bottom:8px; }
.panel.dark .ph { color:#7FD8F7; }

/* case studies */
.case { padding:44px 0; border-bottom:1px solid var(--line); }
.case:last-of-type { border-bottom:none; }
.case .chead { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.case h3 { font-size:24px; font-weight:500; margin:0; }
.case p { color:var(--slate); max-width:720px; }
.case p b { color:var(--ink); }

/* forms */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; max-width:760px; }
.form-grid .full { grid-column:1 / -1; }
label.f { display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); margin-bottom:7px; }
input.f, textarea.f, select.f { width:100%; font-family:var(--font); font-size:15.5px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 16px; transition:border-color var(--t-fast) var(--ease); }
input.f:focus, textarea.f:focus, select.f:focus { outline:none; border-color:var(--blue); }
textarea.f { min-height:130px; resize:vertical; }

/* footer */
footer.site { background:var(--navy); color:#fff; padding:72px 0 0; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:56px; }
footer.site h4 { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:18px; }
footer.site a { display:block; color:rgba(255,255,255,.78); text-decoration:none; font-size:14.5px; margin-bottom:10px; }
footer.site a:hover { color:#7FD8F7; }
footer.site .blurb { font-size:14.5px; color:rgba(255,255,255,.65); max-width:280px; }
footer.site img { height:30px; margin-bottom:18px; }
footer.site .base { border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:13px; color:rgba(255,255,255,.45); display:flex; justify-content:space-between; }

/* note */
.note { background:var(--mist); border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 22px; font-size:14.5px; color:var(--slate); }
.note b { color:var(--ink); }

/* ===== diagrams (platforms page) ===== */
.diagram { border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:26px 24px 16px; margin-top:34px; }
.diagram svg { width:100%; height:auto; display:block; }
.diagram svg text { font-family:var(--font); }
.diagram .cap-d { text-align:center; font-size:12.5px; color:#9CA3AF; font-weight:500; margin-top:12px; }
/* nodes & hub in the brand illustration language: line-drawn, 1.75/2px strokes, one hand */
.node-rect { fill:#fff; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
.node-ic { stroke:var(--depth); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.node-name { font-weight:700; font-size:13.5px; fill:var(--ink); }
.node-sub { font-weight:700; font-size:8px; fill:var(--depth); letter-spacing:.1em; }
.dlink { stroke:var(--blue); stroke-width:1.5; stroke-dasharray:6 8; opacity:.45; stroke-linecap:round; }
.hub-circ { fill:#fff; stroke:var(--ink); stroke-width:2; }
.hub-ring { fill:none; stroke:var(--blue); stroke-width:1.5; stroke-dasharray:4 10; opacity:.8; stroke-linecap:round; transform-origin:center; transform-box:fill-box; animation:spinslow 30s linear infinite; }
@keyframes spinslow { to { transform:rotate(360deg); } }
.hub-name { font-weight:700; font-size:21px; fill:var(--ink); letter-spacing:-0.01em; }
.hub-l2 { font-weight:500; font-size:10.5px; fill:var(--slate); }
.hub-l3 { font-weight:700; font-size:8px; fill:var(--depth); letter-spacing:.12em; }
.hubpulse { animation:hubpulse 3s ease-in-out infinite; }
@keyframes hubpulse { 0%,100% { opacity:.35; } 50% { opacity:.7; } }
.packet { fill:var(--signal); stroke:rgba(10,26,47,.45); stroke-width:1.25; }
.p1 { animation:trv1 5s ease-in-out infinite; }
.p2 { animation:trv2 5.6s ease-in-out .8s infinite; }
.p3 { animation:trv3 4.4s ease-in-out 1.6s infinite; }
.p4 { animation:trv4 6s ease-in-out 2.3s infinite; }
.p5 { animation:trv5 5.2s ease-in-out 3s infinite; }
.p6 { animation:trv6 4.8s ease-in-out .4s infinite; }
.p7 { animation:trv7 5.4s ease-in-out 2.9s infinite; }
@keyframes trv1 { 0%{transform:translate(276px,351px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(724px,351px);opacity:1;} 100%{transform:translate(724px,351px);opacity:0;} }
@keyframes trv2 { 0%{transform:translate(400px,507px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(680px,157px);opacity:1;} 100%{transform:translate(680px,157px);opacity:0;} }
@keyframes trv3 { 0%{transform:translate(320px,157px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(276px,351px);opacity:1;} 100%{transform:translate(276px,351px);opacity:0;} }
@keyframes trv4 { 0%{transform:translate(724px,351px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(600px,507px);opacity:1;} 100%{transform:translate(600px,507px);opacity:0;} }
@keyframes trv5 { 0%{transform:translate(500px,70px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(400px,507px);opacity:1;} 100%{transform:translate(400px,507px);opacity:0;} }
@keyframes trv6 { 0%{transform:translate(680px,157px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(500px,70px);opacity:1;} 100%{transform:translate(500px,70px);opacity:0;} }
@keyframes trv7 { 0%{transform:translate(600px,507px);opacity:0;} 8%{opacity:1;} 46%{transform:translate(500px,300px);opacity:1;} 54%{transform:translate(500px,300px);opacity:1;} 92%{transform:translate(320px,157px);opacity:1;} 100%{transform:translate(320px,157px);opacity:0;} }

/* scroll reveal */
.fade { opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.fade.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity:1 !important; transform:none !important; transition:none !important; }
  .packet { animation:none !important; opacity:0; }
  .hubpulse { animation:none !important; }
  .btn, .card { transition:none !important; }
}

/* ============================================================
   Responsive system — mobile <640, tablet 640–1023, desktop ≥1024
   Desktop rendering is unchanged; rules below only subtract.
   ============================================================ */

/* hamburger (hidden on desktop) */
.nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:stretch; gap:5px; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:10px; }
.nav-toggle span { display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease); }
nav.site.open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
nav.site.open .nav-toggle span:nth-child(2) { opacity:0; }
nav.site.open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===== tablet and below ===== */
@media (max-width: 1023px) {
  .wrap { padding:0 28px; }
  section { padding:72px 0; }
  .hero { padding:84px 0 72px; }
  .display { font-size:48px; }
  h2.title { font-size:32px; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .stat-row { grid-template-columns:1fr 1fr; }
  footer.site .cols { grid-template-columns:1fr 1fr; }
  .plat { grid-template-columns:1fr; gap:16px; }
  .plat .pname { position:static; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
  .plat .pname .wname { font-size:26px; }
}

/* ===== collapse nav + swipeable diagrams ===== */
@media (max-width: 899px) {
  nav.site .links { display:none; }
  nav.site .btn { margin-left:auto; }
  .nav-toggle { display:flex; }
  nav.site.open .links {
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:72px; left:0; right:0; z-index:60;
    background:#fff; border-bottom:1px solid var(--line);
    padding:10px 28px 20px; box-shadow:0 18px 34px rgba(10,26,47,.09);
  }
  nav.site.open .links a { padding:11px 0; font-size:16px; }
  .plat > div, .plat .pname { min-width:0; } /* let grid children shrink so diagrams scroll inside, not blow out the page */
  /* only the SVG swipes; caption stays outside, centered. Scroll area bleeds to card edges for max visible diagram */
  .diagram { padding:14px 14px 12px; }
  .dscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dscroll svg { min-width:600px; }
  .diagram .cap-d { padding:0 10px; }
  .sectors { justify-content:center; gap:10px 20px; }
}

/* ===== mobile ===== */
@media (max-width: 639px) {
  .wrap { padding:0 20px; }
  nav.site .wrap { padding:0 16px; }
  nav.site img { height:24px; }
  nav.site .btn { padding:9px 16px; font-size:13px; }
  nav.site.open .links { padding:8px 20px 18px; }
  section { padding:56px 0; }
  .hero { padding:60px 0 52px; }
  .display { font-size:37px; }
  h2.title { font-size:27px; }
  .lede { font-size:16.5px; }
  .hero .cta-row { flex-direction:column; align-items:stretch; }
  .hero .cta-row .btn { justify-content:center; }
  .card-grid { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:1fr 1fr; gap:10px; }
  .stat { padding:24px 10px; }
  .stat b { font-size:29px; }
  .stat span { font-size:12.5px; }
  .sectors { padding:18px 20px; }
  .sectors span { font-size:11.5px; }
  .duo { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  footer.site .cols { grid-template-columns:1fr; gap:30px; }
  footer.site .base { flex-direction:column; gap:6px; text-align:center; }
  .step { grid-template-columns:1fr; gap:6px; padding:32px 0; }
  .step .n { font-size:30px; }
  .case .chead { flex-wrap:wrap; gap:10px; }
  .case h3 { font-size:20px; }
  .plat { padding:36px 0; }
  .eyebrow .lab { max-width:70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}