/* ============================================================
   Mixcodev site stylesheet
   Extracted from the homepage comp (R3 refactor). Shared across
   future pages: design tokens first, then general element resets,
   then section-by-section rules with short comments.
   ============================================================ */

/* ============ Design tokens ============ */
:root{
  --navy:#14243D;
  --navy-deep:#0D1626;
  --navy-soft:#1D3153;
  --cobalt:#2E6BE6;
  --cobalt-ink:#245CC9;
  --cobalt-on-dark:#8FB0F4;
  --orange:#E8531D;
  --orange-deep:#C9420F;
  --amber:#F6A623;
  --sky:#C9DCEE;
  --sky-deep:#A9C2DC;
  --paper:#F7F5F1;
  --paper-warm:#FBEEE0;
  --gray:#8E9298;
  --gray-text:#666B73;
  --on-navy-secondary:#B9C6D9;
  --health:#4E8B6B;
  --white:#FFFFFF;

  --font-display:'Bricolage Grotesque', ui-sans-serif, sans-serif;
  --font-body:'Schibsted Grotesk', ui-sans-serif, sans-serif;
  --font-mono:'Martian Mono', ui-monospace, monospace;

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;

  --shadow-sm: 0 2px 6px rgba(20,36,61,0.08);
  --shadow-md: 0 14px 34px rgba(20,36,61,0.14);
  --shadow-lg: 0 26px 60px rgba(20,36,61,0.20);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ============ Base / resets ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--navy); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; border:none; background:none; cursor:pointer; }

/* browser surfaces: theme what we did not draw */
::selection{ background:var(--amber); color:var(--navy); }
:focus-visible{ outline:2px solid var(--cobalt); outline-offset:3px; border-radius:4px; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--sky-deep); border-radius:8px; border:3px solid var(--paper); }

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
}
section{ position:relative; overflow:hidden; }

.mono-tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:500;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.7rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.98rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--cobalt);
  color:var(--white);
  box-shadow:0 12px 26px rgba(46,107,230,0.32);
}
.btn-primary:hover{ box-shadow:0 18px 34px rgba(46,107,230,0.4); }
.btn-ghost{
  color:var(--navy);
  font-weight:600;
  padding:.9rem .2rem;
  border-bottom:2px solid var(--navy);
  border-radius:0;
}
.btn-ghost:hover{ color:var(--cobalt-ink); border-color:var(--cobalt-ink); transform:translateX(3px); }
.btn-warm{
  background:var(--orange-deep);
  color:var(--white);
  box-shadow:0 16px 34px rgba(246,166,35,0.30), 0 8px 18px rgba(201,66,15,0.38);
  font-size:1.02rem;
  padding:1.05rem 2.1rem;
}
.btn-warm:hover{ box-shadow:0 22px 42px rgba(246,166,35,0.38), 0 10px 22px rgba(201,66,15,0.45); }

/* ============ Bar motif (skyline as bar chart) ============ */
.bars{ display:flex; align-items:flex-end; gap:7px; }
.bars span{
  display:block;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, var(--amber), var(--orange));
  box-shadow:0 6px 14px rgba(232,83,29,0.22);
}
.bars--cool span{ background:linear-gradient(180deg, var(--sky), var(--cobalt)); box-shadow:0 6px 14px rgba(46,107,230,0.22); }
.bars--ghost span{ background:linear-gradient(180deg, rgba(246,166,35,0.55), rgba(247,245,241,0.14)); box-shadow:none; }

.bars-lg span{ width:20px; }
.bars-md span{ width:12px; }
.bars-sm span{ width:7px; }

@keyframes rise{
  from{ transform:scaleY(0); }
  to{ transform:scaleY(1); }
}
.bars-animate span{ transform-origin:bottom; animation:rise .9s var(--ease) both; }
.bars-animate span:nth-child(1){ animation-delay:.02s; }
.bars-animate span:nth-child(2){ animation-delay:.09s; }
.bars-animate span:nth-child(3){ animation-delay:.16s; }
.bars-animate span:nth-child(4){ animation-delay:.23s; }
.bars-animate span:nth-child(5){ animation-delay:.30s; }
.bars-animate span:nth-child(6){ animation-delay:.37s; }
.bars-animate span:nth-child(7){ animation-delay:.44s; }

.splash{
  position:absolute;
  border-radius:50%;
  filter:blur(.5px);
  pointer-events:none;
}

/* ============ Nav ============ */
header.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,245,241,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,36,61,0.08);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  max-width:1240px;
  margin:0 auto;
}
.nav-logo img{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:2.4rem; }
.nav-links a{
  font-weight:600;
  font-size:.96rem;
  color:var(--navy);
  position:relative;
  padding:.3rem 0;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:-2px;
  height:2px;
  background:var(--cobalt);
  transition:right .35s var(--ease);
}
.nav-links a:hover::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:1.8rem; }
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--navy); border-radius:2px; }
.nav-mobile-panel{
  display:none;
  flex-direction:column;
  gap:1.1rem;
  padding:0 32px 22px;
}
.nav-mobile-panel a{ font-weight:600; font-size:1.05rem; color:var(--navy); }
.nav-mobile-panel.open{ display:flex; }

/* ============ Hero ============ */
.hero{
  background:
    radial-gradient(ellipse 900px 500px at 88% -10%, rgba(201,220,238,0.55), transparent 60%),
    var(--paper);
  padding:88px 0 96px;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:var(--navy);
  margin-bottom:1.6rem;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(232,83,29,0.16);
}
.hero h1{
  font-size:clamp(2.5rem, 4.3vw + 1rem, 4.1rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
}
.hero h1 .light{ font-weight:400; color:var(--gray-text); }
.hero-sub{
  margin-top:1.9rem;
  max-width:46ch;
  font-size:1.14rem;
  line-height:1.65;
  color:var(--gray-text);
}
.hero-sub .hl{
  color:var(--cobalt-ink);
  font-weight:700;
}
.hero-actions{
  margin-top:2.5rem;
  display:flex;
  align-items:center;
  gap:2.4rem;
  flex-wrap:wrap;
}

.hero-visual{ position:relative; }
.hero-panel{
  position:relative;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:26px 26px 30px;
  z-index:2;
}
.panel-chrome{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
}
.panel-chrome .dot{ width:9px; height:9px; border-radius:50%; }
.panel-chrome .dot:nth-child(1){ background:var(--sky); }
.panel-chrome .dot:nth-child(2){ background:var(--cobalt-on-dark); }
.panel-chrome .dot:nth-child(3){ background:var(--amber); }
.panel-chrome .panel-label{
  margin-left:10px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-navy-secondary);
}
.hero-chart{
  background:linear-gradient(180deg, rgba(201,220,238,0.14), rgba(201,220,238,0.03));
  border-radius:var(--radius-md);
  padding:28px 24px 20px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  height:220px;
}
.hero-chart .bars{ width:100%; height:100%; align-items:flex-end; gap:10px; }
.hero-chart .bars span{ flex:1; }
.hero-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:20px;
}
.hero-meta .lbl{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-navy-secondary);
}
.hero-meta .rising{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber);
  font-weight:600;
}
.hero-panel-back{
  position:absolute;
  inset:22px -18px -18px 22px;
  background:linear-gradient(135deg, var(--sky), var(--paper-warm));
  border-radius:var(--radius-lg);
  z-index:1;
}
.hero-visual .splash-a{ width:34px; height:34px; background:var(--orange); opacity:.85; top:-14px; left:36px; }
.hero-visual .splash-b{ width:16px; height:16px; background:var(--cobalt); opacity:.9; bottom:-10px; right:64px; }

/* ============ Credibility strip ============ */
.credibility{
  background:var(--sky);
  border-top:1px solid rgba(20,36,61,0.08);
  border-bottom:1px solid rgba(20,36,61,0.08);
  padding:26px 0;
}
.credibility .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.1rem 1.6rem;
}
.credibility .item{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:1.6rem;
}
.credibility .item + .item::before{
  content:'';
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--navy);
  opacity:.4;
  margin-right:1.6rem;
}

/* ============ Problem (navy band) ============ */
.problem{
  background:linear-gradient(175deg, var(--navy) 0%, var(--navy-soft) 100%);
  padding:120px 0;
}
.problem-bars{
  position:absolute;
  right:-40px; bottom:-40px;
  display:flex;
  align-items:flex-end;
  gap:16px;
  opacity:.42;
  pointer-events:none;
}
.problem-bars span{ width:34px; border-radius:8px 8px 0 0; }
.problem .wrap{ position:relative; z-index:2; }
.problem h2{
  font-size:clamp(2.1rem, 3.6vw + 1rem, 3.4rem);
  font-weight:800;
  line-height:1.12;
  color:var(--paper);
  max-width:16ch;
}
.problem h2 .soft{
  display:block;
  font-weight:400;
  color:var(--on-navy-secondary);
}
.problem-rule{
  width:64px; height:4px;
  border-radius:4px;
  background:linear-gradient(90deg, var(--orange), var(--amber));
  margin-top:2rem;
}

/* ============ What we do ============ */
.cards{
  background:var(--paper);
  padding:120px 0 130px;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
.card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:34px 32px 32px;
  box-shadow:var(--shadow-md);
  position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card .bars{ margin-bottom:1.6rem; height:34px; }
.card .bars span{ width:9px; }
.card h3{ font-size:1.32rem; font-weight:700; margin-bottom:.65rem; letter-spacing:-.01em; }
.card p{ color:var(--gray-text); font-size:1.01rem; line-height:1.6; }

.card-connect .bars span{ background:linear-gradient(180deg, var(--sky), var(--cobalt)); box-shadow:0 6px 14px rgba(46,107,230,0.22); }
.card-risk .bars span{ background:linear-gradient(180deg, #FBD98C, var(--amber)); box-shadow:0 6px 14px rgba(246,166,35,0.25); }
.card-process .bars span{ background:linear-gradient(180deg, var(--amber), var(--orange)); box-shadow:0 6px 14px rgba(232,83,29,0.22); }
.card-ship .bars span{ background:linear-gradient(180deg, var(--cobalt), var(--navy)); box-shadow:0 6px 14px rgba(20,36,61,0.28); }

/* ============ The work ============ */
.work{
  background:linear-gradient(180deg, var(--sky) 0%, #DCE9F4 100%);
  padding:120px 0 130px;
}
.work-head{ max-width:40ch; margin-bottom:80px; }
.work-head h2{
  font-size:clamp(2rem, 3.2vw + 1rem, 3rem);
  font-weight:800;
  line-height:1.1;
}
.work-head h2 .soft{ display:block; font-weight:400; color:var(--gray-text); }

.work-item{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:center;
  margin-bottom:96px;
}
.work-item:last-child{ margin-bottom:0; }
.work-item.reverse{ grid-template-columns:1.15fr .85fr; }
.work-item.reverse .work-text{ order:2; }
.work-item.reverse .work-panel{ order:1; }

.work-text h3{ font-size:1.7rem; font-weight:800; margin-bottom:.9rem; letter-spacing:-.01em; }
.work-text p{ font-size:1.06rem; color:var(--gray-text); line-height:1.65; max-width:44ch; }

.work-panel{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work-panel:hover{ transform:translateY(-5px); }
.work-panel .panel-chrome{
  background:var(--navy);
  padding:14px 20px;
  margin:0;
}
.work-panel .panel-chrome .dot:nth-child(1){ background:var(--sky); }
.work-panel .panel-chrome .dot:nth-child(2){ background:var(--amber); }
.work-panel .panel-chrome .dot:nth-child(3){ background:var(--orange); }
.work-panel-body{ padding:24px; background:var(--paper); }

/* EddyCompose canvas mock */
.toolbar{ display:flex; gap:10px; margin-bottom:16px; }
.tool-btn{
  width:32px; height:32px;
  border-radius:9px;
  background:var(--white);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
}
.tool-btn span{ display:block; border-radius:2px; }
.tool-btn.active{ background:var(--cobalt); box-shadow:0 6px 14px rgba(46,107,230,0.3); }
.tool-glyph-cursor span{ width:9px; height:9px; border:2px solid var(--navy); border-radius:50% 50% 50% 2px; transform:rotate(-45deg); background:none; }
.tool-btn.active .tool-glyph-cursor span{ border-color:var(--white); }
.tool-glyph-text span{ width:11px; height:2px; background:var(--navy); box-shadow:0 -5px 0 var(--navy), 0 5px 0 var(--navy); }
.tool-glyph-shape span{ width:12px; height:12px; border:2px solid var(--navy); background:none; border-radius:3px; }
.tool-glyph-layer span{ width:13px; height:9px; border:2px solid var(--navy); background:none; border-radius:2px; }

.canvas-frame{
  background:var(--white);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  padding:20px;
  position:relative;
}
.canvas-title-bar{ width:58%; height:14px; border-radius:5px; background:var(--sky); margin-bottom:14px; }
.canvas-image-block{
  height:96px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--amber), var(--orange));
  position:relative;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.canvas-image-block::before,.canvas-image-block::after{
  content:'';
  position:absolute;
  width:9px; height:9px;
  background:var(--cobalt);
  border-radius:2px;
  box-shadow:0 0 0 2px var(--white);
}
.canvas-image-block::before{ top:-5px; left:-5px; }
.canvas-image-block::after{ bottom:-5px; right:-5px; }
.canvas-line{ height:9px; border-radius:5px; background:var(--sky); margin-bottom:9px; }
.canvas-line.short{ width:70%; }
.canvas-line.shorter{ width:44%; }

/* OnboardProject triage board */
.triage-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.triage-col{ background:var(--white); border-radius:12px; padding:12px; box-shadow:var(--shadow-sm); }
.triage-col-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-text);
  margin-bottom:10px;
  font-weight:600;
}
.triage-count{
  background:var(--sky);
  color:var(--navy);
  border-radius:999px;
  padding:1px 7px;
  font-size:.62rem;
}
.ticket{
  background:var(--paper);
  border-radius:8px;
  padding:9px 10px;
  margin-bottom:8px;
  border-left:3px solid var(--cobalt);
}
.ticket.amber{ border-left-color:var(--amber); }
.ticket.orange{ border-left-color:var(--orange); }
.ticket-line{ height:6px; border-radius:4px; background:var(--sky-deep); margin-bottom:5px; width:80%; }
.ticket-line.short{ width:50%; background:var(--gray); opacity:.5; }
.triage-capacity{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.triage-capacity .bars{ height:26px; }
.triage-capacity .bars span{ width:6px; }

/* Customer Health panel */
.health-row{ display:flex; gap:22px; align-items:center; margin-bottom:20px; }
.gauge{
  width:104px; height:60px;
  position:relative;
  flex-shrink:0;
}
.gauge svg{ width:100%; height:100%; }
.gauge-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-text);
  padding-bottom:2px;
}
.health-legend{ display:flex; flex-direction:column; gap:6px; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--gray-text); font-weight:600; }
.legend-dot{ width:9px; height:9px; border-radius:50%; }
.legend-dot.healthy{ background:var(--health); }
.legend-dot.watch{ background:var(--amber); }
.legend-dot.risk{ background:var(--orange); }

.risk-table{ background:var(--white); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
.risk-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--paper);
  font-size:.88rem;
  font-weight:600;
}
.risk-row:last-child{ border-bottom:none; }
.chip{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
}
.chip.healthy{ background:rgba(78,139,107,0.15); color:var(--health); }
.chip.watch{ background:rgba(246,166,35,0.18); color:#8A5D0E; }
.chip.risk{ background:rgba(232,83,29,0.16); color:var(--orange-deep); }

/* ============ Why it is different ============ */
.different{
  background:linear-gradient(165deg, var(--paper-warm) 0%, var(--paper) 55%);
  padding:130px 0;
}
.different-inner{ max-width:60ch; }
.different h2{
  font-size:clamp(2rem, 3.4vw + 1rem, 3.1rem);
  font-weight:800;
  line-height:1.14;
}
.different h2 .soft{ display:block; font-weight:400; color:var(--gray-text); margin-top:.15em; }
.different-rule{
  width:56px; height:3px;
  background:var(--cobalt);
  border-radius:3px;
  margin:1.8rem 0 1.8rem;
}
.different p{ font-size:1.1rem; color:var(--gray-text); line-height:1.7; max-width:58ch; }

/* ============ About ============ */
.about{ background:var(--paper); padding:110px 0 130px; }
.about-card{
  background:linear-gradient(155deg, var(--sky) 0%, #DCE9F4 100%);
  border-radius:var(--radius-lg);
  padding:56px;
  box-shadow:var(--shadow-md);
  max-width:840px;
  margin:0 auto;
  position:relative;
}
.about-card p{
  font-size:1.2rem;
  line-height:1.7;
  color:var(--navy);
  max-width:56ch;
}
.about-bars{
  position:absolute;
  right:36px; bottom:30px;
  opacity:.5;
}
.about-bars span{ width:8px; }

/* ============ Dark CTA ============ */
.cta{
  background:linear-gradient(170deg, var(--navy) 0%, var(--navy-soft) 100%);
  padding:150px 0 150px;
  text-align:center;
}
.cta-bars{
  position:absolute;
  left:50%;
  bottom:-30px;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:20px;
  opacity:.16;
  pointer-events:none;
}
.cta-bars span{ width:38px; border-radius:8px 8px 0 0; }
.cta .wrap{ position:relative; z-index:2; }
.cta h2{
  font-size:clamp(2.2rem, 4vw + 1rem, 3.7rem);
  font-weight:800;
  line-height:1.12;
  color:var(--paper);
}
.cta h2 .accent{
  display:block;
  color:var(--cobalt-on-dark);
}
.cta-actions{ margin-top:2.8rem; }

/* ============ Contact (R3: closing block before footer) ============ */
.contact{
  background:var(--paper);
  padding:110px 0 130px;
  text-align:center;
  border-top:1px solid rgba(20,36,61,0.08);
}
.contact h2{
  font-size:clamp(1.8rem, 2.6vw + 1rem, 2.6rem);
  font-weight:800;
  line-height:1.15;
}
.contact-invite{
  margin-top:1rem;
  font-size:1.05rem;
  color:var(--gray-text);
}
.contact-email{
  display:inline-flex;
  margin-top:1.8rem;
  font-family:var(--font-mono);
  font-size:1.05rem;
  font-weight:600;
  color:var(--cobalt-ink);
  border-bottom:2px solid var(--cobalt-ink);
  padding-bottom:.2rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact-email:hover{ color:var(--orange-deep); border-color:var(--orange-deep); }

/* ============ Footer ============ */
footer{
  background:var(--navy-deep);
  padding:56px 0 40px;
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.6rem;
  padding-bottom:32px;
  border-bottom:1px solid rgba(247,245,241,0.12);
}
.footer-links{ display:flex; gap:2rem; flex-wrap:wrap; }
.footer-links a{
  font-weight:600;
  font-size:.92rem;
  color:var(--on-navy-secondary);
  transition:color .3s var(--ease);
}
.footer-links a:hover{ color:var(--cobalt-on-dark); }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.8rem;
  padding-top:26px;
}
.footer-bottom .mono-tag{ color:var(--on-navy-secondary); opacity:.75; }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .hero .wrap{ grid-template-columns:1fr; gap:56px; }
  .hero-visual{ max-width:520px; }
  .work-item, .work-item.reverse{ grid-template-columns:1fr; gap:36px; }
  .work-item.reverse .work-text{ order:1; }
  .work-item.reverse .work-panel{ order:2; }
  .about-card{ padding:44px; }
  .different-grid{ grid-template-columns:1fr; gap:36px; }
  .different-visual{ max-width:480px; }
}

@media (max-width:860px){
  .card-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .nav-cta .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
  .problem{ padding:96px 0; }
  .cards, .work, .different, .about{ padding-top:90px; padding-bottom:90px; }
  .cta{ padding:110px 0; }
}

@media (max-width:640px){
  .wrap{ padding-left:20px; padding-right:20px; }
  .nav-row{ padding:14px 20px; }
  .hero{ padding:56px 0 64px; }
  .hero-sub{ font-size:1.04rem; }
  .hero-actions{ gap:1.4rem; }
  .credibility .item{ gap:1rem; }
  .credibility .item + .item::before{ margin-right:1rem; }
  .problem h2{ max-width:none; }
  .work-head{ margin-bottom:52px; }
  .work-item{ margin-bottom:64px; }
  .triage-board{ grid-template-columns:1fr; }
  .health-row{ flex-wrap:wrap; }
  .about-card{ padding:32px 26px; }
  .about-bars{ display:none; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .card{ padding:28px 24px; }
}

/* ============ R2: scroll reveal (fires once via IO, persists) ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============ R2: hero headline accent ============ */
.hero h1 .orange-data{ color:var(--orange); font-weight:800; }

/* ============ R2: hero CTA sliding pill ============ */
.hero-actions{ position:relative; }
.hero-cta-pill{
  position:absolute;
  top:0; left:0;
  border-radius:999px;
  background:var(--cobalt);
  box-shadow:0 12px 26px rgba(46,107,230,0.32);
  transition:transform .25s var(--ease), width .25s var(--ease), height .25s var(--ease);
  z-index:1;
  pointer-events:none;
}
.hero-cta-btn{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:.9rem 1.7rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.98rem;
  white-space:nowrap;
  color:var(--cobalt-ink);
  transition:color .25s var(--ease);
}
.hero-cta-btn.is-active{ color:var(--white); }

/* ============ R2: problem section, bigger right-side bar presence ============ */
.problem-bars{
  position:absolute;
  top:0; right:-10px; bottom:0;
  display:flex;
  align-items:flex-end;
  gap:18px;
  opacity:.55;
  pointer-events:none;
}
.problem-bars span{ width:30px; border-radius:10px 10px 0 0; will-change:transform; }

/* ============ R2: why it is different, grid + typewriter + visual frame ============ */
.different-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
}
.tw-line{ display:block; }
.tw-final{ opacity:0; transition:opacity .25s var(--ease); }
.tw-final.is-visible{ opacity:1; }
.tw-dot.is-blinking{ animation:twDotBlink 1s steps(1,end) 1; }
@keyframes twDotBlink{
  0%,25%,50%,75%,100%{ opacity:1; }
  12.5%,37.5%,62.5%,87.5%{ opacity:0; }
}
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.different-visual{ position:relative; }
.different-frame{
  position:relative;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  aspect-ratio:3/4;
  background:linear-gradient(155deg, var(--sky) 0%, var(--paper-warm) 100%);
}
.different-frame-img{ width:100%; height:100%; object-fit:cover; display:block; }
.different-frame-label{
  position:absolute;
  left:18px; bottom:18px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(20,36,61,0.72);
  color:var(--paper);
  padding:7px 14px;
  border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ============ R2: about card, top logo + emphasis phrase ============ */
.about-logo{ display:block; height:40px; width:auto; margin:0 auto 28px; }
.about-card .emph{ color:var(--cobalt-ink); font-weight:700; }

/* ============ R2: footer, transparent logo (no white chip) ============ */
.footer-logo{ display:inline-flex; align-items:center; }
.footer-logo img{ height:52px; width:auto; }

@media (prefers-reduced-motion: reduce){
  .bars-animate span{ animation:none; transform:scaleY(1); }
  .btn, .card, .work-panel{ transition:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-cta-pill, .hero-cta-btn{ transition:none; }
  .tw-dot.is-blinking{ animation:none; opacity:1; }
  .tw-final{ transition:none; }
}