@font-face { font-family: Gabarito; src: url(../fonts/gabarito-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --white: #FFFFFF; --grey: #F1F2F4; --ink: #16171B; --red: #EC4433; --red-text: #C62A1F;
  --ink-2: #2A2C33; --muted: #5C5E67; --line: #DADCE1;
  --display: Gabarito, system-ui, sans-serif; --text: 'Hanken Grotesk', system-ui, sans-serif;
  --pad: clamp(20px, 3.9vw, 56px);
  --card-w: clamp(236px, 19vw, 284px);
  /* one easing family for the whole page: a strong ease-out. CSS uses this curve, the scripts use critically damped
     springs, which trace the same shape (fast start, long soft landing) and never overshoot */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* matte card stock: a faint paper grain, multiplied over the card's own ink */
  --grain: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* shadows of a card on a white table, from close contact to the far soft fall-off. Same layer count in every
     state, so they interpolate instead of jumping. rest = lying down, lift = picked up a little, press = pushed flat */
  --sh-rest: 0 1px 1px rgba(22,23,27,.10), 0 3px 6px -2px rgba(22,23,27,.12), 0 22px 40px -20px rgba(22,23,27,.36), 0 52px 90px -42px rgba(22,23,27,.28);
  --sh-lift: 0 2px 2px rgba(22,23,27,.05), 0 10px 16px -8px rgba(22,23,27,.14), 0 38px 56px -24px rgba(22,23,27,.36), 0 76px 120px -48px rgba(22,23,27,.30);
  --sh-press: 0 1px 1px rgba(22,23,27,.16), 0 2px 3px -1px rgba(22,23,27,.16), 0 12px 22px -16px rgba(22,23,27,.32), 0 28px 50px -34px rgba(22,23,27,.20);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.5 var(--text); overflow-x: clip; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* keyboard focus never animates: the ring is there the moment Tab lands. It follows each element's own radius */
.foot__facts a, .top__logo { border-radius: 4px; }

/* ---- the stage: on desktop the hero holds still while the scroll flies the camera through the cards ---- */
.stage { position: relative; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* the header band stays clean: whatever the deal, the pointer or the scroll does to the cards, they fade out before they reach the logo and the button */
.scene { -webkit-mask-image: linear-gradient(#0000 0 var(--band), #000 calc(var(--band) + 64px)); mask-image: linear-gradient(#0000 0 var(--band), #000 calc(var(--band) + 64px)); --band: 84px; }
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .stage { height: 150vh; }
  .hero { position: sticky; top: 0; height: 100vh; }
}

/* ---- header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--pad) 0; }
.top__logo { display: block; color: var(--ink); border-radius: 4px; }
.top__logo svg { width: clamp(112px, 9.6vw, 140px); height: auto; aspect-ratio: 1703.11 / 435.6; }
.top__wa {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--white);
  font: 650 15px/1 var(--text); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 1px rgba(22,23,27,.14), 0 10px 22px -12px rgba(22,23,27,.55);
  transition: transform .16s var(--ease), box-shadow .22s var(--ease), background-color .16s var(--ease);
}
.top__wa svg { width: 18px; height: 18px; transition: rotate .22s var(--ease); }
.top__short { display: none; }

/* ---- the hero: red card, the sentence, black card ---- */
.hero__grid {
  flex: 1; display: grid; align-items: center; justify-items: center;
  grid-template-columns: 1fr minmax(0, 680px) 1fr;
  grid-template-areas: "red core ink";
  column-gap: clamp(24px, 3vw, 44px); padding: 8px var(--pad) 40px;
}
.core { grid-area: core; position: relative; text-align: center; padding: 8px 0; }
/* a breath of white under the words, so a card far behind never sits in a line of text */
.core::before { content: ""; position: absolute; inset: -14% -14%; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.94) 55%, rgba(255,255,255,0)); }
.core__h1 {
  margin: 0; font: 800 clamp(38px, 4.7vw, 68px)/0.96 var(--display); letter-spacing: -0.04em;
  text-wrap: balance; display: flex; flex-direction: column; gap: 0.04em;
}
/* each clause leans toward its own card: the people on the red side, the software on the black side */
.core__a { align-self: flex-start; text-align: left; max-width: 11.5em; }
.core__b { align-self: flex-end; text-align: right; max-width: 13em; }
.core__thesis { margin: 24px auto 0; max-width: 27em; font: 450 clamp(17px, 1.35vw, 20px)/1.45 var(--text); color: #34363D; text-wrap: balance; }
.cta {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 28px; padding: 18px 26px; border-radius: 10px;
  background: var(--ink); color: var(--white); text-decoration: none; font: 650 17px/1 var(--text); letter-spacing: -0.005em;
  /* an ink card, not a pill: a hairline of light on its top edge, a contact shadow, and a long soft one */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 1px rgba(22,23,27,.14), 0 14px 28px -14px rgba(22,23,27,.55);
  transition: transform .16s var(--ease), box-shadow .22s var(--ease), background-color .16s var(--ease);
}
.cta svg { width: 21px; height: 21px; transition: rotate .22s var(--ease); }
/* the two WhatsApp buttons: lift on hover, the chat bubble turns toward the words, and a press pushes the button
   flat onto the table. The press is quicker than the release, so the click lands at once and lets go softly */
@media (hover: hover) and (pointer: fine) {
  .cta:hover, .top__wa:hover { transform: translateY(-2px); background: var(--ink-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 2px 3px rgba(22,23,27,.10), 0 22px 36px -16px rgba(22,23,27,.6); }
  .cta:hover svg, .top__wa:hover svg { rotate: -12deg; }
}
.cta:active, .top__wa:active { transform: translateY(0) scale(.97); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 1px rgba(22,23,27,.2), 0 6px 12px -8px rgba(22,23,27,.5); transition-duration: .09s; }
.top__logo { transition: transform .16s var(--ease); }
.top__logo:active { transform: scale(.97); transition-duration: .09s; }
.core__note { margin: 13px 0 0; font-size: 15px; color: var(--muted); }

/* ---- the two main cards: separate objects, one per half ---- */
.half {
  position: relative; width: var(--card-w); aspect-ratio: 5 / 7; padding: 50px 24px 24px;
  display: flex; flex-direction: column; border-radius: 20px;
  /* card stock: a thin light edge on top, a darker one at the bottom where the card turns away from the light */
  box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1.5px 0 var(--edge-lo), var(--sh-rest);
  transition: translate .28s var(--ease), rotate .5s var(--ease), scale .16s var(--ease), box-shadow .28s var(--ease);
}
/* the paper grain, over the ink and under the words */
.half::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--grain); opacity: .07; mix-blend-mode: multiply; pointer-events: none; }
.half--ink::before { mix-blend-mode: screen; opacity: .05; }
.half--red { grid-area: red; background: var(--red); color: var(--ink); rotate: -4.5deg; --edge-hi: rgba(255,255,255,.24); --edge-lo: rgba(120,20,10,.22); --tilt: -2deg; }
.half--ink { grid-area: ink; background: var(--ink); color: #D5D7DC; rotate: 4.5deg; --edge-hi: rgba(255,255,255,.09); --edge-lo: rgba(0,0,0,.5); --tilt: 2deg; }
/* the whole card is one pressable object: a link laid over it, with the focus ring drawn around the card itself */
.half__go { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.half__go:focus-visible { outline-offset: 6px; }
/* picked up: the card rises off the table and turns a little toward straight, its shadow grows long and soft.
   The pointer then tilts it in 3D (js/touch.js). Pressed: it goes flat on the table, shadow tight */
.half:hover, .half:has(.half__go:focus-visible) { box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1.5px 0 var(--edge-lo), var(--sh-lift); }
.half:active { scale: .982; box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1.5px 0 var(--edge-lo), var(--sh-press); transition-duration: .1s, .5s, .1s, .1s; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .half:hover, .half:has(.half__go:focus-visible) { translate: 0 -10px; rotate: var(--tilt); }
  .half:active { translate: 0 -3px; }
}
/* the corner suit gives its place to the WhatsApp bubble, so the card says what a click does without a word */
.half__wa { position: absolute; bottom: 17px; right: 18px; width: 24px; height: 24px; color: var(--white); opacity: 0; translate: 0 6px; filter: blur(2px); transition: opacity .2s var(--ease), translate .28s var(--ease), filter .2s var(--ease); }
.half__ix--br { transition: opacity .2s var(--ease), translate .28s var(--ease), filter .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .half:hover .half__ix--br { opacity: 0; translate: 0 -6px; filter: blur(2px); }
  .half:hover .half__wa { opacity: 1; translate: 0 0; filter: none; }
}
.half:has(.half__go:focus-visible) .half__ix--br { opacity: 0; }
.half:has(.half__go:focus-visible) .half__wa { opacity: 1; translate: 0 0; filter: none; }
.half__ix { position: absolute; width: 24px; height: 24px; color: var(--white); }
.half__ix--tl { top: 18px; left: 20px; }
.half__ix--br { bottom: 18px; right: 20px; rotate: 180deg; }
.half__name { margin: 0; font: 800 clamp(28px, 2.2vw, 33px)/1 var(--display); letter-spacing: -0.035em; color: var(--white); }
.half__line { margin: 12px 0 0; font: 500 15px/1.42 var(--text); text-wrap: pretty; }
.half__live { margin: auto 0 0; padding-top: 16px; }
.half__cap { margin-top: 10px; font: 600 13px/1.35 var(--text); padding-right: 26px; text-wrap: balance; }
.half--ink .half__cap { color: #A9ACB4; font-weight: 500; }

/* the red card's live detail: the team writes its own rules, line by line */
.sheet__t { margin: 0; padding: 12px 14px 0; background: var(--white); border-radius: 10px 10px 0 0; font: 700 14px/1.2 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.sheet__lines { width: 100%; height: auto; background: var(--white); border-radius: 0 0 10px 10px; padding: 0 4px 8px; }
.sheet__rule path { stroke: var(--line); stroke-width: 1; fill: none; }
.sheet__pips { color: var(--red); }
.ink { fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* the black card's live detail: a tool already delivered, being adjusted with the team */
.tool__ui { width: 100%; height: auto; overflow: visible; }
.tool__win { fill: var(--ink-2); stroke: #3A3C44; }
.tool__dots, .tool__side { fill: #4A4D56; }
.tool__row { fill: #23252B; }
.tool__bar { fill: #8E919A; transform-box: fill-box; transform-origin: left center; }
.tool__bar--2 { fill: var(--white); }
.tool__knob rect { fill: #4A4D56; }
.tool__knob-dot { fill: var(--white); transform-box: fill-box; }
.tool__cursor { fill: var(--white); stroke: var(--ink); stroke-width: 1; transform: translate(150px, 82px); }

/* ---- the board: what kadabra is, a card laid on the table right above the headline, where the eye lands first ---- */
.board {
  margin: 0 auto 30px; display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 32em; text-align: left;
  padding: 14px 22px 14px 16px; border-radius: 14px; background: var(--grey); rotate: -1.2deg;
  position: relative; isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 1px rgba(255,255,255,.9), 0 1px 1px rgba(22,23,27,.06), 0 14px 28px -18px rgba(22,23,27,.3);
  font: 600 17px/1.38 var(--text); color: var(--ink); text-wrap: balance;
  transition: rotate .5s var(--ease), box-shadow .28s var(--ease);
}
.board::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--grain); opacity: .05; mix-blend-mode: multiply; pointer-events: none; }
.board__mark { flex: none; width: 34px; height: auto; overflow: visible; }
/* the board is not a button, so it doesn't lift. Under the pointer it settles square on the table and the
   red card of the mark fans out from behind the ink one, the two halves showing themselves */
.board__back { transform-box: fill-box; transform-origin: 100% 100%; transition: rotate .5s var(--ease), translate .5s var(--ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .board:hover { rotate: -.3deg; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 1px rgba(255,255,255,.9), 0 1px 1px rgba(22,23,27,.08), 0 10px 20px -16px rgba(22,23,27,.34); }
  .board:hover .board__back { rotate: -16deg; translate: -3% 2%; }
}

/* ---- footer ---- */
.foot { background: var(--grey); padding: clamp(48px, 7vw, 96px) var(--pad) 32px; position: relative; z-index: 1; }
.foot__in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px 40px; }
.foot__close { margin: 0; font: 800 clamp(40px, 6vw, 84px)/0.95 var(--display); letter-spacing: -0.045em; }
.cta--foot { margin: 0; justify-self: end; }
.foot__facts { grid-column: 1 / -1; margin: 22px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 18px 32px; }
.foot__facts dt { font-size: 13px; color: var(--muted); }
.foot__facts dd { margin: 3px 0 0; font-weight: 600; font-size: 16px; }
.foot__facts a { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(22,23,27,.3); transition: text-decoration-color .16s var(--ease), color .16s var(--ease); }
.foot__facts a:hover { text-decoration-color: var(--red); }
.foot__facts a:active { color: var(--red-text); text-decoration-color: var(--red-text); }
.foot__base { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.foot__logo { width: 96px; height: auto; aspect-ratio: 1703.11 / 435.6; color: var(--ink); }
.foot__legal { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- motion: one dealt entrance, then only the two small live details keep working ---- */
@media (prefers-reduced-motion: no-preference) {
  .half { animation: deal 1.15s var(--ease) backwards; }
  .half--red { animation-delay: .55s; --from: -14deg; --dx: -60px; }
  .half--ink { animation-delay: .7s; --from: 14deg; --dx: 60px; }
  .core > * { animation: rise .9s var(--ease) both; }
  .core__h1 { animation-delay: .1s; } .core__thesis { animation-delay: .22s; } .cta { animation-delay: .32s; } .core__note { animation-delay: .38s; }

  .ink { stroke-dashoffset: 1; animation: write 10s linear infinite; }
  .ink--2 { animation-name: write2; } .ink--3 { animation-name: write3; }
  .tool__bar--2 { animation: widen 8s var(--ease) infinite; }
  .tool__cursor { animation: point 8s var(--ease) infinite; }
  .tool__knob-dot { animation: knob 8s var(--ease) infinite; }
}
@keyframes deal { from { opacity: 0; translate: var(--dx) 70px; rotate: var(--from); } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
/* three lines written one after another, held, then the sheet clears for the next team */
@keyframes write  { 0% { stroke-dashoffset: 1; } 14%, 86% { stroke-dashoffset: 0; opacity: 1; } 94% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; } }
@keyframes write2 { 0%, 18% { stroke-dashoffset: 1; } 30%, 86% { stroke-dashoffset: 0; opacity: 1; } 94% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; } }
@keyframes write3 { 0%, 34% { stroke-dashoffset: 1; } 48%, 86% { stroke-dashoffset: 0; opacity: 1; } 94% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; } }
/* the cursor goes to the switch, turns it on, and the second row's value grows to fit what the team asked for */
@keyframes point { 0%, 8% { transform: translate(150px, 82px); } 26%, 34% { transform: translate(205px, 58px); } 52%, 92% { transform: translate(178px, 94px); } 100% { transform: translate(150px, 82px); } }
@keyframes knob { 0%, 30% { transform: translateX(0); } 38%, 88% { transform: translateX(10px); } 96%, 100% { transform: translateX(0); } }
@keyframes widen { 0%, 34% { transform: scaleX(1); } 50%, 88% { transform: scaleX(1.95); } 96%, 100% { transform: scaleX(1); } }

/* ---- below the triptych: the sentence first, the two cards side by side under it ---- */
@media (max-width: 1099px) {
  .hero__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "core core" "red ink"; row-gap: 40px; padding-top: 40px; padding-bottom: 48px; }
  .core { max-width: 640px; }
  .half--red { justify-self: end; } .half--ink { justify-self: start; }
  .half { rotate: none; }
}
/* phones: calm and fast. The cards turn into two short bands, the live details rest */
@media (max-width: 760px) {
  .top { padding-top: 16px; }
  .top__long { display: none; } .top__short { display: inline; }
  .top__wa { padding: 9px 13px; font-size: 14px; }
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "core" "red" "ink"; row-gap: 14px; padding-top: 26px; }
  .core { text-align: left; margin-bottom: 18px; }
  .core::before { display: none; }
  .core__a, .core__b { align-self: auto; text-align: left; max-width: none; }
  .core__h1 { display: block; font-size: clamp(34px, 9.4vw, 44px); line-height: 1; }
  .core__thesis { margin: 16px 0 0; }
  .cta { margin-top: 22px; }
  .half, .half--red, .half--ink { justify-self: stretch; width: auto; aspect-ratio: auto; padding: 20px 64px 20px 20px; border-radius: 16px; }
  .half__ix--tl { top: 20px; left: auto; right: 20px; }
  .half__ix--br { display: none; }
  .half__wa { opacity: .7; translate: none; filter: none; width: 20px; height: 20px; bottom: 18px; right: 20px; }
  .half:active { scale: .985; }
  .half__name { font-size: 22px; }
  .half__line { font-size: 15px; margin-top: 8px; }
  .half__live { display: none; }
  .half { animation: none; }
  .board { rotate: none; margin: 0 0 20px; width: auto; padding: 12px 16px 12px 13px; gap: 13px; font-size: 15px; }
  .board__mark { width: 28px; }
  .scene { --band: 60px; }
  .foot__in { grid-template-columns: 1fr; }
  .cta--foot { justify-self: start; }
  .foot__facts { grid-template-columns: 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; }
}