/* ============================================================
   ARTELLION — CLARTÉ
   Daylight · warm · editorial. Cream + deep pine + warm coral.
   A direction built to feel modern & "alive" without any
   matrix / circuit / dark-tech cliché.
   ============================================================ */

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

:root {
  /* palette */
  --cream:     oklch(0.965 0.017 92);
  --cream-2:   oklch(0.935 0.022 92);
  --paper:     oklch(0.992 0.008 92);
  --ink:       oklch(0.245 0.03 162);
  --ink-2:     oklch(0.46 0.028 162);
  --pine:      oklch(0.345 0.052 162);
  --pine-deep: oklch(0.262 0.046 163);
  --coral:     oklch(0.66 0.165 35);
  --coral-deep:oklch(0.575 0.175 33);
  --saffron:   oklch(0.81 0.13 76);
  --line:      oklch(0.86 0.02 92);
  --line-2:    oklch(0.80 0.025 92);

  /* contextual (light by default) */
  --bg: var(--cream);
  --surface: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --rule: var(--line);
  --accent: var(--coral);
  --accent-fg: var(--cream);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --sec-y: clamp(80px, 12vh, 170px);

  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 18px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* warm paper grain */
body::before {
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* soft cursor light */
.glow {
  position: fixed; z-index: 1; pointer-events: none; width: 620px; height: 620px;
  border-radius: 50%; left: 0; top: 0; transform: translate(-50%,-50%);
  background: radial-gradient(circle, color-mix(in oklch, var(--coral) 22%, transparent), transparent 62%);
  opacity: 0; transition: opacity .6s; mix-blend-mode: multiply;
}
body.glow-on .glow { opacity: .8; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--coral); color: var(--cream); }

main, header, footer { position: relative; z-index: 2; }

/* ---------- Type ---------- */
h1,h2,h3,h4 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 0.98; text-wrap: balance; }
.serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 11px;
}
.eyebrow::before { content:""; width: 28px; height: 1.5px; background: currentColor; }
.lead { font-size: clamp(18px, 2vw, 23px); line-height: 1.5; color: var(--fg-2); max-width: 50ch; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--sec-y); position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  background: var(--coral); color: var(--cream); border-radius: 999px; border: 1.5px solid var(--coral);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background-color .25s, color .25s;
  box-shadow: 0 1px 0 color-mix(in oklch, var(--ink) 12%, transparent);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px color-mix(in oklch, var(--coral) 38%, transparent); }
.btn .arrow { transition: transform .3s; }
.btn:hover .arrow { transform: translate(4px,-4px); }
.btn.ghost { background: transparent; color: var(--fg); border-color: color-mix(in oklch, var(--fg) 30%, transparent); box-shadow:none; }
.btn.ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); box-shadow:none; }
.btn.light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn.light:hover { box-shadow: 0 14px 34px color-mix(in oklch, var(--ink) 30%, transparent); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); transition: padding .4s, background-color .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: color-mix(in oklch, var(--cream) 80%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: var(--rule); padding-block: 12px; }
.nav-links { display: flex; gap: clamp(16px, 2.2vw, 34px); align-items: center; }
.nav-links a { font-family: var(--font-mono); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--fg-2); position: relative; transition: color .2s; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background: var(--coral); transition: width .25s; }
.nav-links a:hover { color: var(--fg); } .nav-links a:hover::after { width:100%; }
.nav-cta { padding: 11px 22px; }
.logo { display: inline-flex; align-items: flex-end; gap: 0; }
.logo-word { font-family: var(--font-sans); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.logo-word em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--coral); letter-spacing: 0; }
.logo-spark { width: 9px; height: 9px; flex: none; color: var(--coral); margin: 0 0 3px 4px; }
.logo-mark { width: 34px; height: 34px; flex:none; }

.burger { display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--rule); border-radius:999px; }
.burger span { width:18px; height:2px; background: var(--fg); transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}
@media (max-width: 1000px){ .nav-links{ display:none;} .nav-cta{ display:none;} .burger{ display:flex; } }
.mobile-menu { position: fixed; inset:0; z-index:80; background: var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; opacity:0; pointer-events:none; transition: opacity .35s; }
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu .mm-close { position:absolute; top:18px; right:var(--gutter); width:48px; height:48px; display:grid; place-items:center; background:none; border:1px solid var(--rule); border-radius:999px; color:var(--fg); cursor:pointer; }
.mobile-menu .mm-close::before, .mobile-menu .mm-close::after { content:""; position:absolute; width:20px; height:2px; background:var(--fg); }
.mobile-menu .mm-close::before { transform:rotate(45deg); } .mobile-menu .mm-close::after { transform:rotate(-45deg); }
.mobile-menu .mm-close:hover { border-color:var(--coral); }
.mobile-menu a { font-weight:800; font-size: clamp(28px,8vw,42px); letter-spacing:-.03em; }
.mobile-menu a:hover { color: var(--coral); }
.mobile-menu .btn { font-family: var(--font-mono); font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:14px 26px; border-radius:12px; margin-top:14px; background:var(--coral); color:var(--cream); border:1.5px solid var(--coral); box-shadow:none; }
.mobile-menu .btn:hover { transform:none; box-shadow:none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(130px, 19vh, 220px); padding-bottom: clamp(40px,6vh,80px); }
.hero h1 { font-size: clamp(46px, 8.6vw, 128px); letter-spacing: -0.04em; }
.hero h1 .serif { font-size: 0.92em; }
.hero-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px,5vw,64px); align-items: end; }
@media (max-width: 940px){ .hero-top { grid-template-columns: 1fr; gap: 30px; } }
.hero-right { padding-bottom: 8px; }
.hero-cta { display:flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.hero-stage { margin-top: clamp(40px, 6vh, 80px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px,3vw,40px); align-items: stretch; }
@media (max-width: 860px){ .hero-stage { grid-template-columns: 1fr; } }

/* live AI message card */
.ai-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 26px;
  box-shadow: 0 30px 70px -40px color-mix(in oklch, var(--ink) 60%, transparent);
  display: flex; flex-direction: column; gap: 16px; min-height: 320px;
  will-change: transform;
}
.ai-head { display:flex; align-items:center; gap:12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ai-avatar { width: 42px; height:42px; border-radius: 50%; background: var(--pine); color: var(--cream); display:grid; place-items:center; font-family: var(--font-serif); font-style: italic; font-size: 22px; flex:none; }
.ai-head .who { font-weight: 700; font-size: 15px; }
.ai-head .stat { font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform: uppercase; color: var(--pine); display:flex; align-items:center; gap:6px; }
.ai-head .stat::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--pine); box-shadow: 0 0 0 0 color-mix(in oklch, var(--pine) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 color-mix(in oklch, var(--pine) 55%, transparent);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.ai-context { font-size: 13.5px; color: var(--fg-2); background: var(--cream-2); border-radius: 12px; padding: 12px 14px; }
.ai-context b { color: var(--ink); }
.ai-body { flex: 1; }
.ai-typed { font-size: 17px; line-height: 1.5; min-height: 7.5em; margin: 0; }
.ai-typed .cursor { display:inline-block; width:2px; height:1.05em; background: var(--coral); margin-left:2px; vertical-align:-2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50%{ opacity:0; } }
.ai-foot { display:flex; gap:10px; align-items:center; }
.ai-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em; text-transform: uppercase; color: var(--pine); border:1px solid color-mix(in oklch, var(--pine) 30%, transparent); border-radius: 999px; padding: 7px 13px; }
.ai-send { margin-left:auto; background: var(--coral); color: var(--cream); border-radius: 999px; padding: 9px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform: uppercase; }

/* depth chips floating around the card */
.hero-depth { position: relative; }
.float-chip {
  position: absolute; background: var(--paper); border:1px solid var(--line); border-radius: 14px; padding: 13px 16px;
  box-shadow: 0 20px 44px -28px color-mix(in oklch, var(--ink) 60%, transparent); font-size: 13.5px; display:flex; gap:11px; align-items:center;
  will-change: transform;
  animation: chipFloat 5.6s ease-in-out infinite;
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(0.4deg); }
}
.float-chip .ic { width: 34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; }
.float-chip .ic.a { background: color-mix(in oklch, var(--coral) 18%, white); color: var(--coral-deep); }
.float-chip .ic.b { background: color-mix(in oklch, var(--pine) 16%, white); color: var(--pine); }
.float-chip .ic.c { background: color-mix(in oklch, var(--saffron) 30%, white); color: oklch(0.5 0.1 76); }
.float-chip b { display:block; font-weight: 700; } .float-chip small { color: var(--fg-2); font-size: 12px; }
.fc1 { top: 6%;  left: -4%; }
.fc2 { top: 44%; right: -6%; animation-duration: 6.8s; animation-delay: -2.1s; }
.fc3 { bottom: 4%; left: 6%; animation-duration: 7.6s; animation-delay: -4s; }
@media (max-width: 860px){ .float-chip{ display:none; } }

/* marquee of trades */
.marquee { margin-top: clamp(46px,7vh,90px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-block: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap: 0; width: max-content; animation: scrollx 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px,3vw,34px); color: var(--ink-2); padding-inline: 30px; display:inline-flex; align-items:center; gap: 40px; white-space:nowrap; }
.marquee-track span::after { content:"•"; color: var(--coral); font-style: normal; font-size: 14px; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- Section heading ---------- */
.shead { max-width: 64ch; margin-bottom: clamp(40px,6vh,72px); display: grid; gap: 18px; }
.shead h2 { font-size: clamp(34px, 5.4vw, 72px); }
.shead .lead { margin-top: 4px; }

/* ---------- Pine panel (the dramatic dark-green moments) ---------- */
.panel-pine {
  --bg: var(--pine); --surface: var(--pine-deep); --fg: var(--cream); --fg-2: color-mix(in oklch, var(--cream) 72%, transparent);
  --rule: color-mix(in oklch, var(--cream) 18%, transparent); --accent: var(--saffron); --accent-fg: var(--pine-deep);
  background: var(--pine); color: var(--cream); border-radius: clamp(24px,3vw,40px); overflow: hidden;
}
.panel-pine .eyebrow { color: var(--saffron); }
.panel-pine .btn { background: var(--cream); color: var(--pine-deep); border-color: var(--cream); }
.panel-pine .btn:hover { box-shadow: 0 14px 34px color-mix(in oklch, black 35%, transparent); }

/* ---------- "Temps rendu" — year grid ---------- */
.temps { padding: clamp(40px,6vw,80px); }
.temps-grid-wrap { display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px,5vw,72px); align-items: center; }
@media (max-width: 920px){ .temps-grid-wrap { grid-template-columns:1fr; gap: 40px; } }
.temps h2 { font-size: clamp(30px,4.1vw,52px); margin-bottom: 22px; max-width: 18ch; }
.temps .big-num { font-size: clamp(56px, 9vw, 122px); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--saffron); margin-top: clamp(26px,3.5vh,44px); }
.temps .big-num small { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: .26em; color: var(--cream); letter-spacing: 0; display:block; margin-top: 10px; }
.year-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px; }
@media (max-width: 520px){ .year-grid { grid-template-columns: repeat(18, 1fr); gap: 5px; } }
.year-grid i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in oklch, var(--cream) 14%, transparent); transition: background-color .5s ease, transform .5s ease; }
.year-grid i.on { background: var(--saffron); }
.temps-legend { display:flex; gap: 22px; margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing:.04em; text-transform: uppercase; color: color-mix(in oklch, var(--cream) 75%, transparent); flex-wrap: wrap; }
.temps-legend span { display:flex; align-items:center; gap:9px; }
.temps-legend i { width:12px; height:12px; border-radius:3px; }
.temps-legend i.idle { background: color-mix(in oklch, var(--cream) 16%, transparent); }
.temps-legend i.free { background: var(--saffron); }

/* ---------- Services ---------- */
.services { display:grid; gap: clamp(2px,0.3vw,3px); background: var(--rule); border:1px solid var(--rule); border-radius: 24px; overflow: hidden; }
.svc { background: var(--bg); padding: clamp(28px,4vw,56px); display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px,4vw,56px); align-items:center; }
@media (max-width: 820px){ .svc { grid-template-columns: 1fr; gap: 26px; } }
.svc-n { font-family: var(--font-mono); font-size: 13px; letter-spacing:.14em; color: var(--coral); text-transform:uppercase; margin-bottom: 18px; }
.svc h3 { font-size: clamp(26px,3.4vw,44px); margin-bottom: 18px; }
.svc h3 .serif { font-size: 1.02em; }
.svc p { color: var(--fg-2); margin: 0 0 24px; }
.svc-list { list-style:none; padding: 20px 0 0; margin: 0; display:grid; gap: 14px; border-top: 1px solid var(--rule); }
.svc-list li { display:grid; grid-template-columns: 24px 1fr; gap: 13px; font-size: 16px; }
.svc-list .k { color: var(--coral); font-family: var(--font-mono); font-weight: 700; }
.svc-visual { aspect-ratio: 5/4; border-radius: 16px; background: var(--cream-2); border:1px solid var(--rule); overflow: hidden; position: relative; padding: 24px; display:flex; flex-direction:column; }

/* visual: comm flow */
.flow { display:grid; gap: 11px; align-content:center; height:100%; }
.flow-row { display:flex; align-items:center; gap:13px; background: var(--paper); border:1px solid var(--line); border-radius: 12px; padding: 12px 15px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.03em; text-transform:uppercase; }
.flow-row .ic { width:30px; height:30px; border-radius:8px; background: color-mix(in oklch, var(--coral) 16%, white); color: var(--coral-deep); display:grid; place-items:center; font-weight:700; flex:none; }
.flow-row .ok { margin-left:auto; color: var(--pine); font-weight:700; }
/* visual: docs */
.docs { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-content:center; height:100%; }
.doc { aspect-ratio: 3/4; background: var(--paper); border:1px solid var(--line); border-radius: 10px; padding: 12px; display:flex; flex-direction:column; gap: 7px; }
.doc .bar { height: 5px; border-radius: 3px; background: var(--line-2); }
.doc .bar.a { width:65%; background: var(--coral); } .doc .bar.b{ width:90%; } .doc .bar.c{ width:50%; } .doc .bar.d{ width:78%; }
.doc .tag { margin-top:auto; font-family: var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-2); }
/* visual: assistant mini */
.mini-chat { display:flex; flex-direction:column; gap: 10px; justify-content:center; height:100%; }
.mini-b { max-width: 82%; padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height:1.4; }
.mini-b.ai { background: var(--pine); color: var(--cream); align-self:flex-start; border-bottom-left-radius:4px; }
.mini-b.user { background: var(--paper); border:1px solid var(--line); align-self:flex-end; border-bottom-right-radius:4px; }

/* ---------- Réalisations ---------- */
.real-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-rows: 1fr; }
.real-grid image-slot { width:100%; height:100%; }
.real-img { width:100%; height:100%; object-fit:cover; display:block; }
.real-grid .cell { position: relative; border-radius: 16px; overflow: hidden; min-height: 220px; }
.real-grid .cell.big { grid-column: span 2; grid-row: span 2; }
.real-grid .cell .cap { position:absolute; left:14px; bottom:12px; z-index:3; font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--cream); background: color-mix(in oklch, var(--ink) 55%, transparent); padding: 6px 11px; border-radius: 999px; pointer-events:none; }
@media (max-width: 820px){ .real-grid { grid-template-columns: repeat(2,1fr); } .real-grid .cell.big{ grid-column: span 2; grid-row: span 1; } }

/* ---------- Process ---------- */
.timeline { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--rule); border:1px solid var(--rule); border-radius: 20px; overflow:hidden; }
@media (max-width: 860px){ .timeline { grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .timeline{ grid-template-columns:1fr; } }
.phase { background: var(--bg); padding: clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; transition: background-color .3s; }
.phase:hover { background: var(--cream-2); }
.phase .pn { font-family: var(--font-mono); font-size:12px; letter-spacing:.12em; color: var(--coral); }
.phase h4 { font-size: clamp(19px,2vw,25px); }
.phase h4 .serif { font-size: 1.05em; }
.phase p { font-size: 14.5px; color: var(--fg-2); margin:0; }
.phase .dur { margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--fg-2); }

/* ---------- Pour qui ---------- */
.segments { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 820px){ .segments{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .segments{ grid-template-columns:1fr; } }
.seg { border:1px solid var(--rule); border-radius: 18px; padding: 26px; background: var(--surface); transition: transform .3s, box-shadow .3s, background-color .3s; position: relative; overflow:hidden; }
.seg:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -34px color-mix(in oklch, var(--ink) 55%, transparent); }
.seg .sg-ico { width:48px; height:48px; border-radius: 13px; background: color-mix(in oklch, var(--coral) 14%, white); color: var(--coral-deep); display:grid; place-items:center; margin-bottom:20px; }
.seg h4 { font-size: 20px; margin-bottom: 8px; }
.seg p { font-size: 14.5px; color: var(--fg-2); margin:0; }

/* ---------- CTA ---------- */
.cta { padding: clamp(40px,7vw,96px); }
.cta-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px,5vw,72px); align-items:center; }
@media (max-width: 820px){ .cta-grid{ grid-template-columns:1fr; } }
.cta h2 { font-size: clamp(34px,6vw,82px); margin-bottom: 22px; }
.cta-checks { list-style:none; margin: 0; padding:0; display:grid; gap:13px; }
.cta-checks li { display:grid; grid-template-columns: 24px 1fr; gap:12px; font-size: 16px; }
.cta-checks .k { color: var(--saffron); font-family: var(--font-mono); font-weight:700; }

/* ---------- Contact + FAQ ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap:48px; } }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label { font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-2); }
.field input, .field textarea { font: inherit; font-size:16px; background: var(--paper); color: var(--fg); border:1px solid var(--rule); border-radius: 12px; padding: 13px 15px; outline:none; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in oklch, var(--coral) 22%, transparent); }
.field-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:520px){ .field-2{ grid-template-columns:1fr; } }
.contact-line { margin-bottom: 26px; }
.contact-line .k { font-family: var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--fg-2); display:block; margin-bottom:8px; }
.contact-line a { font-size: clamp(20px,2.4vw,30px); font-weight: 800; letter-spacing:-.02em; }
.contact-line a:hover { color: var(--coral); }
.faq { display:grid; border-top:1px solid var(--rule); }
.qa { border-bottom:1px solid var(--rule); }
.qa button { width:100%; text-align:left; background:none; border:0; padding: 22px 0; display:flex; align-items:center; gap:18px; font-weight:700; font-size: clamp(17px,1.8vw,22px); line-height:1.15; letter-spacing:-.01em; }
.qa .pm { margin-left:auto; flex:none; width:24px; height:24px; position:relative; }
.qa .pm::before, .qa .pm::after { content:""; position:absolute; background: var(--coral); transition: transform .3s, opacity .3s; }
.qa .pm::before { left:0; top:50%; width:100%; height:2px; transform: translateY(-50%); }
.qa .pm::after { top:0; left:50%; height:100%; width:2px; transform: translateX(-50%); }
.qa.open .pm::after { transform: translateX(-50%) scaleY(0); opacity:0; }
.qa .ans { max-height:0; overflow:hidden; transition: max-height .4s ease; }
.qa .ans p { color: var(--fg-2); font-size:16px; padding-bottom:22px; margin:0; max-width:56ch; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--rule); padding-block: 60px 40px; }
.footer-top { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; margin-bottom: 40px; }
.foot-word { font-weight:800; font-size: clamp(56px, 17vw, 250px); letter-spacing:-.05em; line-height:.8; color: var(--ink); opacity:.07; margin: 12px 0; }
.foot-word em { font-family: var(--font-serif); font-style:italic; font-weight:400; color: var(--coral); opacity: 1; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family: var(--font-mono); font-size:12px; color: var(--fg-2); letter-spacing:.04em; }
.footer-bottom a:hover { color: var(--fg); }

/* ---------- Integrations / tools marquee ---------- */
.tools { padding-block: clamp(44px,6vh,80px); }
.tools .tools-lab { font-family: var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); text-align:center; margin-bottom:30px; }
.tools .tools-lab b { color: var(--ink); font-weight:600; }
.tools-marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tools-track { display:flex; width:max-content; align-items:center; gap: clamp(30px,5vw,66px); padding-left: clamp(30px,5vw,66px); animation: scrollx 34s linear infinite; }
.tools-marquee:hover .tools-track { animation-play-state: paused; }
.tools-track span { font-weight:700; font-size: clamp(18px,2.3vw,27px); letter-spacing:-.02em; color: var(--ink-2); opacity:.7; white-space:nowrap; transition: opacity .2s, color .2s; }
.tools-track span:hover { opacity:1; color: var(--ink); }
.tools-note { text-align:center; font-family: var(--font-mono); font-size:12px; color: var(--ink-2); margin-top:28px; letter-spacing:.02em; }

/* ghost button on the pine CTA panel */
.panel-pine .btn.ghost { background:transparent; color:var(--cream); border-color:color-mix(in oklch, var(--cream) 42%, transparent); box-shadow:none; }
.panel-pine .btn.ghost:hover { background:var(--cream); color:var(--pine-deep); border-color:var(--cream); }

/* ---------- Reveal ---------- */
[data-reveal] { opacity:0; transform: translateY(30px); transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in { opacity:1; transform:none; }
[data-rd="1"]{ transition-delay:.08s; } [data-rd="2"]{ transition-delay:.16s; } [data-rd="3"]{ transition-delay:.24s; } [data-rd="4"]{ transition-delay:.32s; } [data-rd="5"]{ transition-delay:.4s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee-track{ animation:none; } .tools-track{ animation:none; } html{ scroll-behavior:auto; }
}