/* ==========================================================================
   forza. — stylesheet

   1. Tokens        colour, depth, shape, size, motion, type
   2. Base          reset, page, focus, shared helpers, icons
   3. Header        floating pill, links, call to action, language switch
   4. Buttons       primary, WhatsApp, secondary, text links
   5. Layout & type
   6. Hero          headline, price, trust pills, receipt
   7. Demos         example sites in a desktop window and a phone
   8. Plans
   9. Past work     slider, device frames, filters
   10. Contact      person, steps, live preview, form
   11. Footer & 404
   12. Motion       scroll reveals, language crossfade, reduced motion, print

   Re-theming: everything colour-related lives in the Colour tokens. Shadows and glows are
   mixed from those colours, so changing --accent (and its hover/press/deep shades) recolours
   every button, ring and glow. The only fixed colours outside the tokens are the input icons
   (SVG data URIs can't read CSS variables) and the demo sites, which have their own styles.
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */
:root {
  /* Colour */
  --accent: #0071E3;
  --accent-hover: #0077ED;
  --accent-press: #006ADB;
  --accent-deep: #003278;          /* the dark shade under accent surfaces */
  --on-accent: #FFFFFF;

  --bg: #FFFFFF;                   /* page */
  --bg-alt: #F5F5F7;               /* alternate sections, title bars */
  --surface: #FFFFFF;              /* cards, pills, the form */
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #8E8E93;               /* icons, placeholders */
  --text-4: #AEAEB2;               /* empty states */
  --text-5: #D9D9DE;               /* text that hasn't filled in yet */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);

  --fill: #F2F2F5;                 /* form wells, pressed pills */
  --fill-hover: #ECECF0;
  --fill-soft: #FAFAFC;
  --tile: #F4F4F6;                 /* bottom of raised icon tiles */
  --window-dot: #D1D1D6;
  --glass: rgba(118, 118, 128, 0.12);
  --glass-light: rgba(255, 255, 255, 0.62);
  --glass-blur: blur(20px) saturate(180%);

  --success: #34C759;
  --danger: #C4320A;
  --danger-tint: #FFF6F3;
  --whatsapp: #25D366;
  --whatsapp-ink: #05301A;
  --whatsapp-icon: #1FB855;
  --whatsapp-deep: #00501E;

  --paper: #F2EEE4;                /* the receipt */
  --ink: #17211F;
  --device: #030607;
  --device-screen: #0B1416;
  --device-rim: #4A5558;
  --device-edge: #0C1213;

  /* Depth */
  --hair: 1px;
  --edge: rgba(0, 0, 0, 0.07);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --lit: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 24px -10px rgba(0, 0, 0, 0.12);
  --shadow-lift: 0 1px 1px rgba(0, 0, 0, 0.05), 0 18px 36px -14px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -10px rgba(0, 0, 0, 0.14);
  --shadow-card-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05), 0 28px 56px -18px rgba(0, 0, 0, 0.24);
  --shadow-raised: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04), 0 26px 60px -22px rgba(0, 0, 0, 0.24);
  --shadow-window: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.06), 0 22px 44px -14px rgba(0, 0, 0, 0.30);
  --shadow-pill: 0 0 0 0.5px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px -8px rgba(0, 0, 0, 0.18);
  --shadow-pill-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), 0 10px 22px -10px rgba(0, 0, 0, 0.24);
  --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.10), 0 3px 8px -2px rgba(0, 0, 0, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-accent: var(--lit), 0 1px 2px color-mix(in srgb, var(--accent-deep) 22%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow-accent-press: inset 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 1px color-mix(in srgb, var(--accent-deep) 20%, transparent);
  --ring-accent: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);

  /* Shape */
  --radius: 18px;
  --radius-lg: 24px;
  --radius-field: 14px;
  --pill: 999px;

  /* Size */
  --max: 1120px;
  --h-sm: 40px;
  --h-md: 44px;
  --h-lg: 52px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* true hairlines on high-density screens */
@media (min-resolution: 2dppx) { :root { --hair: 0.5px; --edge: rgba(0, 0, 0, 0.12); } }


/* 2. Base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overscroll-behavior: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
p, li, figcaption { text-wrap: pretty; }
[id] { scroll-margin-top: 28px; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); color: inherit; }

/* one focus ring everywhere; an outline follows each element's own corners */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
:is(a, button, input, select, [tabindex]):focus-visible { outline-offset: 2px; }

/* skip link: hidden until a keyboard user tabs to it */
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 50; padding: 10px 16px; border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .9rem;
  transform: translateY(-200%); transition: transform .2s ease;
}
.skip:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Anything that swaps its content (a button's state, or English ⇄ Icelandic) stacks every version
   in one grid cell and hides the inactive ones, so it's as wide as its longest version and never
   jumps. i18n.js wraps translatable text inside controls this way. */
.swap, .i18n-dual { display: inline-grid; justify-items: center; align-items: center; }
.swap > *, .i18n-dual > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
a.i18n-dual, button.i18n-dual { display: inline-grid !important; place-items: center; }  /* beats each control's own display */
html[lang="en"] .i18n-dual > [lang="is"],
html[lang="is"] .i18n-dual > [lang="en"] { visibility: hidden; }
/* text sits on its optical centre inside pills (trimming needs block boxes) */
.i18n-dual > [lang] { display: block; text-box: trim-both cap alphabetic; }

/* scroll progress line along the top */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--accent);
  pointer-events: none;
}


/* Icons: Font Awesome Free 7.3.1 (icons CC BY 4.0, fonts SIL OFL 1.1), cut down to the 19 icons the
   site uses and embedded here, instead of loading the whole library (~340 KB) from a CDN.
   To add an icon: re-run the subset with its codepoint, then add its .fa-name line below. */
@font-face { font-family: "Font Awesome 7 Free"; font-style: normal; font-weight: 900; font-display: block; src: url(data:font/woff2;base64,d09GMk9UVE8AAAeMAAkAAAAADMAAAAdEA4MDAAAAAAAAAAAAAAAAAAAAAAAAAAAADZFFBmAAgRwBNgIkA0AEBgWDHAcgGxwMUZQOUhvgZ0FO9pgCt5O2RZpxszTZo9p9BQWRbkEzQpLZH97TXlQxg3LpXDjqxK85Z+QA8FPiHD/T9VYjbeUqqz4EeFWYPwbY5g/4AmxfCLgDggr4NCvNEdGuvSvlJrFMm4nlSd+oOVOZWWHq/QNioLQhunyuCOkDavf/N6f2/vDqUhc5IDkhSckZc0lzefczJLaEElXlXtUAUM7VDlB50m2Y9u4BAqdOv4jnTgVuL7VE4AUkSMTrpFJyh3UN0OBfJxTqfpWVyq5aVe2AaicC59RBtQutdmPVHpx6G+3VYVTSVlmXN4yqsrRZh1nwPjrlLD31fsvAFbFMvUxFe3XRtKcqHE2I/y+MC2JV5yz/35iBDEKo9eawqDhbkt3t59JzBs7effyM5PdxUkAISEwwuCgjUJYzhfxyQGJ9frkgK/FBvxA4BoZfRzDX7BdC8SHmxhUrJYU8PhM8l8OzdGp24fSMvzlijTSa9wQ9fvvfoJzW2U5Ld9c0+HdOW8rSG1MrFwH7TTOAqYDAjSSnF7IBBXShY9ArWHvsEp5PmIgdionKf02JzzIi/9GQxZQlQeAYDMtb3tY5mHWAHLAfhpzRrALgRJA7lnqDAkRPfACCOEo/svlSCeKYKZA8xQ9UvUHuRdKpeQSjEQsYr4kjB6McKl8PtY7yEiPqNITmP4B7ZxNpVUhPD1AaPpT6jaRgYx+BX5KgNGHmJ4uYeyxbqaxZl3gp0Ubm6j1zlFVlMT0PZ85mbqsCO+Q3hNKLo6itBIkff9UTkLPAD3C2WPwSZ7HY5ERg4ubMiVBWc1NsDDod2ZfPPmSx/KGyUq2s1lFUrTq6ByGZpDBBM0mRxE2mj/idRDyW79H6dNMWz7DEx2QNU1IKTyNuJ8q3KamUpsuPbt16xKDmrSHoA6QKo5UXBrNmRaksVua0csFgaTQqYq1D7XMuB8Hx3CQEiyLSrnmf6PVyyc4OeRc/Ti4jIosUxq7vUIkdNBOzfTyQcVdvQnZPG7DvfAfKhi8ggc1CyGdb6b+We+kwwOIkmF8qCZtIE8QJm4+pkizOJAY4sUUQL2bwqERc+UM0Xz6QkAcHcQvDRQghIKmJMw0BOLEgjltMJckys8gI7SyfYYYc8JC2ycRTVgmy4ecgCV+iqYqaJBfjASP/QO1V+zaYodpZaT+X30DIrEhxUWTn5YB1ZOTmYNKIJFHPsq1A3ZbYzFd72ot69jKa8O1bzqJxph/St6K0SWjcWGekb42LVtHzCT19YuBJWDzIMNp1nu2bctVl/uBeaKNQ82PbzCyVmfXxIzIqfBr8pMtO5awskl6OlZvyMC8j0/tFQ4hKQWyi9Mk2KPMnSlaCbeqSqhc/MjvVppVSdW9gHT34z2gJUSi1T7XjwSAwSc28BTOgazizxBESy2Df+3ZXsPE2ZUUQUrxIYyP/tTC6Q/KOyzst77Dnt26bIl29Rvc0ogS6UdfgSyxVl/n2NIDxxfTfCu+WRkzdDDESXN3g3IrijX/Aqrpnk8DdbTkGUeXKKUY5yk6fFHJMgLVCrYIoQspQFkZbGxsyrV0Ing9JVLF+GWb1IBQIGY6WMIjSvbAf3TpgdHr1zvZLl+AvoF1o3/rzsbMTxZN2J46HmosFWdhW0cIzbw7UnAqJgg7J3IuOR/5P/I2db+iO7NZ8B4S7tKbaNyXSEHbiYBOnPOdi0Zz3L39Ac7GwhQHATkoqRFUQaxCYvgkMVKxfnMIfdWE7YiMI36grqBRGpaajYZvSGwPFB8ftOcGtQLvQfcwW45uQdK/82jD0B9yLmhYuqGLCes74IK1PLyp+IYlUhxlDqi+MrvaasL/VG/owMcv0gK9UuaJslS/gKRoT17pyWCbr7ZCSbYDbtVxI5WZfYyGipE2GDK4/qbnigy0eY8p0erVkpoP71qO1Fa5KFSguq2oFUn2AV2rT95X0+00UryiHDIG1bhg64LWvlIikWeiu7A2mGKZIF+05HXYtVT+8UcmVRB32b0P6gQ9ekH0vYJnFNcx+LRrw1GOTgQDqCYTlwDUQEGUyh6qHPh5iQq8GuaeqBBn/svPfBuS8fB4gH+QoR4K9UHoEKGBIRqEIbMZN/68UE4zh7/zW+0P3I+GH84f4o+NP289rv7hf7/+W/n3zt0GWgUwwVT8FtTb6tvG/8aXxkfGQcZvhgyFDf1efpDmncWgsgDhS5CjsYfB9QeuJE40Zf1VadCh45/4qh2vINfL4jucVgAqqqWVtM3rlavk/OsGXZMp4QKPQLZhuTqO2IGB4Dn8owGjSeKK6aQDlBU9RalW5dlMNAAzAvREBjDfKoJs3JsvgobicN6GLgxdTcCUc8vXT3wgDSbrrMVmdlqoze4xFfGhfavVcw3Q16MU+cZ94TEN5TRyYqwus4qr3Jumicid3N0QXuqOBNtDNJnsEMdmv2cWBc4ZkSZFkQci7e/j4kTcUzGBz6au34UMtTU1De4mw6/Y0j+TjC+geO+YIAAAA) format("woff2"); }
@font-face { font-family: "Font Awesome 7 Free"; font-style: normal; font-weight: 400; font-display: block; src: url(data:font/woff2;base64,d09GMk9UVE8AAAPMAAkAAAAABrwAAAOHA4MDAAAAAAAAAAAAAAAAAAAAAAAAAAAADYYYBmAARAE2AiQDEAQGBYNOByAbGQYRVZvlAD4SY+dRGkHlmj2haf7oXeXUk62rN8BWwq6CACVwgGmLyI83AEgdZWoi3bwvJQTnUQIpSabNJo6ZLrVsw0gb8GiIHVbZvKYCGeCsLPrbXh88gf5+UW9E1PqasJXBFmHCWCTV1TbHtqk9KAo+TkjqeRUjlobQDFFFxOlM91xdIvIy0VYumrOqN5beunKV4z6NLquyyDeevR2Rfl1dBeqpPnqrXhCNarGBKsWACmsNVv7bZyxsNCKKMKxCO6KoYbjCz6fCPyCVhiwUbQkJDfXy8fUN9g0JDuRdfCXlSyn/V2MW8cFe/l6+rq8vObLIldddblIVzAcHyldTjiKYjMni4Was5UyxjJF89K8/4ipPt1/Dm4CCuaAQiGCLgKkEhURQMge3haTgJYWPV4blq6o2gAQz6NjEOI4hdGP/OtwIuGLJ8qXL4cpreuIgt757aetgJ3RU0nt76LoVG3H9KOwZODByEEHQxjev8SfgT9/XkjZC+l6+fugAOH/T4r2VoO8tKgWWkwqQDuLwKlwDKKyhuGbVqjUIgiXS5bh8Ytk43M2l9dqlYzgKKM2gODg8PIhgUj2LE0xTHMMDB/AYYEbqluEtfesh9y7N1F2rOvWlWyItx9paLM8Aa9DlB2qPzVEKazilMguTN9NZSLHLveq+3HczUrxMu5DqPxCVXCXW1WEl4CScBERqPUxUcuxg9qIl8CzAI/X7KxCmLJGKzpKSQ6nAXfop5ZoCKnhL2vRQ03k8tBt4gPBmUwHPOFy1cuUqBNES6SpcOYLDgKMTY+MTICVL1rRnoA171vIAYffxpRPLcQXoi2uU4gmOsPnCrCATkUEAkcTQqxnEwjAhQwcBdIaWxBbnZzI3vrd8fz6gNDcQhnlOw7fPyyOEtCx7vEpyDI1k+fwGABnyveX73e/PNZq60GCJQaSBPWGA/2AQ+ScnRz+3V8wziPgDOjJCCCFvu37mZDmaLXr15zk2c0xyfKespwPwf4wAts4TYslPn8xFGrHMJMf0RhyEJzCcBBhl9PUR5OKUE1hBDhGoxZ7fOo1PEsSrU69DowplyjXjuVjENfMmqVMr/Xyx2qg1qVNDrablBZv8SzRSU8ujVqZFtQUaq058+lN4CubFnxdfW9xF1Br1iytscPNChEKMFx++wuBaGFKLAkNeqyvtrTYNh+H9Jnety1NGxa9oeXYvBwAA) format("woff2"); }
@font-face { font-family: "Font Awesome 7 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url(data:font/woff2;base64,d09GMk9UVE8AAANIAAkAAAAABbgAAAMBA4MDAAAAAAAAAAAAAAAAAAAAAAAAAAAADYQcBmAANAE2AiQDCAQGBYNeByAbFQUALgbslrMQm3/60bClMr5XnUNmviydEfQPp977mbSWhcOh0GrL5Ul1qkKxOKnWqzUNuggTtyF6oL0PY1kFCHWBjO/4Sg9kiQJv98hBaVq1CY7X+3r5nLWyFSu5VSkz+JmVfEK7RXWlq3OyLoH/iWvqJ/+9PTbIA75SYiQ9vUZhLIo2Tp3YwKJptvHOB1hiAxoIzTYbY6gYPeQitfPXa1vFHURRNsmy6Tqy6xDU8DQp3XOOkZxSjJVsyb8ddd2qS360TLKXS5YK+sXaVSenLU9POgWtPzUuzyPis3TVqEe/rYZ1pNEfQsJk7RPd1vbr0olpIaQV5wwGpZuxuGhEtFFK3+PSywIPkfkz2kJkmWJYFlmCItip6SA6jLbEC0jxFOuYYcHecoHs3koPYSYUBifcU6FAn9gg4kbduem7/huJf8wyTqOWwhHu9NHJ6fEuAswezZkvgKI7tVLU3lJuNxx0HliAqBSd/PVEMf4fH5fvGqdw5373w6wQC0fKZqC7XxncoJ271nJDyvqNjl3cA/x1//QL4Tle1e/mw17+YgomAjr4EMsj/BRps5u+skm2B9herodngWPa23gOeI5HpheKZmomaveBGR3DsQXo7RP6Nb0g9LWvs2PAjbICj8Ajhxx8NEZgGGDZlpbHcsDy+fI+Hnq5g6i3K9hvntDM9sFY7+JY/wQMTOC40AuaXr6X6QV9acRUOjAjmn5TA8SDMcAkq4XWFYw3ScASZeZzWlC+/nqIiIj/azrYFAj94o4CXO4TF9SEcY0OdAGJt/cU8fSuCXCx8+Tk6/2VSTMI+gEdGQF4NP0Ox0fenNNOfQYhq1TZNNh9+v9fp/UE32rPiwF7biGBA21ZWgQGimdOegJnIhfOsTPmXKNnznP1/bv5hsJJzMzcwdJAT98asGtxAEkzU2sgYqdjZWai8+7bAghELTVMta2c6OjZGGtY1o4C+1QeiMKjsJ0aL3QsrQy6hICQI0VhsM+LWAQSAfuXhrd73gv4mQ7rXaL2qpBnfLUAAAAA) format("woff2"); }
.fa-solid, .fa-regular, .fa-brands {
  --_fa-family: var(--fa-family, "Font Awesome 7 Free");
  display: var(--fa-display, inline-block);
  width: var(--fa-width, 1.25em);
  font-family: var(--_fa-family); font-weight: var(--fa-style, 900); font-style: normal; font-variant: normal;
  font-feature-settings: normal; font-synthesis: none; line-height: 1; text-align: center; text-rendering: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:is(.fa-solid, .fa-regular, .fa-brands)::before { content: var(--fa) / ""; }
@supports not (content: "" / "") { :is(.fa-solid, .fa-regular, .fa-brands)::before { content: var(--fa); } }
.fa-solid { --fa-style: 900; }
.fa-regular { --fa-style: 400; }
.fa-brands { --fa-family: "Font Awesome 7 Brands"; --fa-style: 400; }
.fa-fw { --fa-width: 1.25em; }
.fa-spin { animation: fa-spin 2s linear infinite; }
@keyframes fa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fa-spin { animation: none !important; } }
.fa-check { --fa: "\f00c"; }
.fa-arrow-right { --fa: "\f061"; }
.fa-chevron-right { --fa: "\f054"; }
.fa-chevron-left { --fa: "\f053"; }
.fa-car-side { --fa: "\f5e4"; }
.fa-bed { --fa: "\f236"; }
.fa-utensils { --fa: "\f2e7"; }
.fa-tag { --fa: "\f02b"; }
.fa-store { --fa: "\f54e"; }
.fa-mountain-sun { --fa: "\e52f"; }
.fa-lock { --fa: "\f023"; }
.fa-layer-group { --fa: "\f5fd"; }
.fa-display { --fa: "\e163"; }
.fa-code { --fa: "\f121"; }
.fa-circle-notch { --fa: "\f1ce"; }
.fa-envelope { --fa: "\f0e0"; }
.fa-copy { --fa: "\f0c5"; }
.fa-comment { --fa: "\f075"; }
.fa-whatsapp { --fa: "\f232"; }


/* 3. Header
   ========================================================================== */
/* A floating glass pill that tucks away while you scroll down (header.js toggles .tucked).
   glass.js adds the liquid-glass layers on top. */
.nav {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 20;
  width: min(calc(var(--max) - 16px), calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); height: 56px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 8px 0 22px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
          backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
  transform: translateZ(0);
  transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.nav.tucked { transform: translateY(calc(-100% - 24px)); }
.nav nav { display: flex; gap: 14px; align-items: center; font-size: 0.93rem; color: var(--text-2); }

.brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.04em; }
.brand span { color: var(--accent); }

/* Section links. A soft highlight glides to whichever link you point at (nav.js sets --ink-*),
   and the current section's link turns bold. A hidden bold copy of each word reserves the bold
   width, so nothing moves when the weight changes. */
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--pill);
  color: var(--text-2); font-weight: 450; letter-spacing: -0.012em;
  transition: font-weight .45s var(--ease), color .5s var(--ease), scale .5s var(--ease);
}
.nav-links a:focus-visible, .nav-links a[aria-current="true"] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--text); } }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { scale: 1.03; } }
.nav-links a:active { scale: 0.96; transition-duration: .15s; }
.nav-links a[aria-current="true"] { font-weight: 700; }
.nav-links a:not(.i18n-dual) { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.2; }
.nav-links a [lang] { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.2; }
.nav-links a [lang]::after { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.nav-ink {
  position: absolute; left: 0; top: 50%; z-index: 0; height: 36px; width: var(--ink-w, 0px); margin-top: -18px;
  border-radius: var(--pill);
  background: var(--glass); box-shadow: var(--rim);
  transform: translate3d(var(--ink-x, 0px), 0, 0) scale(var(--ink-s, 0.85));
  opacity: var(--ink-o, 0);
  transition: transform .5s var(--ease), width .5s var(--ease), opacity .35s var(--ease);
  will-change: transform, width;
  pointer-events: none;
}

/* the header's call to action is a small primary button (see Buttons) */
.nav-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; font-weight: 700; font-size: 0.92rem;
}

/* EN / IS: a glass track with a white thumb that slides */
.lang {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 3px; border-radius: var(--pill);
  background: var(--glass); box-shadow: var(--rim);
  view-transition-name: lang-switch;      /* stays out of the page crossfade so the thumb slides */
}
.lang::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: var(--pill); background: var(--surface); box-shadow: var(--shadow-thumb);
  transition: transform .45s var(--spring);
}
.lang[data-active="is"]::before { transform: translateX(100%); }
.lang button {
  position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 30px; padding: 0 11px; border-radius: var(--pill);
  font: 600 0.78rem/1 var(--sans); letter-spacing: 0.02em;
  color: var(--text-2); transition: color .25s ease;
}
.lang button[aria-pressed="true"] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .lang button:hover { color: var(--text); } }

/* Phones: a floating tab bar at the bottom stands in for the header links (nav.js shows it
   past the hero with .shown, and hides it with .away while you type) */
.tabbar { display: none; }
@media (max-width: 640px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 25;
    display: flex; align-items: center; width: max-content; height: 46px; margin: 0 auto; padding: 0 4px;
    border: 1px solid var(--line); border-radius: var(--pill);      /* same glass and edge as the header pill */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 0.5px var(--line), 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 30px -10px rgba(0, 0, 0, 0.28);
    transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none;
    transition: transform .5s var(--ease), opacity .3s ease;
  }
  .tabbar.shown:not(.away) { transform: none; opacity: 1; pointer-events: auto; }
  .tab-ink {
    position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0;
    width: var(--tab-w, 60px); border-radius: var(--pill);
    background: var(--surface); box-shadow: var(--shadow-thumb);
    transform: translateX(calc(var(--tab-x, 5px) - 1px)); opacity: var(--tab-o, 0);
    transition: transform .45s var(--spring), width .45s var(--spring), opacity .3s ease;
    pointer-events: none;
  }
  .tabbar a {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; border-radius: var(--pill);
    font: 600 .7rem/1 var(--sans); letter-spacing: .01em; color: var(--text-2); white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color .3s ease, scale .2s ease;
  }
  .tabbar a i { font-size: .74rem; color: var(--text-3); transition: color .3s ease; }
  .tabbar a[aria-current="true"] { color: var(--text); }
  .tabbar a[aria-current="true"] i { color: var(--accent); }
  .tabbar a:active { scale: .94; }
}

@media (max-width: 640px) {
  .nav { padding-left: 18px; }
  .nav nav { gap: 10px; }
  .nav-links { display: none; }
}
@media (max-width: 380px) {
  .brand { font-size: 1.2rem; }
}


/* 4. Buttons
   ========================================================================== */
/* Three kinds, three heights (40 / 44 / 52), one press language.
   Primary: solid accent with a lit edge. Secondary: white pill. Text: accent link with an arrow. */
.btn, .nav-cta, .btn-copy, .past-filter button, .past-arrows button, .lang button, .tabbar a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;   /* a long press on a control shouldn't select its label */
  -webkit-touch-callout: none;
}
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--pill);
  font: 700 1rem/1 var(--sans); letter-spacing: -0.012em;
}
.btn i { font-size: 0.9em; }
.btn .fa-arrow-right { transition: transform .35s var(--spring); }
@media (hover: hover) and (pointer: fine) { .btn:hover .fa-arrow-right { transform: translateX(4px); } }
/* button labels stay on one line (sub-pixel rounding could otherwise wrap a label that fits) */
:is(.btn, .nav-cta, .past-filter button) :is([lang], .when-idle, .when-sending) { white-space: nowrap; }

/* Primary */
.btn:where(:not(.btn-ghost, .btn-wa-solid)),
.nav-cta {
  min-height: var(--h-md); padding: 0 22px;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: var(--pill);
  box-shadow: var(--shadow-accent);
  letter-spacing: -0.012em;
  transition: background-color .25s ease, transform .25s var(--spring), box-shadow .25s ease, translate .35s var(--ease-soft);
}
.nav-cta { min-height: var(--h-sm); padding: 0 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn:where(:not(.btn-ghost, .btn-wa-solid)):hover,
  .nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
}
.btn:where(:not(.btn-ghost, .btn-wa-solid)):active,
.nav-cta:active {
  background: var(--accent-press); transform: translateY(1px) scale(.985);
  box-shadow: var(--shadow-accent-press);
  transition-duration: .08s;
}

/* WhatsApp keeps its brand green, with the same lit edge */
.btn-wa-solid {
  min-height: var(--h-md); background: var(--whatsapp); color: var(--whatsapp-ink); border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12),
              0 1px 2px color-mix(in srgb, var(--whatsapp-deep) 20%, transparent),
              0 8px 18px -10px color-mix(in srgb, var(--whatsapp) 70%, transparent);
  transition: transform .25s var(--spring), filter .2s ease;
}
.btn-wa-solid i { font-size: 1.2em; }
@media (hover: hover) and (pointer: fine) { .btn-wa-solid:hover { transform: translateY(-1px); filter: brightness(1.04); } }
.btn-wa-solid:active { transform: translateY(1px) scale(.985); filter: brightness(.96); transition-duration: .08s; }

/* Secondary: white pills */
.btn-ghost, .btn-copy, .past-arrows button, .past-filter button {
  min-height: var(--h-md);
  background: var(--surface); color: var(--text);
  border: 0;
  box-shadow: var(--shadow-pill);
  transition: background-color .25s ease, transform .25s var(--spring), box-shadow .25s ease, color .2s ease;
}
@media (hover: hover) {
  .btn-ghost:not(.btn-mail):hover,
  .past-arrows button:hover:not(:disabled),
  .past-filter button:hover { transform: translateY(-1px); box-shadow: var(--shadow-pill-hover); }
}
:is(.btn-ghost, .btn-copy, .past-arrows button, .past-filter button):active:not(:disabled) {
  background: var(--fill); transform: scale(.97); transition-duration: .08s;
}
.btn-wa i { color: var(--whatsapp-icon); font-size: 1.15em; }

/* email + copy: one white capsule split by a hairline; the shadow sits on the pair */
.mail-pair { display: flex; align-items: stretch; width: 100%; border-radius: var(--pill); box-shadow: var(--shadow-pill); }
.btn-mail { flex: 1; min-width: 0; padding-right: 18px; border-radius: var(--pill) 0 0 var(--pill); white-space: nowrap; }
.btn-mail i, .btn-copy i { color: var(--text-2); }
.btn-copy {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px;
  font: 600 0.88rem/1 var(--sans); cursor: pointer;
  border-radius: 0 var(--pill) var(--pill) 0;
}
.btn-copy::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: rgba(0, 0, 0, 0.1); }
.btn-mail, .btn-copy { box-shadow: none; }
@media (hover: hover) and (pointer: fine) { :is(.btn-mail, .btn-copy):hover:not(:disabled) { background: var(--fill-soft); } }
.btn-copy[data-copied], .btn-copy[data-copied] i { color: var(--accent); }
.btn-copy[data-copied] i::before { content: "\f00c"; font-weight: 900; }
.btn-copy:not([data-copied]) .when-copied,
.btn-copy[data-copied] .when-copy { visibility: hidden; }

/* Sizes */
.btn-sm { padding: 0 18px; font-size: 0.9rem; }
.btn-lg { min-height: var(--h-lg); padding: 0 28px; font-size: 1.04rem; }

/* Text links */
.plan-ex, .go { color: var(--accent); font-weight: 600; }
.plan-ex { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 0.92rem; }
.plan-ex i { font-size: 0.8em; transition: transform .35s var(--spring); }
@media (hover: hover) and (pointer: fine) { .plan-ex:hover .fa-arrow-right { transform: translateX(4px); } }
.go { font-size: 0.95rem; }

/* Disabled, everywhere */
:is(button, .btn):disabled { opacity: .4; cursor: default; pointer-events: none; }

/* Magnetic primary buttons (magnet.js sets --mx / --my) */
[data-magnet] { translate: var(--mx, 0px) var(--my, 0px); }

/* Phones: 44px minimum for anything you tap, and no hover lift that sticks after a tap */
@media (hover: none) {
  .nav-cta { min-height: var(--h-md); }
  .lang button { min-height: 36px; }
  .btn-copy { min-width: var(--h-md); }
}
@media (max-width: 400px) {
  .btn-copy .swap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 340px) {
  .nav-cta { padding-inline: 13px; }
}


/* 5. Layout & type
   ========================================================================== */
main { max-width: var(--max); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
main#top, main.notfound { padding-top: 70px; }
.section { padding-top: 120px; }

h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; text-rendering: optimizeLegibility; }
h1 { font-size: clamp(2.7rem, 7.4vw, 5.6rem); line-height: 0.96; font-weight: 800; letter-spacing: -0.045em; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1; font-weight: 800; letter-spacing: -0.038em; }
h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }

/* section heads: heading with its intro line underneath */
.head2 { margin-bottom: 34px; max-width: 46rem; }
.head2 h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.head2 p { margin-top: 12px; max-width: 62ch; color: var(--text-2); font-size: 1.08rem; line-height: 1.5; }

/* small labels read a touch looser, numbers line up */
.tag, .eur, .c-note, .opt, .rc-foot, .rc-top, .proof, .past-filter b, .badge, small { letter-spacing: 0.006em; }
.amt, .setup, .eur, .rc-lines, .rc-total, .rc-date, .past-filter b, .odo, .hero-price, .steps-line li { font-variant-numeric: tabular-nums; }
/* ticks never squeeze when a line wraps, so they stay in one column */
:is(.plan li, .proof, .trust li) > i { flex: none; width: 1em; text-align: center; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding-top: 88px; }
}


/* 6. Hero
   ========================================================================== */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center; gap: 48px;
  padding: 96px 0 24px;
}
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5rem); }
.hero-price {
  margin-top: 18px; color: var(--accent);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em;
}
/* the one-time setup fee, said up front */
.hero-setup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 10px; }
.setup-chip { color: var(--text-2); font-size: .95rem; font-weight: 500; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.setup-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: .95rem; font-weight: 500; white-space: nowrap; }
.setup-link i { font-size: .62em; transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .setup-link:hover i { transform: translateX(2px); }
  .setup-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
}

.lead { color: var(--text-2); font-size: 1.18rem; line-height: 1.55; margin: 28px 0 34px; max-width: 62ch; }
.hero .lead { margin: 18px 0 30px; font-size: 1.12rem; }
.hero .hero-setup + .lead { margin-top: 16px; }
.lead strong { color: var(--text); font-weight: 600; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }

/* trust points: white pills with green ticks */
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; color: var(--text-2); font-size: 0.92rem; }
.trust li {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px;
  border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 16px -8px rgba(0, 0, 0, 0.14);
  color: var(--text); font-size: .86rem; font-weight: 500; white-space: nowrap;
}
.trust li > i { color: var(--success); margin: 0; font-size: .8em; }

/* The receipt: "one monthly fee, zero headaches" made literal. The torn edge is a mask, which
   would clip a normal shadow, so the shadow is a drop-shadow on the wrapper. */
.receipt { justify-self: end; width: min(100%, 320px); margin-bottom: 10px; }
.receipt, .js .receipt[data-reveal], .js .receipt[data-reveal].in {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.14));
}
.paper {
  --zig: 12px;
  position: relative;
  padding: 22px 24px calc(22px + var(--zig));
  background: var(--paper); color: var(--ink);
  font-family: var(--mono);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
  transform: rotate(var(--tilt, -3deg));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zig) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zig) 100%;
  transition: transform .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .receipt:hover .paper { transform: rotate(calc(var(--tilt, -3deg) * 0.3)) translateY(-4px); } }
.rc-top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: 0.82rem; color: color-mix(in srgb, var(--ink) 68%, transparent);
}
.rc-brand { font-family: var(--sans); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.04em; color: var(--ink); }
.rc-lines { list-style: none; display: grid; gap: 12px; }
.rc-lines li { display: flex; align-items: flex-end; gap: 8px; font-size: 0.95rem; font-weight: 500; line-height: 1.2; }
.rc-lines li > i { font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
.rc-lines b { font-size: 1.6rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.dots { flex: 1; min-width: 16px; margin-bottom: 9px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 32%, transparent); }
.rc-total {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: 0.95rem; line-height: 1.25;
}
.rc-total span:first-child { font-weight: 800; letter-spacing: -0.02em; }
.rc-total .dots { margin-bottom: 0; transform: translateY(-3px); min-width: 10px; }
.rc-total b { font-weight: 700; white-space: nowrap; }
.rc-total .rc-amt { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.rc-foot { margin-top: 12px; font-size: 0.78rem; color: color-mix(in srgb, var(--ink) 68%, transparent); }

/* odometer digits (built by odometer.js) */
.odo { display: inline-flex; height: 1em; overflow: hidden; }
.odo-strip { display: block; transition: transform 1.7s cubic-bezier(.2, .85, .25, 1); }
.odo-strip > span { display: block; height: 1em; }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 72px; }
  /* tilted paper: keep its corners inside narrow screens */
  .receipt { justify-self: center; width: min(calc(100% - 28px), 320px); }
}
@media (max-width: 760px) {
  .trust { justify-content: center; }
}
@media (max-width: 640px) {
  .hero .cta-row .btn { flex: 1 1 100%; }
}
@media (max-width: 340px) {
  :is(.hero .cta-row, .cta-band) .btn > i { display: none; }
}


/* 7. Demos
   ========================================================================== */
#work, #past { background: var(--bg-alt); box-shadow: 0 0 0 100vmax var(--bg-alt); clip-path: inset(0 -100vmax); padding-bottom: 110px; }
.demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Cards: white, hairline edge, a soft light that follows the cursor (spotlight.js sets --mx/--my) */
.card {
  position: relative; isolation: isolate;
  background: var(--surface); border: var(--hair) solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .2s ease, background .2s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 6%, transparent), transparent 45%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--line-strong); }
  .card:hover::before { opacity: 1; }
  .card:hover, .js .card[data-reveal].in:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
@media (hover: none) {
  .card:active, .js .card[data-reveal].in:active { transform: scale(.985); transition-duration: .15s; }
}

.demo { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .card.demo:hover, .js .card.demo[data-reveal].in:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
}

/* Stage: lit from above, the demo's tint pooling below, a faint dot grid, shade at the bottom */
.demo-shot {
  position: relative; height: 250px; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(60% 55% at 72% 105%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 70%),
    linear-gradient(180deg, #F8F8FA, #E9E9EE);
  box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.10), inset 0 -30px 36px -32px rgba(0, 0, 0, 0.22);
}
.demo-shot::before, .work-media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(0, 0, 0, 0.075) 1px, transparent 1.3px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(75% 85% at 40% 35%, #000, transparent);
          mask: radial-gradient(75% 85% at 40% 35%, #000, transparent);
}

/* browser window */
.ds-browser {
  position: absolute; left: 26px; top: 28px; width: 76%;
  border-radius: 10px 10px 0 0; overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-window);
  transition: transform .5s var(--ease);
}
.ds-browser .bar, .frame-browser .bar {
  display: flex; align-items: center;
  background: linear-gradient(180deg, #FDFDFE, #F0F0F3);
  box-shadow: inset 0 1px 0 #fff, inset 0 -0.5px 0 rgba(0, 0, 0, 0.10);
}
.ds-browser .bar { gap: 5px; height: 22px; padding: 0 10px; }
.ds-browser .bar i, .frame-browser .bar i { border-radius: 50%; background: var(--window-dot); box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.12); }
.ds-browser .bar i { width: 7px; height: 7px; }
.ds-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* phone, leaning in front of the window */
.ds-phone {
  position: absolute; right: 22px; top: 40px; width: 112px;
  padding: 2.5px; border-radius: 17px; background: var(--device);
  box-shadow:
    0 0 0 1px var(--device-rim), 0 0 0 1.5px var(--device-edge),
    -2px 2px 3px rgba(0, 0, 0, 0.18),
    -10px 16px 28px -10px rgba(0, 0, 0, 0.38);
  transform: rotate(3deg); transition: transform .5s var(--ease);
}
/* the screen is exactly status bar + the 390×844 capture, so nothing is stretched or cropped */
.ds-screen { border-radius: 14.5px; overflow: hidden; background: var(--sb, #fff); }
.ds-status {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 13px; padding: 0 9px 0 11px; background: var(--sb, #fff); color: #111;
}
.ds-status b { font-size: 5.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.ds-status .island { position: absolute; left: 50%; top: 4px; width: 4.5px; height: 4.5px; margin-left: -2.25px; border-radius: 50%; background: var(--device); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.ds-icons { display: flex; gap: 2.5px; align-items: center; }
.ds-icons i { display: block; height: 4.5px; background: center / contain no-repeat; }
.ds-icons i:nth-child(1) { width: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23111' d='M0 9h3v3H0zM4.3 6.5h3V12h-3zM8.7 3.5h3V12h-3zM13 0h3v12h-3z'/%3E%3C/svg%3E"); }
.ds-icons i:nth-child(2) { width: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23111' d='M8 12 0 3.6C4.6-1.2 11.4-1.2 16 3.6z'/%3E%3C/svg%3E"); }
.ds-icons i:nth-child(3) { width: 9.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 12'%3E%3Crect x='.5' y='.5' width='21' height='11' rx='3' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='2' y='2' width='15' height='8' rx='1.6' fill='%23111'/%3E%3Cpath d='M23 4v4c.8-.3 1.4-1.1 1.4-2S23.8 4.3 23 4z' fill='%23111' fill-opacity='.45'/%3E%3C/svg%3E"); }
.ds-screen img { display: block; width: 100%; height: auto; }

/* desktop: a slight 3D swing, the devices at different depths */
@media (hover: hover) and (pointer: fine) {
  .demo-shot { perspective: 900px; }
  .demo:hover .ds-browser { transform: translateY(-8px) rotateX(4deg); }
  .demo:hover .ds-phone { transform: rotate(1deg) translateY(-16px) translateZ(30px); }
}

.demo-copy { padding: 22px 26px 26px; }
.demo-copy h3 { font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; font-weight: 800; margin-bottom: 10px; }
.demo-copy p { max-width: 62ch; }
.demo-copy p:not(.tag) { color: var(--text-2); margin-bottom: 16px; }
@media (hover: hover) and (pointer: fine) { .card.demo:hover .go { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }

/* category label, its icon in a small raised tile like an app icon */
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin-bottom: 14px; }
.tag i { color: var(--text-3); }
.demo .tag > i {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  font-size: 0.82rem; color: var(--text);
  background: linear-gradient(180deg, var(--surface), var(--tile)); box-shadow: var(--shadow-thumb);
}
.tag .plan-note { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 500; }
.tag .plan-note::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--text-2); margin-left: 3px; }

/* "Like one of these?" band */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
  margin-top: 20px; padding: 22px 26px; border-radius: var(--radius);
  background: var(--surface); border: var(--hair) solid var(--edge); box-shadow: var(--shadow-soft);
}
.cta-band p { color: var(--text-2); font-size: 1.02rem; max-width: 62ch; }
.cta-band strong { color: var(--text); }

/* opening a demo: its screenshot grows to fill the screen (demozoom.js) */
.demo-zoom {
  position: fixed; z-index: 100; pointer-events: none; overflow: hidden;
  background: #fff center top / cover no-repeat; box-shadow: var(--shadow-lift);
}

@media (max-width: 960px) {
  .demos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .demo-shot { height: 210px; }
  .ds-browser { left: 18px; top: 22px; width: 80%; }
  .ds-phone { width: 96px; right: 14px; top: 34px; }
  .demo-copy { padding: 20px 22px 22px; }
  .cta-band { padding: 20px; }
  .cta-band .btn { width: 100%; }
}


/* 8. Plans
   ========================================================================== */
#plans { padding-bottom: 120px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
/* every plan the same height, the button trays lined up along the bottom */
.plan { display: flex; flex-direction: column; padding: 28px; }
.plan h3 { font-size: 1.15rem; color: var(--text-2); font-weight: 600; }
.plan h3 i { color: var(--text-2); margin-right: 4px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.plan .amt { font-size: 2.5rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.05em; color: var(--text); white-space: nowrap; }
.plan .per { color: var(--text-2); font-size: 0.95rem; font-weight: 500; }
.plan p.setup { color: var(--text); opacity: .85; font-size: 0.95rem; }
.plan p.eur { color: var(--text-2); font-size: 0.82rem; margin: 4px 0 22px; }
.plan ul {
  list-style: none; display: grid; gap: 11px; flex: 1; align-content: start;
  margin-bottom: 24px; padding-top: 20px; border-top: var(--hair) solid var(--edge);
}
.plan li { color: var(--text-2); font-size: 0.97rem; display: flex; gap: 11px; align-items: baseline; }
.plan li i { color: var(--text-3); font-size: 0.8em; }

/* the recommended plan: a blue edge, and a badge */
.card.plan.featured,
.card.plan.featured:hover { border-color: transparent; }
.card.plan.featured { box-shadow: 0 0 0 1.5px var(--accent), 0 2px 4px rgba(0, 0, 0, 0.05), 0 22px 48px -16px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .card.plan.featured:hover, .js .card.plan.featured[data-reveal].in:hover { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-lift); }
}
.badge {
  position: absolute; top: -12px; right: 22px; z-index: 2;
  display: block; text-box: trim-both cap alphabetic;
  padding: 5px 11px; border-radius: var(--pill);
  font-size: 0.78rem; font-weight: 700;
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--lit), 0 4px 10px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* button tray along the bottom */
.plan-foot {
  margin: auto -28px -28px; padding: 18px 28px 20px;
  border-top: var(--hair) solid var(--edge);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background: rgba(118, 118, 128, 0.06);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.plan-cta { width: 100%; min-height: var(--h-md); }
.plan .plan-ex { display: flex; justify-content: center; align-items: center; min-height: var(--h-sm); margin-top: 6px; font-size: 0.86rem; }

@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 640px) {
  #plans { padding-bottom: 88px; }
  .plan { padding: 24px; }
  .plan-foot { margin: auto -24px -24px; padding: 16px 24px 18px; }
}

/* TEMPORARY preview (forza.live/?dark): the Business plan as a dark card. Remove after deciding. */
html.dk .card.plan.featured { background: var(--text); box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 24px 48px -18px rgba(0, 0, 0, .45); }
html.dk .card.plan.featured h3 { color: rgba(255, 255, 255, .62); }
html.dk .card.plan.featured .amt { color: #fff; }
html.dk .card.plan.featured :is(.per, .eur) { color: rgba(255, 255, 255, .55); }
html.dk .card.plan.featured .setup { color: rgba(255, 255, 255, .85); opacity: 1; }
html.dk .card.plan.featured ul { border-top-color: rgba(255, 255, 255, .12); }
html.dk .card.plan.featured li { color: rgba(255, 255, 255, .78); }
html.dk .card.plan.featured li i { color: rgba(255, 255, 255, .45); }
html.dk .card.plan.featured .plan-foot { background: rgba(255, 255, 255, .05); border-top-color: rgba(255, 255, 255, .08); }
html.dk .card.plan.featured .plan-ex { color: #5EB0FF; }
html.dk .card.plan.featured::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06), transparent 45%); }


/* 9. Past work
   ========================================================================== */
.past { position: relative; }

/* filter chips: white when idle, dark when chosen */
.past-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.past-filter button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--h-sm); padding: 0 16px; border-radius: var(--pill); cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1;
}
.past-filter button b {
  display: block; text-box: trim-both cap alphabetic;
  min-width: 1.7em; padding: 3px 6px; border-radius: var(--pill); text-align: center;
  font-size: 0.72rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.06); color: var(--text);
}
.past-filter button[aria-pressed="true"],
.past-filter button[aria-pressed="true"]:is(:hover, :active) {
  background: var(--text); color: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}
.past-filter button[aria-pressed="true"] b { background: rgba(255, 255, 255, 0.2); color: var(--bg); }
@media (hover: none) { .past-filter button { min-height: var(--h-md); } }     /* 44px to tap */

/* the track bleeds to the screen edges but lines the first card up with the page content */
.past-track {
  --edge: max(20px, calc((100vw - var(--max)) / 2 + 20px));
  margin-inline: calc(50% - 50vw);
  padding: 6px var(--edge) 10px;
  scroll-padding-inline: var(--edge);
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.past-track::-webkit-scrollbar { display: none; }
.past-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.past-track.dragging * { pointer-events: none; user-select: none; }
.past-track img { -webkit-user-drag: none; user-select: none; }
.past-track:focus-visible { border-radius: var(--radius); }
.past-track .work { transition: opacity .25s var(--ease), translate .35s var(--ease); }
.past-track.switching .work { opacity: 0; translate: 0 8px; }

.work { flex: 0 0 auto; width: min(80vw, 330px); scroll-snap-align: start; }
.work.wide { width: min(86vw, 560px); }
.work h3 { font-size: 1.45rem; font-weight: 800; margin-bottom: 6px; }
.work p { color: var(--text-2); font-size: 0.97rem; max-width: 34ch; }
.work.wide p { max-width: 44ch; }
.work .proof { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; font-size: 0.86rem; opacity: .78; }
.work .proof i { color: var(--text-3); font-size: 0.8em; }

/* the same studio stage as the demo cards */
.work-media {
  position: relative; height: 400px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(60% 55% at 50% 105%, color-mix(in srgb, var(--tint, #fff) 18%, transparent), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F1F1F4);
  box-shadow: var(--shadow-card);
}
.work-media::before {
  background: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1.3px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(70% 70% at 50% 45%, #000, transparent);
          mask: radial-gradient(70% 70% at 50% 45%, #000, transparent);
}

/* phone: lying at an angle, it turns to face you once in view (look.js sets .look) */
.work-media:has(.frame-phone) { perspective: 1100px; }
.frame-phone {
  position: relative;
  box-sizing: content-box; height: 318px; aspect-ratio: var(--ar, 9 / 20);
  padding: 3.5px; border-radius: 24px;
  background: var(--device);
  box-shadow:
    0 0 0 1px var(--device-rim), 0 0 0 2px var(--device-edge),
    -2px 3px 4px rgba(0, 0, 0, 0.16),
    -14px 26px 40px -16px rgba(0, 0, 0, 0.42);
  transform: rotateY(-22deg) rotateX(10deg) rotateZ(4deg) scale(.94);
  transform-style: preserve-3d;
  transition: transform 1.4s var(--ease-soft);
}
.work.look .frame-phone { transform: rotateY(-6deg) rotateX(3deg) rotateZ(1deg); }
@media (hover: hover) and (pointer: fine) { .work.look:hover .frame-phone { transform: rotateY(0) rotateX(0) rotateZ(0) translateY(-6px); transition-duration: .6s; } }
/* side buttons: power and volume */
.frame-phone::before, .frame-phone::after {
  content: ""; position: absolute; right: -3.5px; width: 2px; border-radius: 0 1.5px 1.5px 0;
  background: linear-gradient(90deg, #3A4447, #5A6568);
}
.frame-phone::before { top: 20%; height: 26px; }
.frame-phone::after { top: 31%; height: 46px; }
.frame-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 20.5px; overflow: hidden; background: var(--device-screen); }
.frame-phone .screen::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--device); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.frame-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* browser window, with its label floating as glass over the screenshot */
.frame-browser {
  position: relative; width: 88%; border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-window);
  transition: transform .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .work:hover .frame-browser { transform: translateY(-4px); } }
.frame-browser .bar { gap: 6px; height: 28px; padding: 0 12px; }
.frame-browser .bar i { width: 9px; height: 9px; }
.frame-browser .bar span {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 11px; border-radius: var(--pill);
  font-size: 0.72rem; font-weight: 600; color: var(--text);
  background: var(--glass-light); box-shadow: var(--rim);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.frame-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* screenshots start on the whole screen, then drift into the interesting part */
.frame-browser .shot { aspect-ratio: 16 / 10; overflow: hidden; }
.frame-browser .shot img {
  height: 100%; aspect-ratio: auto;
  transform-origin: var(--ox) var(--oy); transform: scale(1);
  transition: transform 6.5s cubic-bezier(.33, .08, .2, 1);
  will-change: transform;
}
.work.look .shot img, html:not(.js) .shot img { transform: scale(var(--z)); }
html:not(.js) .shot img { transition: none; }

/* what kind of thing each project is */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chips li {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: var(--pill);
  font-size: 0.76rem; font-weight: 600; line-height: 1; letter-spacing: 0.006em;
  color: var(--text); background: var(--glass); box-shadow: var(--rim);
}

/* progress line and arrows */
.past-ui { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.past-progress { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.past-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0.15));
  transition: transform .15s linear;
}
.past-arrows { display: flex; gap: 10px; }
.past-arrows button {
  display: grid; place-items: center;
  width: var(--h-md); height: var(--h-md); min-height: 0; border-radius: 50%; cursor: pointer;
}
.past-arrows button:disabled { opacity: .35; transform: none; }
@media (hover: none) { .past-arrows { display: none; } }

@media (max-width: 640px) {
  .work-media { height: 360px; }
  .frame-phone { height: 284px; }
  .past-track { gap: 14px; }
}
@media (max-width: 560px) {
  /* one swipeable row on phones; the padding gives the chosen chip's shadow room */
  .past-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -6px -20px 8px; padding: 6px 20px 14px; }
  .past-filter::-webkit-scrollbar { display: none; }
  .past-filter button { flex: none; }
}


/* 10. Contact
   ========================================================================== */
.contact2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start;
  padding-top: 130px;
}
.contact2 h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.c-lead { color: var(--text-2); font-size: 1.1rem; line-height: 1.5; margin: 14px 0 28px; max-width: 62ch; }

/* the person */
.me { display: flex; gap: 16px; align-items: center; margin-bottom: 26px; }
.me-photo {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.5rem;
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 14px -6px color-mix(in srgb, var(--accent-deep) 35%, transparent);
}
.me-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.me-role { color: var(--text-2); font-size: 0.95rem; line-height: 1.45; }

/* steps: a line draws through them and each number lights up as it arrives (main.js adds .drawn) */
.steps-line {
  position: relative; list-style: none; counter-reset: s;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 460px; margin: 4px 0 30px;
}
.steps-line::before, .steps-line::after { content: ""; position: absolute; top: 13px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 1px; }
.steps-line::before { background: var(--line); }
.steps-line::after { background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.45, 0, .55, 1) .2s; }
.steps-line.drawn::after { transform: scaleX(1); }
.steps-line li {
  position: relative; z-index: 1; counter-increment: s;
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 4px; border-radius: var(--pill);
  text-align: center; font-size: .82rem; line-height: 1.25; font-weight: 600;
  color: var(--text-2); transition: color .4s ease;
}
.steps-line li::before {
  content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: .74rem; font-weight: 800;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-thumb);
  transition: background-color .35s ease, color .35s ease, box-shadow .45s ease, transform .45s var(--ease);
}
.steps-line.drawn li { color: var(--text); }
.steps-line.drawn li::before {
  background: var(--accent); color: var(--on-accent); transform: scale(1.06);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 4px 10px -3px color-mix(in srgb, var(--accent) 50%, transparent);
}
.steps-line.drawn li:nth-child(1), .steps-line.drawn li:nth-child(1)::before { transition-delay: .2s; }
.steps-line.drawn li:nth-child(2), .steps-line.drawn li:nth-child(2)::before { transition-delay: .72s; }
.steps-line.drawn li:nth-child(3), .steps-line.drawn li:nth-child(3)::before { transition-delay: 1.08s; }
.steps-line.drawn li:nth-child(4), .steps-line.drawn li:nth-child(4)::before { transition-delay: 1.6s; }

/* WhatsApp and email stacked as two equal-width rows */
.c-direct { display: grid; gap: 12px; width: min(100%, 400px); }
.c-direct > .btn { width: 100%; }

/* the form: a raised white card, fields recessed as wells that rise when focused */
.c-form {
  position: relative; padding: 28px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-raised);
}
.c-fields { display: grid; gap: 16px; }
.c-fields > * { min-width: 0; }      /* long names and labels truncate instead of widening the form */
.c-form label { display: grid; gap: 7px; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.c-form .opt { color: var(--text-2); font-weight: 500; font-size: 0.82rem; margin-left: 4px; }
.c-form :is(input, select) {
  width: 100%; min-height: 52px; padding: 14px 15px 14px 46px; border: 0; border-radius: var(--radius-field);
  font: 500 1rem/1.2 var(--sans); color: var(--text);
  background: var(--fill) var(--ico, none) no-repeat 15px 50% / 19px 19px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07), inset 0 0 0 0.5px rgba(0, 0, 0, 0.07);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.c-form select {
  appearance: none; padding-right: 44px;
  background-image: var(--ico), var(--chevron);
  background-position: 15px 50%, calc(100% - 16px) 50%;
  background-size: 19px 19px, 18px 18px;
}
.c-form :is(input, select)::placeholder { color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .c-form :is(input, select):hover { background-color: var(--fill-hover); } }
.c-form :is(input, select):focus {
  outline: none; background-color: var(--surface); background-image: var(--ico-on);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), var(--ring-accent);
}
.c-form select:focus { background-image: var(--ico-on), var(--chevron); }
.c-form :is(input, select):focus-visible { outline: none; }
.c-form [aria-invalid="true"] { background-color: var(--danger-tint); box-shadow: 0 0 0 2px var(--danger); }
.c-form [aria-invalid="true"]:focus {
  background-color: var(--surface); background-image: var(--ico);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--danger), 0 0 0 6px color-mix(in srgb, var(--danger) 14%, transparent);
}
/* field icons: grey at rest, accent when focused (data URIs can't read CSS colours) */
.c-form select { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); }
.c-form input[name="business"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.4 4h13.2L20 9.5'/%3E%3Cpath d='M4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0'/%3E%3Cpath d='M5.5 12v8h13v-8'/%3E%3Cpath d='M10 20v-4.5h4V20'/%3E%3C/svg%3E"); --ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.4 4h13.2L20 9.5'/%3E%3Cpath d='M4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0'/%3E%3Cpath d='M5.5 12v8h13v-8'/%3E%3Cpath d='M10 20v-4.5h4V20'/%3E%3C/svg%3E"); }
.c-form select[name="type"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E"); --ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E"); }
.c-form input[name="contact"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3C/svg%3E"); --ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3C/svg%3E"); }
.c-form input[name="link"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.2 4.2 0 0 0 6 0l3-3a4.2 4.2 0 0 0-6-6l-1 1'/%3E%3Cpath d='M14 10a4.2 4.2 0 0 0-6 0l-3 3a4.2 4.2 0 0 0 6 6l1-1'/%3E%3C/svg%3E"); --ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.2 4.2 0 0 0 6 0l3-3a4.2 4.2 0 0 0-6-6l-1 1'/%3E%3Cpath d='M14 10a4.2 4.2 0 0 0-6 0l-3 3a4.2 4.2 0 0 0 6 6l1-1'/%3E%3C/svg%3E"); }

.c-fields > .btn { margin-top: 6px; width: 100%; border: 0; cursor: pointer; }
.c-form .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.c-note { color: var(--text-2); font-size: 0.85rem; text-align: center; }
.c-err { min-height: 0; color: var(--danger); font-size: 0.84rem; font-weight: 500; }
.c-err:empty, .c-status:empty { display: none; }
.c-status { color: var(--danger); font-size: 0.9rem; text-align: center; line-height: 1.45; }
.hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* form states, all driven by data-state on the form */
.c-form[data-state="sending"] .when-idle,
.c-form:not([data-state="sending"]) .when-sending { visibility: hidden; }
.c-done { display: none; text-align: center; padding: 30px 6px 10px; outline: none; }
.c-form[data-state="sent"] .c-fields { display: none; }
.c-form[data-state="sent"] .c-done { display: block; animation: done-in .6s var(--ease) both; }
.c-done-icon {
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: 1.4rem;
  box-shadow: var(--lit), 0 10px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.c-done h3 { font-size: 1.6rem; color: var(--text); }
.c-done p { color: var(--text-2); max-width: 26em; margin: 8px auto 22px; line-height: 1.5; }
.c-done-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
@keyframes done-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Live preview at the top of the form: a tiny site wearing the visitor's name (main.js) */
.pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 4px; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8rem; }
.pv-live { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; font-weight: 600; color: var(--text); }
.pv-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pv-pulse 2.4s ease-out infinite; }
@keyframes pv-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 0%, transparent); }
}
.pv-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 500; text-align: right; transition: opacity .3s ease; }
.pv:not([data-empty]) .pv-hint { opacity: 0; }
.pv-win { border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05), 0 12px 28px -14px rgba(0, 0, 0, .22); }
.pv-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; background: var(--bg-alt); border-bottom: 0.5px solid rgba(0, 0, 0, .07); }
.pv-dots { display: flex; gap: 5px; flex: none; }
.pv-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .13); }
.pv-url {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 20px; margin-right: 31px; padding: 0 10px; border-radius: 6px;
  background: var(--surface); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, .08);
  font: 500 .7rem/1 var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden;
}
.pv-url i { font-size: .62rem; color: var(--success); flex: none; }
.pv-url > span { overflow: hidden; text-overflow: ellipsis; }
.pv-page { --pv-tint: #EFE6D4; position: relative; padding: 12px 16px 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--pv-tint) 70%, #fff) 0%, #fff 72%); transition: background .5s var(--ease); }
.pv[data-kind="2"] .pv-page { --pv-tint: #DDE7F3; }
.pv[data-kind="3"] .pv-page { --pv-tint: #F5E1D6; }
.pv[data-kind="4"] .pv-page { --pv-tint: #D8EEE6; }
.pv[data-kind="5"] .pv-page { --pv-tint: #E8E8ED; }
.pv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .72rem; color: var(--text); }
.pv-nav b { font-weight: 700; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-lines { display: flex; gap: 8px; flex: none; }
.pv-lines i { width: 22px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .12); }
.pv-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; margin-top: 16px; }
.pv-ic { display: grid; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .18); color: var(--accent); font-size: .8rem; }
.pv-ic i { place-self: center; }
.pv-name { max-width: 100%; font-size: 1.32rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.035em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv[data-focus] .pv-name::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -0.08em; border-radius: 1px; background: var(--accent); animation: pv-caret 1.05s steps(1) infinite; }
@keyframes pv-caret { 50% { opacity: 0; } }
/* every kind's icon, line and button sit in one cell; only the chosen kind shows */
.pv-stack { display: grid; }
.pv-stack > span, .pv-ic i { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.pv[data-kind="1"] [data-k="1"], .pv[data-kind="2"] [data-k="2"], .pv[data-kind="3"] [data-k="3"],
.pv[data-kind="4"] [data-k="4"], .pv[data-kind="5"] [data-k="5"] { opacity: 1; transform: none; transition-delay: .06s; }
.pv-tag { font-size: .78rem; color: var(--text-2); }
.pv-cta { margin-top: 10px; }
.pv-cta > span { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 26px; padding: 0 12px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-size: .7rem; font-weight: 600; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 55%, transparent); }
.pv-cta i { font-size: .6rem; }
.pv .pv-def, .pv .pv-val { transition: opacity .25s ease; }
.pv[data-empty] .pv-val, .pv:not([data-empty]) .pv-def { display: none; }
.pv[data-empty] :is(.pv-name, .pv-nav b, .pv-url > span) { color: var(--text-4); }

/* section intros fill in word by word as they rise (main.js writes --f per word) */
.fill { color: var(--text-2); }
.fill .fw { --f: 0; color: color-mix(in srgb, currentColor calc(var(--f) * 100%), var(--text-5)); }

@media (max-width: 860px) {
  .contact2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .contact2 { padding-top: 88px; }
  .c-form { padding: 20px; }
  .c-direct > * { flex: 1 1 100%; }
  .mail-pair { min-width: 0; }
  .mail-pair .btn-mail { padding-inline: 16px; }
}
@media (max-width: 440px) {
  .c-fields > .btn { font-size: 0.9rem; padding-inline: 18px; }
}
@media (max-width: 380px) {
  .c-fields > .btn .when-idle > i { display: none; }
}
@media (max-width: 340px) {
  .btn, .mail-pair .btn-mail { padding-inline: 18px; }
  .c-form { padding: 16px; }
  .c-fields > .btn { font-size: 0.84rem; letter-spacing: -0.02em; padding-inline: 14px; }
}


/* 11. Footer & 404
   ========================================================================== */
.foot {
  max-width: var(--max); margin: 120px auto 0; padding: 28px max(20px, env(safe-area-inset-right)) 44px max(20px, env(safe-area-inset-left));
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); color: var(--text-2); font-size: 0.9rem;
}
.foot .brand { font-size: 1.15rem; color: var(--text); }
.notfound { min-height: 70vh; display: grid; align-content: center; justify-items: start; gap: 22px; }

@media (max-width: 640px) {
  .foot { margin-top: 88px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }      /* room for the tab bar */
}


/* 12. Motion
   ========================================================================== */
/* Scroll reveals. html.js is set in <head> before first paint; reveal.js adds .in. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.99);
  filter: blur(4px);
  transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease),
              border-color .2s ease, background-color .2s ease;
}
.js [data-reveal="drop"] { transform: translate3d(0, -36px, 0) rotate(-6deg); }
.js [data-reveal="pop"] { transform: translate3d(0, 10px, 0) scale(.94); filter: none; }
.js [data-reveal="swipe"] {             /* a soft left-to-right wipe */
  transform: translate3d(0, 12px, 0); filter: none;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity .6s var(--ease), transform 1.1s var(--ease), -webkit-mask-position 1.3s var(--ease), mask-position 1.3s var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
.js [data-reveal="swipe"].in { -webkit-mask-position: 0 0; mask-position: 0 0; }
.js [data-reveal="swipe"].in.settled { -webkit-mask-image: none; mask-image: none; }

/* headline words rise out of a mask (words.js splits them, reveal.js adds .on) */
.js [data-reveal="words"] { opacity: 1; transform: none; filter: none; will-change: auto; }
.js [data-reveal="words"]:not(.split) { opacity: 0; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split .w > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i) * 60ms + 120ms);
}
.split.on .w > span { transform: none; }

/* the language switch crossfades (the EN/IS thumb is kept out of it, see Header) */
::view-transition-old(root), ::view-transition-new(root),
::view-transition-group(lang-switch) { animation-duration: .34s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
::view-transition-old(lang-switch) { display: none; }
::view-transition-new(lang-switch) { animation: none; }

/* Reduced motion (html.rm, set in <head>): gentle fades stay, movement goes */
.rm [data-reveal], .rm [data-reveal="drop"], .rm [data-reveal="swipe"] {
  transform: none; filter: none; -webkit-mask-image: none; mask-image: none;
  transition: opacity .8s ease;
}
.rm .split .w > span { transform: none; opacity: 0; transition: opacity .8s ease; transition-delay: calc(var(--i) * 50ms); }
.rm .split.on .w > span { opacity: 1; }
.rm .nav-links a, .rm .nav-cta { scale: none; }
.rm .nav-ink { transition: opacity .2s ease; }
.rm .tabbar { transform: none; transition: opacity .3s ease; }
.rm .tab-ink { transition: opacity .3s ease; }
.rm :is(.btn, .nav-cta, .btn-ghost, .btn-mail, .btn-copy, .past-filter button, .past-arrows button) { transform: none !important; translate: none !important; }
.rm .card:is(:hover, :active), .rm .demo:hover :is(.ds-phone, .ds-browser), .rm .work:hover .frame-browser { transform: none !important; }
.rm .receipt:hover .paper { transform: rotate(-3deg); }
.rm :is(.frame-phone, .frame-browser) { transition: none; }
.rm .shot img { transform: scale(var(--z)); transition: none; }
.rm .odo-strip { transition: none; }
.rm :is(.pv-live i, .pv[data-focus] .pv-name::after) { animation: none; }
.rm .steps-line::after { transform: scaleX(1); transition: none; }

@media print {
  .js [data-reveal], .split .w > span { opacity: 1 !important; transform: none !important; filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .progress, .nav { display: none; }
}