/* Amanda's design (ITTA 에이전시 홈페이지): ink black, mint accent, Newsreader + Pretendard */
:root {
  --bg: #0D0D0D;
  --bg-alt: #121211;
  --card: #1C1C19;
  --line: #1F1F1D;
  --border: #262624;
  --chip: #36362F;
  --text: #FFFFFF;
  --muted: #AAA79F;
  --soft: #CFCCC4;
  --list: #E8E6E1;
  --accent: #69EDA0;
  --accent-ink: #0F2A1C;
  --glow: 105, 237, 160;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--text); }
a:hover { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--bg); }

.serif, .it, .logo { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.02em; }
.it { font-style: italic; }
/* logo kit 2026: Instrument Serif Regular, -3% tracking, green period set 0.16em from the letters */
.logo { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.03em; text-decoration: none; line-height: 1; }
.logo span { margin-left: .16em; }
.logo span, .accent { color: var(--accent); }
.label { font-size: 13px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.wrap { max-width: 1296px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding: 128px 0; }
.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.head { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin-bottom: 56px; }
.head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.3; font-weight: 600; letter-spacing: -0.03em; }
.head h2 .it { color: var(--muted); font-size: 1.1em; }
.head p:not(.label) { font-size: 17px; line-height: 1.75; color: var(--muted); }

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }

/* header */
header { position: sticky; top: 0; z-index: 10; background: rgba(13,13,13,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.bar .logo { font-size: 32px; }
.navlinks { display: flex; gap: 32px; }
.navlinks a { position: relative; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: .18em; }
.navlinks a::after { content: ""; position: absolute; left: 0; right: .18em; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.navlinks a:hover::after { transform: scaleX(1); transform-origin: left; }
.bar-right { display: flex; align-items: center; gap: 16px; }
.lang { text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }

/* buttons */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: none; border-radius: 18px; background: #FFFFFF; color: var(--bg); font-family: inherit; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .4s var(--ease), background .4s, color .4s, box-shadow .4s; }
.btn:hover { color: var(--bg); background: var(--accent); transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn .ico { transition: transform .4s var(--ease); }
.btn:hover .ico { transform: translate(3px, 0); }
.btn-pill { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--card); color: var(--text); border: 1px solid #2E2E2A; }
.btn-pill:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-dark { background: var(--bg); color: #FFFFFF; }
.btn-dark:hover { background: var(--card); color: #FFFFFF; }
.link-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: .25em; }
.link-btn span { display: inline-block; transition: transform .4s var(--ease); }
.link-btn:hover span { transform: translateX(4px); }

/* primary CTA: mint breathing glow + light sweep */
.glow { animation: glow 3.2s ease-in-out infinite; }
.glow::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(var(--glow), .45), transparent); transform: skewX(-20deg); animation: sweep 4.8s 1.6s var(--ease) infinite; }
.glow:hover { box-shadow: 0 10px 36px rgba(var(--glow), .45); }
.btn-pill.glow { border-color: rgba(var(--glow), .45); }
.btn-pill.glow::after { background: linear-gradient(100deg, transparent, rgba(var(--glow), .3), transparent); }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--glow), 0), 0 6px 18px rgba(var(--glow), .10); } 50% { box-shadow: 0 0 0 5px rgba(var(--glow), .10), 0 8px 30px rgba(var(--glow), .24); } }
@keyframes sweep { 0% { left: -60%; } 40%, 100% { left: 130%; } }

/* hero */
.hero { position: relative; padding: 128px 0 96px; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow), .12), transparent 62%); animation: drift 16s ease-in-out infinite alternate; pointer-events: none; }
/* hero background: aurora ribbons rising from bottom-left to top-right like a growth trajectory.
   The ribbons breathe slowly, a light pulse keeps climbing the main line, and on scroll the whole
   aurora lifts and fades. Ambient and scroll motion only, all of it inside the hero.
   (Previous liked version, the phyllotaxis bloom, is kept in memory notes.) */
.hero { overflow: clip; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: appear 2.4s .2s ease forwards; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 55%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 55%); }
.ribbon path { fill: none; stroke-linecap: round; }
.ribbon { transform-box: view-box; transform-origin: 100% 0; }
.r1 { animation: sway-a 18s ease-in-out infinite alternate; }
.r2 { animation: sway-b 23s ease-in-out infinite alternate; opacity: .8; }
.r3 { animation: sway-c 15s ease-in-out infinite alternate; opacity: .45; }
@keyframes sway-a { to { transform: translate(-60px, 30px) rotate(-2.5deg); } }
@keyframes sway-b { to { transform: translate(50px, -40px) rotate(2deg); } }
@keyframes sway-c { to { transform: translate(-30px, -50px) rotate(-1.5deg); } }
.trace { fill: none; stroke-linecap: round; }
/* a shooting star runs up the trace: a bright head plus two fading tails that follow it.
   Each layer is one dash; its offset = head offset + its own length, so the tails always end at the head. */
.star { fill: none; stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 100% 0; }
.star.head { stroke: #FFFFFF; stroke-width: 4; stroke-dasharray: .004 .996; filter: drop-shadow(0 0 6px #FFFFFF) drop-shadow(0 0 14px rgba(var(--glow), 1)); }
.star.tail { stroke: #E3FCEE; stroke-opacity: .8; stroke-width: 2; stroke-dasharray: .05 .95; filter: drop-shadow(0 0 6px rgba(var(--glow), .9)); }
.star.tail-far { stroke: var(--accent); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: .16 .84; }
.star.head { animation: shoot-head 5.5s 3.2s cubic-bezier(.55,0,.25,1) infinite, sway-a 18s ease-in-out infinite alternate; }
.star.tail { animation: shoot-tail 5.5s 3.2s cubic-bezier(.55,0,.25,1) infinite, sway-a 18s ease-in-out infinite alternate; }
.star.tail-far { animation: shoot-far 5.5s 3.2s cubic-bezier(.55,0,.25,1) infinite, sway-a 18s ease-in-out infinite alternate; }
@keyframes shoot-head { 0% { stroke-dashoffset: .004; opacity: 0; } 4%, 40% { opacity: 1; } 46%, 100% { stroke-dashoffset: -.996; opacity: 0; } }
@keyframes shoot-tail { 0% { stroke-dashoffset: .05; opacity: 0; } 4%, 40% { opacity: 1; } 46%, 100% { stroke-dashoffset: -.95; opacity: 0; } }
@keyframes shoot-far { 0% { stroke-dashoffset: .16; opacity: 0; } 4%, 40% { opacity: 1; } 46%, 100% { stroke-dashoffset: -.84; opacity: 0; } }
.trace { stroke: #B9F7D2; stroke-width: 1.4; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 3s .6s var(--ease) forwards, sway-a 18s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 100% 0; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@supports (animation-timeline: scroll()) {
  .hero-bg { animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
}
@keyframes lift { to { transform: translateY(-140px) scale(1.08); opacity: .3; } }
.hero-inner { display: flex; flex-direction: column; gap: 32px; }
.hero h1 { display: flex; flex-direction: column; gap: 4px; max-width: 1040px; }
.hero h1 > span:first-child { font-size: clamp(40px, 6vw, 80px); line-height: 1.15; font-weight: 650; letter-spacing: -0.035em; }
.hero h1 .it { font-size: clamp(44px, 6.6vw, 92px); line-height: 1.12; color: var(--accent); padding-bottom: .08em; }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; color: var(--muted); max-width: 640px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--border); padding-top: 40px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat .serif { font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .label { font-size: 12px; }
.stat > span:last-child { font-size: 14px; color: var(--muted); }

/* clients */
.clients { position: relative; padding: 56px 0 56px; border-bottom: 1px solid var(--line); }
/* mint glow at the top, continuing the hero aurora; it drifts slower than the page (parallax) */
.clients::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -360px; height: 900px; pointer-events: none; background: radial-gradient(ellipse 55% 42% at 80% 46%, rgba(var(--glow), .13), transparent 72%), radial-gradient(ellipse 40% 34% at 22% 52%, rgba(46,158,106,.08), transparent 72%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 62%, transparent 100%); }
@supports (animation-timeline: view()) {
  .clients::before { animation: glow-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 50%; }
}
@keyframes glow-drift { from { transform: translateY(-40px); } to { transform: translateY(90px); } }
.globe { margin-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
.map { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; aspect-ratio: 1440 / 524; -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 55%, transparent 100%); }
.map img, .map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map svg { overflow: visible; }
.arc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 6 10; opacity: .75; animation: flow 1.6s linear infinite; filter: drop-shadow(0 0 4px rgba(var(--glow), .6)); }
@keyframes flow { to { stroke-dashoffset: -32; } }
.pin .core-dot { fill: var(--accent); }
.pin .pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ping 2.4s ease-out infinite; }
.pin.hq .core-dot { fill: #FFFFFF; filter: drop-shadow(0 0 8px rgba(var(--glow), .9)); }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.pin text { font-family: 'Newsreader', Georgia, serif; font-size: 26px; font-weight: 600; fill: #FFFFFF; }
.globe .countries { margin-top: 0; justify-content: center; }
.clients .label { margin-bottom: 20px; }
.marquee { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 12px; width: max-content; animation: scroll 56s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.client { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--text); transition: border-color .4s, transform .4s var(--ease); }
.client:hover { border-color: rgba(var(--glow), .5); transform: translateY(-3px); color: var(--text); }
.client img, .mono { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.client img { object-fit: cover; filter: grayscale(1); opacity: .7; transition: filter .5s, opacity .5s; }
.client:hover img { filter: none; opacity: 1; }
.mono { background: #2A2A26; color: var(--soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.client b { display: block; font-size: 14px; font-weight: 600; }
.client small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* countries */
.countries { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.country { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; padding: 10px 18px; border-radius: 999px; background: var(--card); border: 1px solid #2E2E2A; transition: border-color .4s, background .4s, transform .4s var(--ease); }
.country:hover { border-color: var(--accent); transform: translateY(-2px); }
.country .flag { font-size: 20px; line-height: 1; }
.country b { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--accent); }

/* cards + spotlight (fx.js feeds --x / --y) */
.card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 18px; transition: transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(var(--glow), .09), transparent 60%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card:hover { transform: translateY(-4px); border-color: #3A3A34; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.card .num { font-size: 30px; line-height: 1; color: var(--accent); }
.card h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.card > p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--list); }
.card li::marker { color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tags span { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--chip); color: var(--soft); transition: border-color .4s, color .4s; }
.card:hover .tags span { border-color: rgba(var(--glow), .4); }
.card.start { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.card.start::before { background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.35), transparent 60%); }
.card.start .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .25em; }
.card.start h3 { font-weight: 650; }
.card.start > p { color: var(--accent-ink); }
.card.start ul { color: var(--bg); }
.card.start li::marker { color: var(--bg); }
.card.start .btn { margin-top: auto; align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15px; }

/* results */
.case { padding: 36px; gap: 26px; }
.case h3 { font-size: 26px; }
.case .label { font-size: 12px; }
.case-title { display: flex; flex-direction: column; gap: 8px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.metrics div { display: flex; flex-direction: column; gap: 6px; }
.metrics .serif { font-size: 46px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.metrics span:last-child { font-size: 13px; color: var(--muted); }
.case > p { color: var(--soft); }

/* why */
.why > div { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; position: relative; }
.why > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #3A3A35; }
.why > div::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.why > div:hover::after { transform: scaleX(1); }
.why h3 { font-size: 19px; font-weight: 600; }
.why p { font-size: 15px; line-height: 1.75; color: var(--muted); }

/* process cycle: 진단 is the one-time entry (START pill), then a weekly loop of 4 steps.
   A runner arc travels the ring and lights each loop step in turn (4 steps x 2s). */
.cycle { --size: 440px; --r: 176px; --turn: 8s; display: grid; grid-template-columns: var(--size) minmax(0, 1fr); gap: 64px; align-items: center; }
.ring { position: relative; width: var(--size); height: var(--size); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring .ring-line { fill: none; stroke: var(--border); stroke-width: 1.5; }
.ring .runner { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 140 866; transform-box: fill-box; transform-origin: center; animation: orbit var(--turn) linear infinite; filter: drop-shadow(0 0 6px rgba(var(--glow), .6)); }
.ring .arrows { fill: none; stroke: var(--accent); stroke-opacity: .7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ring .entry { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
/* arc head (rotation + 50deg) reaches the top node at t=0, then one node every 2s */
@keyframes orbit { from { transform: rotate(-140deg); } to { transform: rotate(220deg); } }
.start-pill { position: absolute; left: -8px; top: 12%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 16px; font-weight: 650; box-shadow: 0 0 0 8px rgba(var(--glow), .12), 0 10px 30px rgba(var(--glow), .3); }
.start-pill b { font-family: 'Newsreader', Georgia, serif; font-size: 14px; font-weight: 500; }
.core { position: absolute; inset: 24%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: radial-gradient(circle, rgba(var(--glow), .10), transparent 70%); }
.core small { font-size: 12px; font-weight: 500; letter-spacing: .25em; color: var(--muted); }
.core strong { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.core .it { font-size: 19px; color: var(--accent); }
.node { --a: calc(var(--i) * 90deg - 90deg); position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: var(--card); border: 1px solid var(--chip); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 600; text-align: center; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); animation: lit var(--turn) linear infinite; animation-delay: calc(var(--i) * var(--turn) / 4); }
.node b { font-family: 'Newsreader', Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1; color: var(--accent); animation: lit-num var(--turn) linear infinite; animation-delay: inherit; }
@keyframes lit { 0%, 21% { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 8px rgba(var(--glow), .12), 0 0 40px rgba(var(--glow), .35); } 25%, 100% { background: var(--card); color: var(--text); border-color: var(--chip); box-shadow: none; } }
@keyframes lit-num { 0%, 21% { color: var(--bg); } 25%, 100% { color: var(--accent); } }
.cycle-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cycle-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); animation: lit-row var(--turn) linear infinite; animation-delay: calc(var(--i) * var(--turn) / 4); }
.cycle-list li.start { animation: none; }
.cycle-list li:last-child { border-bottom: 1px solid var(--line); }
.cycle-list .serif { font-size: 30px; line-height: 1; color: var(--accent); }
.step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cycle-list h3 { font-size: 18px; font-weight: 600; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--glow), .45); color: var(--accent); white-space: nowrap; }
.cycle-list p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--chip); color: var(--soft); }
@keyframes lit-row { 0%, 21% { opacity: 1; } 25%, 100% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
.process-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; margin-top: 80px; }
.rhythm, .ninety-wrap { display: flex; flex-direction: column; gap: 4px; }
.rhythm .label, .ninety-wrap > .label { margin-bottom: 16px; }
.rhythm-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--soft); }
.rhythm-row:last-child { border-bottom: 1px solid var(--line); }
.rhythm-row .label { margin: 0; color: var(--accent); letter-spacing: .15em; }
.ninety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ninety > div { display: flex; flex-direction: column; gap: 8px; }
.ninety-bar { height: 4px; border-radius: 4px; background: var(--card); overflow: hidden; margin-bottom: 8px; }
.ninety-bar i { display: block; height: 100%; width: calc(var(--n) * 33.34%); background: var(--accent); border-radius: inherit; box-shadow: 0 0 10px rgba(var(--glow), .6); transform-origin: left; }
.ninety .tag { align-self: flex-start; }
.ninety strong { font-size: 18px; font-weight: 600; }
.ninety span:last-child { font-size: 14px; line-height: 1.6; color: var(--muted); }
@supports (animation-timeline: view()) {
  .ninety-bar i { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* plans: vertical pricing cards */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-top: 16px; }
.price-card { gap: 14px; padding: 36px 32px; }
.price-top { display: flex; flex-direction: column; gap: 10px; min-height: 112px; }
.price-card h3 { font-size: 24px; }
.fit { font-size: 15px; line-height: 1.6; color: var(--muted); }
.price { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.price .it { font-size: 38px; line-height: 1; white-space: nowrap; }
.price span:last-child { font-size: 14px; color: var(--muted); }
.meta { font-size: 14px; color: var(--soft); }
.price-card hr { width: 100%; border: none; border-top: 1px solid var(--border); margin: 10px 0 6px; }
.inc { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.checks { list-style: none; padding: 0 !important; margin: 0 0 24px; gap: 12px !important; }
.checks li { display: flex; align-items: flex-start; gap: 10px; }
.checks .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); stroke-width: 2.2; }
.price-card .btn { margin-top: auto; width: 100%; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--chip); }
.btn-outline:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.price-card.featured { border-color: rgba(var(--glow), .6); background: linear-gradient(180deg, rgba(var(--glow), .08), var(--card) 45%); transform: translateY(-14px); box-shadow: 0 40px 80px -40px rgba(var(--glow), .35); }
.price-card.featured:hover { transform: translateY(-18px); }
.badge { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .12em; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--bg); }

/* story */
#story { border-top: 1px solid var(--line); }
.story { padding-top: 144px; padding-bottom: 144px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.story h2 { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.story .logo { font-size: clamp(80px, 11vw, 160px); }
.story h2 > span:last-child { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.story > p:not(.label):not(.it) { max-width: 680px; font-size: 18px; line-height: 1.9; color: var(--soft); }
.story > p.it { font-size: clamp(28px, 3vw, 40px); color: var(--accent); }

/* closing CTA */
.closing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: end; }
.closing h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.3; font-weight: 600; letter-spacing: -0.03em; margin-top: 20px; }
.closing h2 .it { color: var(--muted); font-size: 1.1em; }
.closing-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.closing-cta p { font-size: 17px; line-height: 1.8; color: var(--muted); }

footer .bar { min-height: 0; padding-top: 36px; padding-bottom: 36px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
footer .logo { color: #FFFFFF; font-size: 22px; }

/* contact drawer (native dialog) */
dialog.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(540px, 100%); max-width: 100%; border: none; border-left: 1px solid var(--border); padding: 0; background: var(--bg-alt); color: var(--text); box-shadow: -30px 0 80px rgba(0,0,0,.6); }
dialog.drawer[open] { animation: slide .6s var(--ease) both; }
dialog.drawer::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); animation: appear .4s ease both; }
.drawer-inner { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 28px; }
dialog[open] .drawer-inner > *, dialog[open] form > * { animation: rise .7s var(--ease) both; }
dialog[open] form > :nth-child(2) { animation-delay: .06s; } dialog[open] form > :nth-child(3) { animation-delay: .12s; }
dialog[open] form > :nth-child(4) { animation-delay: .18s; } dialog[open] form > :nth-child(5) { animation-delay: .24s; }
dialog[open] form > :nth-child(6) { animation-delay: .3s; } dialog[open] form > :nth-child(7) { animation-delay: .36s; }
dialog[open] form > :nth-child(8) { animation-delay: .42s; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-top .logo { font-size: 26px; }
.close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--chip); background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .4s var(--ease), background .3s, color .3s; }
.close:hover { transform: rotate(90deg); background: var(--accent); color: var(--bg); }
.drawer h2 { font-size: 30px; line-height: 1.3; font-weight: 600; letter-spacing: -0.03em; }
.drawer h2 .it { color: var(--accent); font-size: 1.1em; }
.drawer form { display: flex; flex-direction: column; gap: 18px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--soft); }
input, select, textarea { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--chip); background: var(--bg); color: #FFFFFF; font-size: 16px; font-family: inherit; transition: border-color .25s, box-shadow .25s; }
textarea { padding: 12px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--glow), .15); }
.drawer-mail { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.drawer-mail a { font-family: 'Newsreader', Georgia, serif; font-size: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { font-size: 14px; line-height: 1.6; color: #FFA48F; }
.form-error a { color: inherit; }
.btn[disabled] { opacity: .7; cursor: progress; }
/* success: halo pops, ring draws, check draws, rays burst, then the copy rises in */
.sent { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.burst { position: relative; width: 120px; height: 120px; margin-bottom: 20px; }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-halo { fill: rgba(var(--glow), .12); transform-box: fill-box; transform-origin: center; animation: halo .9s .1s var(--ease) both, breathe 3.2s 1.8s ease-in-out infinite; }
.s-ring { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); filter: drop-shadow(0 0 8px rgba(var(--glow), .6)); animation: draw-line .8s .2s var(--ease) forwards; }
.s-check { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line .5s .85s var(--ease) forwards; }
.rays { position: absolute; inset: 0; }
.rays i { position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 2px; background: var(--accent); opacity: 0; transform: rotate(var(--a)) translateY(-50px); animation: ray .8s 1.15s var(--ease) forwards; }
@keyframes ray { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-50px) scaleY(.3); } 55% { opacity: 1; transform: rotate(var(--a)) translateY(-70px) scaleY(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-86px) scaleY(.3); } }
@keyframes halo { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes breathe { 50% { transform: scale(1.12); } }
.sent h2, .sent .note, .sent-sig { animation: rise .8s var(--ease) both; }
.sent h2 { animation-delay: 1.2s; }
.sent .note { animation-delay: 1.35s; }
.sent .sent-reply { animation-delay: 1.5s; }
.sent-reply b { color: var(--text); font-weight: 600; word-break: break-all; }
.sent-sig { margin-top: 12px; font-size: 24px; color: var(--accent); animation-delay: 1.7s; }
[hidden] { display: none !important; }

/* motion */
.rise { animation: rise 1s var(--ease) both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .28s; } .d4 { animation-delay: .4s; } .d5 { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { to { transform: translate(-90px, 70px) scale(1.12); } }
@keyframes scroll { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes slide { from { transform: translateX(100%); } to { transform: none; } }
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aurora { opacity: 1; }
  .s-ring, .s-check { stroke-dashoffset: 0; }
  .rays { display: none; }
  .trace { stroke-dashoffset: 0; }
}

/* mobile: shorter page; services and plans swipe, CTA stays in reach */
.mobile-cta { display: none; }
@media (max-width: 860px) {
  .navlinks { display: none; }
  .section { padding: 88px 0; }
  .hero { padding: 72px 0 64px; }
  .hero::before { width: 420px; height: 420px; right: -200px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; padding-top: 28px; }
  .stat .serif { font-size: 48px; }
  .industries { gap: 10px 20px; }
  .industries span { font-size: 18px; }
  .head { margin-bottom: 36px; }

  .swipe { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 4px 24px 16px; scrollbar-width: none; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 min(84%, 420px); scroll-snap-align: center; }
  .card:hover { transform: none; }
  .step { flex-basis: 64%; }

  .trace, .star { display: none; }
  .pin text { display: none; }
  .globe { margin-bottom: 40px; }
  .cycle { --size: 300px; --r: 120px; grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; }
  .node { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 12px; }
  .node b { font-size: 16px; }
  .core strong { font-size: 20px; }
  .core .it { font-size: 15px; }
  .start-pill { left: -16px; top: 6%; padding: 7px 14px; font-size: 13px; }
  .ninety { grid-template-columns: minmax(0, 1fr); }
  .rhythm-row { grid-template-columns: 90px minmax(0, 1fr); }
  .cycle-list { width: 100%; }
  .mobile-cta { display: block; position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(140%); transition: transform .5s var(--ease); }
  .mobile-cta .btn { width: 100%; min-height: 56px; }
  .show-cta .mobile-cta { transform: none; }
  footer .bar { padding-bottom: 96px; }
}
@media (max-width: 480px) {
  .bar .logo { font-size: 26px; }
  .lang { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .drawer-inner { padding: 20px 20px 32px; }
  .case { padding: 28px; }
  .metrics .serif { font-size: 38px; }
}
.note { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: -2px; }
textarea::placeholder { color: #6F6C66; line-height: 1.6; transition: color .3s; }
textarea.ph-out::placeholder { color: transparent; }