/* =================================================================
   SENNOVA — Digital Craftsmanship
   Design system: Swiss · Apple · Linear · Framer inspired
================================================================= */

:root{
  /* surfaces */
  --bg:        #F6F7F9;
  --bg-2:      #EEF1F6;
  --paper:     #FFFFFF;
  --ink:       #0E1116;
  --ink-soft:  #3A4150;
  --ink-mute:  #6B7484;
  --line:      rgba(14,17,22,.08);
  --line-2:    rgba(14,17,22,.045);

  /* brand blue */
  --blue:      #2E5BFF;
  --blue-2:    #6E92FF;
  --blue-3:    #A9C0FF;
  --navy:      #0B1B3A;

  /* glass */
  --glass:     rgba(255,255,255,.62);
  --glass-line:rgba(255,255,255,.7);

  /* shadow */
  --sh-sm: 0 2px 8px rgba(13,28,64,.06);
  --sh-md: 0 18px 50px -22px rgba(13,28,64,.30);
  --sh-lg: 0 60px 120px -40px rgba(13,28,64,.42);
  --sh-xl: 0 80px 180px -50px rgba(13,28,64,.50);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1240px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:clip;
  letter-spacing:-.011em;
}
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--blue); color:#fff; }

/* ===================== ATMOSPHERE ===================== */
.atmosphere{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #FFFFFF 0%, var(--bg) 42%, var(--bg-2) 100%);
}
.aura{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; mix-blend-mode:normal;
  will-change:transform; }
.aura--1{ width:60vw; height:60vw; left:-12vw; top:-10vw;
  background:radial-gradient(circle at 30% 30%, rgba(110,146,255,.55), rgba(110,146,255,0) 70%); }
.aura--2{ width:55vw; height:55vw; right:-15vw; top:18vh;
  background:radial-gradient(circle at 60% 40%, rgba(46,91,255,.30), rgba(46,91,255,0) 68%); }
.aura--3{ width:50vw; height:50vw; left:20vw; bottom:-18vw;
  background:radial-gradient(circle at 50% 50%, rgba(169,192,255,.45), rgba(169,192,255,0) 70%); }
.grain{ position:absolute; inset:-200%; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 100%{transform:translate(-12%,8%)} }

/* ===================== RAIL / PROGRESS ===================== */
.rail{ position:fixed; left:0; right:0; top:0; height:2px; z-index:120; background:transparent; }
.rail__fill{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-2)); box-shadow:0 0 14px rgba(46,91,255,.5); }

/* ===================== LOGOMARK ===================== */
/* Sennova "S" mark — background image (works on file://); white variant for dark surfaces */
.logomark{ position:relative; display:inline-block; width:23px; height:26px; flex:none;
  background:url(../logo/mark.png) center/contain no-repeat; }
.logomark span{ display:none; }
.logomark--sm{ width:16px; height:18px; }
.logomark--lg{ width:56px; height:64px; }
.logomark--xl{ width:104px; height:120px; }
.logomark--white{ background-image:url(../logo/mark-white.png); }

/* ===================== NAV ===================== */
.nav{ position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-130%);
  width:min(var(--maxw),calc(100vw - 36px)); z-index:110;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:11px 11px 11px 22px; border-radius:50px;
  background:var(--glass); backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-line); box-shadow:var(--sh-md);
  opacity:0; transition:transform .9s var(--ease), opacity .6s ease; }
.nav.is-on{ transform:translateX(-50%) translateY(0); opacity:1; }
.nav__brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; }
.nav__links{ display:flex; gap:26px; font-size:14px; color:var(--ink-soft); font-weight:500; }
.nav__links a{ position:relative; transition:color .25s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-5px; height:1.5px; width:0;
  background:var(--blue); transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ background:var(--ink); color:#fff; font-size:14px; font-weight:500;
  padding:10px 18px; border-radius:40px; transition:transform .3s var(--ease), background .3s; }
.nav__cta:hover{ transform:translateY(-1px); background:var(--blue); color:#fff;
  box-shadow:0 12px 26px -10px rgba(46,91,255,.6); }
@media(max-width:860px){ .nav__links{ display:none; } }

/* ===================== SHARED TYPE ===================== */
.eyebrow{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue); margin-bottom:18px; }
.section-title{ font-size:clamp(30px,4.6vw,58px); line-height:1.04; font-weight:600;
  letter-spacing:-.03em; }
.section-title{ color:var(--ink); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:#fff; font-size:15px; font-weight:500;
  padding:13px 24px; border-radius:40px; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); background:var(--blue); box-shadow:0 16px 30px -12px rgba(46,91,255,.6); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:transparent; box-shadow:var(--sh-md); }
.btn--full{ width:100%; padding:16px; }

/* =================================================================
   ACT I — THE FILM
================================================================= */
.act{ position:relative; z-index:2; }
.act__viewport{ position:relative; height:100vh; width:100%;
  display:grid; place-items:center; overflow:hidden; }

/* ----- THE BROWSER ----- */
.browser{ position:relative; width:min(1180px,86vw); height:min(680px,72vh);
  border-radius:var(--r-lg); background:var(--paper);
  box-shadow:var(--sh-xl);
  border:1px solid rgba(255,255,255,.8);
  transform-style:preserve-3d; overflow:hidden; will-change:transform;
  z-index:3; }
.browser::after{ /* glass reflection + slow moving light */
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,.16) 100%),
    linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 56%);
  background-size:100% 100%, 280% 100%; background-position:0 0, 135% 0; background-repeat:no-repeat;
  mix-blend-mode:screen; opacity:.75; animation:sheen 9s ease-in-out infinite; }
@keyframes sheen{ 0%,100%{ background-position:0 0, 138% 0 } 50%{ background-position:0 0, -38% 0 } }

.browser__bar{ position:absolute; left:0; right:0; top:0; height:48px; display:flex; align-items:center; gap:14px;
  padding:0 16px; background:linear-gradient(180deg,#FBFCFE,#F1F4F9);
  border-bottom:1px solid var(--line-2); z-index:5; }
.browser__dots{ display:flex; gap:7px; }
.browser__dots i{ width:11px; height:11px; border-radius:50%; background:#DfE3EA; }
.browser__dots i:nth-child(1){ background:#FF6058; }
.browser__dots i:nth-child(2){ background:#FFC130; }
.browser__dots i:nth-child(3){ background:#28C940; }
.browser__address{ flex:1; max-width:520px; margin:0 auto; height:30px; border-radius:30px;
  background:#fff; border:1px solid var(--line); display:flex; align-items:center; gap:8px;
  padding:0 14px; font-size:13px; color:var(--ink-soft); box-shadow:inset 0 1px 2px rgba(0,0,0,.02); }
.browser__address .lock{ width:13px; height:13px; fill:var(--ink-mute); }
.browser__address .caret{ width:1.5px; height:14px; background:var(--blue); margin-left:auto; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
.browser__tools{ display:flex; gap:14px; }
.browser__tools i{ width:16px; height:16px; border-radius:5px; background:#E4E8EF; }

.browser__nav{ position:absolute; left:0; right:0; top:48px; height:58px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; border-bottom:1px solid var(--line-2); z-index:5;
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px); }
.browser__brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; }
.browser__menu{ display:flex; gap:24px; font-size:14px; color:var(--ink-soft); font-weight:500; }
.browser__menu a[data-clickable]{ cursor:pointer; }
.browser__navcta{ font-size:13px; font-weight:500; padding:8px 16px; border-radius:30px;
  background:var(--ink); color:#fff; }

.screen{ position:absolute; inset:0; overflow:hidden; }
.frame{ position:absolute; inset:0; opacity:0; }
.frame[data-frame="logo"]{ opacity:1; }

/* frame: breathing logo */
.frame--logo{ position:relative; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 30%, #fff, #F4F6FB); }
.frame--logo::before{ content:''; position:absolute; left:50%; top:46%; width:min(58%,420px); aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none; filter:blur(6px);
  background:radial-gradient(circle, rgba(46,91,255,.18), rgba(46,91,255,0) 62%); }
.bigmark{ display:flex; flex-direction:column; align-items:center; gap:24px; will-change:transform; }
.bigmark__word{ font-size:30px; font-weight:600; letter-spacing:-.02em; }

/* frame: build (website hero) */
.frame--build{ padding:130px 9% 0; display:flex; flex-direction:column;
  background:radial-gradient(130% 100% at 80% 0%, #F3F6FF, #fff 60%); }
.build__eyebrow{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); margin-bottom:18px; }
.build__head{ font-size:clamp(30px,4.4vw,56px); line-height:1.03; font-weight:600; letter-spacing:-.03em; }
.build__sub{ margin-top:18px; font-size:clamp(15px,1.5vw,19px); color:var(--ink-soft); max-width:30ch; }
.build__cta{ margin-top:26px; display:flex; gap:12px; }
.build__cta .btn{ font-size:14px; padding:11px 20px; }
.build__media{ margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  padding:34px 0; }
.build__media span{ height:120px; border-radius:var(--r-md); background:linear-gradient(135deg,#E9EEFA,#DCE5F8);
  box-shadow:var(--sh-sm); }
.build__media span:nth-child(2){ background:linear-gradient(135deg,#E7ECF7,#CFDBF5); }
.build__media span:nth-child(3){ background:linear-gradient(135deg,#EEF1FA,#E2E9F8); }

/* page-load bar (navigation indicator) */
.browser__load{ position:absolute; left:0; top:48px; height:3px; width:100%; z-index:6;
  background:linear-gradient(90deg, var(--blue), var(--blue-2));
  box-shadow:0 0 14px rgba(46,91,255,.55); transform-origin:0 50%; }

/* frame: webdesign wireframe — a page that builds itself */
.frame--wire{ padding:118px 7% 6%; display:flex; background:linear-gradient(180deg,#fff,#F6F8FC); }
.wire{ width:100%; display:flex; flex-direction:column; gap:18px; }
.wire__nav{ display:flex; align-items:center; gap:12px; }
.wb--navlinks{ display:flex; gap:10px; margin-left:6px; }
.wb--navlinks i.bar{ display:block; height:8px; width:42px; border-radius:6px; background:#E2E8F2; }
.wire__hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; margin-top:6px; }
.wire__hcol{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; width:100%; }
.wire__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6px; }
.wcard{ display:flex; flex-direction:column; gap:9px; }

/* skeleton primitives — bars simulate text, blocks simulate images */
.wb{ display:block; border-radius:8px; background:#E7ECF4; }
.bar{ background:#E2E8F2; }
.blk{ background:linear-gradient(135deg,#E9EEFA,#D6E2F5); }
.wb--logo{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--blue-2),var(--blue)); }
.wb--btn{ width:82px; height:30px; border-radius:30px; }
.wb--h1{ height:22px; width:82%; border-radius:7px; }
.wb--h2{ height:22px; width:56%; border-radius:7px; }
.wb--line{ height:10px; width:100%; border-radius:6px; }
.wb--line.short{ width:58%; }
.wb--cta{ width:118px; height:34px; border-radius:30px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); margin-top:6px; }
.wb--img{ width:100%; border-radius:12px; position:relative; overflow:hidden; }
.wire__himg{ height:150px; }
.wcard .wb--img{ height:84px; }
/* image placeholders get a sun + mountain glyph so they read as pictures */
.wb--img::before{ content:''; position:absolute; top:14px; left:16px; width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.78); }
.wb--img::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:48%; background:rgba(255,255,255,.5);
  clip-path:polygon(0 100%, 28% 46%, 50% 74%, 76% 28%, 100% 62%, 100% 100%); }

/* frame: chapter divider — "Leistungen" */
.frame--chapter{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 9%;
  background:radial-gradient(120% 120% at 50% 32%, #fff, #EAF1FF); }
.chapter__idx{ font-size:14px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue); margin-bottom:20px; }
.chapter__title{ font-size:clamp(52px,8.5vw,116px); font-weight:600; letter-spacing:-.045em;
  line-height:.92; color:var(--ink); }
.chapter__rule{ display:block; width:84px; height:3px; border-radius:3px; background:var(--blue);
  margin:28px 0; transform-origin:50% 50%; }
.chapter__sub{ font-size:clamp(15px,1.6vw,19px); color:var(--ink-soft); max-width:40ch; }

/* frame: proof — manifesto + counting stat cards */
.frame--why{ padding:112px 8% 6%; display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(46,91,255,.08), transparent 60%),
    radial-gradient(130% 100% at 16% 0%, #F2F6FF, #fff 60%); }
.why__eyebrow{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px; }
.why__lead{ font-size:clamp(20px,2.5vw,32px); font-weight:600; letter-spacing:-.022em;
  color:var(--ink); max-width:24ch; line-height:1.16; }
.why__text{ margin-top:16px; font-size:clamp(15px,1.5vw,18px); color:var(--ink-soft);
  max-width:50ch; line-height:1.55; }
.why__stats{ margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat{ position:relative; padding:22px 22px 20px; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  box-shadow:0 14px 34px -22px rgba(13,28,64,.35); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:14px; }
.stat::before{ content:''; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-2)); }
.stat__ico{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:rgba(46,91,255,.1); color:var(--blue); }
.stat__ico svg{ width:19px; height:19px; }
.stat__num{ font-size:clamp(34px,4.4vw,54px); font-weight:700; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums; background:linear-gradient(135deg, var(--navy), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label{ margin-top:auto; font-size:13.5px; color:var(--ink-mute); line-height:1.35; padding-top:4px; }

/* card 2 — performance */
.perf__row{ display:flex; align-items:center; gap:10px; }
.perf__ok{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(40,201,64,.14); color:#1FB23A; }
.perf__ok svg{ width:14px; height:14px; }
.perf__bar{ height:6px; border-radius:6px; background:rgba(46,91,255,.12); overflow:hidden; }
.perf__bar i{ display:block; height:100%; width:100%; border-radius:6px; transform-origin:0 50%;
  background:linear-gradient(90deg, var(--blue), var(--blue-2)); }

/* card 3 — responsive devices */
.resp{ position:relative; height:138px; }
.dev{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:128px; height:80px;
  border:2px solid rgba(14,17,22,.42); border-radius:9px; box-shadow:var(--sh-sm);
  background:linear-gradient(135deg,#fff,#EAF1FF); overflow:hidden; }
.dev__scr{ position:absolute; inset:5px; border-radius:5px;
  background:repeating-linear-gradient(180deg, rgba(46,91,255,.16) 0 5px, transparent 5px 13px); }
.dev__home{ position:absolute; left:50%; bottom:5px; transform:translateX(-50%);
  width:40%; max-width:26px; height:3px; border-radius:3px; background:rgba(14,17,22,.4); }
/* desktop stand (clearly a monitor) */
.dev__stand{ position:absolute; left:50%; top:calc(50% + 41px); transform:translateX(-50%);
  width:46px; height:4px; border-radius:3px; background:rgba(14,17,22,.34); }
.dev__stand::before{ content:''; position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  width:13px; height:10px; background:rgba(14,17,22,.34); border-radius:0 0 2px 2px; }
/* finale: the three labelled devices */
.trio{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:18px; padding-bottom:4px; }
.d3{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.d3v{ position:relative; border:2px solid var(--blue); background:rgba(46,91,255,.07); }
.d3v--desk{ width:52px; height:33px; border-radius:5px 5px 2px 2px; }
.d3v--desk::after{ content:''; position:absolute; left:50%; top:calc(100% + 3px); transform:translateX(-50%);
  width:22px; height:3px; border-radius:2px; background:var(--blue); }
.d3v--tab{ width:28px; height:38px; border-radius:6px; }
.d3v--phone{ width:18px; height:36px; border-radius:6px; }
.d3l{ font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); }

@media(max-width:760px){ .why__stats{ grid-template-columns:1fr; gap:12px; }
  .stat{ padding:18px; } .stat__num{ font-size:32px; } .resp{ height:104px; } }

/* frame: search */
.frame--search{ padding:128px 9% 8%; background:linear-gradient(180deg,#fff,#F5F7FC);
  display:flex; flex-direction:column; gap:22px; }
.search__bar{ display:flex; align-items:center; gap:12px; height:58px; padding:0 22px;
  background:#fff; border:1px solid var(--line); border-radius:40px; box-shadow:var(--sh-md);
  font-size:18px; color:var(--ink); }
.search__bar svg{ width:20px; height:20px; fill:var(--ink-mute); }
.search__bar [data-typed]{ display:inline-block; white-space:nowrap; }
.caret--dark{ background:var(--ink); }
.search__results{ display:flex; flex-direction:column; gap:14px; }
.result{ padding:16px 20px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:3px; opacity:.55; }
.result__url{ font-size:12px; color:#2E8B57; }
.result__title{ font-size:16px; color:var(--blue); font-weight:500; }
.result__desc{ font-size:13px; color:var(--ink-mute); }
.result--top{ opacity:1; border:1px solid rgba(46,91,255,.25); box-shadow:var(--sh-md);
  background:linear-gradient(180deg,#fff,#FAFBFF); }
.result__badge{ align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.05em;
  color:#fff; background:var(--blue); padding:4px 10px; border-radius:30px; margin-bottom:6px; }
.search__ai{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft);
  padding:14px 18px; border-radius:30px; background:rgba(46,91,255,.06); border:1px solid rgba(46,91,255,.14); }
.search__ai b{ color:var(--ink); }
.search__ai-dot{ width:9px; height:9px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 0 rgba(46,91,255,.5); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(46,91,255,.5)} 70%{box-shadow:0 0 0 12px rgba(46,91,255,0)} 100%{box-shadow:0 0 0 0 rgba(46,91,255,0)} }

/* frame: branding — the Sennova brand board (monochrome identity) */
.frame--brand{ background:radial-gradient(120% 120% at 50% 28%, #fff, #ECEEF2); }
.board{ position:absolute; inset:0; padding:6%; display:flex; flex-direction:column; }
.board__grid{ flex:1; display:grid; grid-template-columns:1.05fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; min-height:0; }
.board__main{ grid-column:1; grid-row:1 / span 2; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.board__txt{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.board__name{ font-size:clamp(24px,2.8vw,38px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.board__claim{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.board__cell{ position:relative; border-radius:var(--r-md); background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-sm); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.board__lab{ position:absolute; left:14px; bottom:10px; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink-mute); }
.pal{ display:flex; gap:8px; }
.pal i{ width:30px; height:30px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.typ{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.typ b{ font-size:46px; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.typ span{ font-size:12px; color:var(--ink-mute); }
.bcard{ width:74%; aspect-ratio:1.7; border-radius:11px; background:linear-gradient(135deg,#15171c,#2c303a);
  box-shadow:var(--sh-md); display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 16px; }
.bcard span:last-child{ color:#fff; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.appicon{ width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,#15171c,#33373f);
  box-shadow:var(--sh-md); display:grid; place-items:center; }
.appicon .logomark{ width:26px; height:30px; }
@media(max-width:760px){ .board{ padding:46px 5% 5%; }
  .board__grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; }
  .board__main{ grid-column:1 / span 2; grid-row:auto; min-height:120px; } }

/* phone companion */
.phone{ position:absolute; left:50%; top:50%; margin-left:-115px; margin-top:-239px;
  width:230px; height:478px; border-radius:42px; background:#0E1116;
  padding:8px; box-shadow:var(--sh-xl); opacity:0; z-index:4; will-change:transform;
  border:1px solid rgba(255,255,255,.12); }
.phone__notch{ position:absolute; left:50%; top:16px; transform:translateX(-50%); width:84px; height:22px;
  background:#0E1116; border-radius:0 0 16px 16px; z-index:3; }
.phone__screen{ width:100%; height:100%; border-radius:34px; background:linear-gradient(180deg,#fff,#F4F6FB);
  padding:30px 18px 18px; overflow:hidden; display:flex; flex-direction:column; gap:12px; }
.phone__nav{ display:flex; align-items:center; justify-content:space-between; }
.phone__nav i{ width:18px; height:13px; border-radius:3px;
  background:linear-gradient(180deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 7px,transparent 7px 10px,var(--ink) 10px 12px); }
.phone__head{ height:30px; width:80%; border-radius:8px; background:linear-gradient(90deg,#E6ECF8,#DDE6F6); margin-top:8px; }
.phone__line{ height:11px; width:100%; border-radius:6px; background:#EDF0F7; }
.phone__line--s{ width:62%; }
.phone__btn{ height:38px; width:130px; border-radius:30px; background:var(--blue); margin-top:4px; }
.phone__media{ margin-top:auto; height:150px; border-radius:18px; background:linear-gradient(135deg,#E9EEFA,#D6E1F7); }

/* status ring (maintenance) */
.statusring{ position:absolute; right:18vw; top:40vh; z-index:8; opacity:0;
  background:var(--glass); backdrop-filter:blur(16px); border:1px solid var(--glass-line);
  border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--sh-lg); min-width:188px; }
.statusring__pulse{ position:absolute; right:16px; top:18px; width:12px; height:12px; border-radius:50%;
  background:#28C940; box-shadow:0 0 0 0 rgba(40,201,64,.5); animation:pulse-g 1.8s infinite; }
@keyframes pulse-g{ 0%{box-shadow:0 0 0 0 rgba(40,201,64,.5)} 70%{box-shadow:0 0 0 12px rgba(40,201,64,0)} 100%{box-shadow:0 0 0 0 rgba(40,201,64,0)} }
.statusring__label{ font-size:12px; font-weight:600; color:var(--ink-soft); letter-spacing:.04em; }
.statusring__list{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.statusring__list li{ font-size:14px; color:var(--ink); display:flex; align-items:center; gap:9px; opacity:.35; }
.statusring__list li::before{ content:''; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--line); flex:none; transition:.3s; }
.statusring__list li.is-on{ opacity:1; }
.statusring__list li.is-on::before{ background:#28C940; border-color:#28C940;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat; }

/* captions / narration */
.caption{ position:absolute; z-index:7; max-width:430px; opacity:0; will-change:transform,opacity;
  pointer-events:none; }
.caption--hero{ top:9vh; bottom:auto; left:0; right:0; margin:0 auto; text-align:center;
  max-width:920px; padding:0 24px; }
.hero__title{ margin-top:6px; font-size:clamp(32px,5.4vw,66px); line-height:1.02; font-weight:600;
  letter-spacing:-.04em; color:var(--ink); }
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .ln__in{ display:block; }
.hero__title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--blue);
  letter-spacing:0; }

/* scroll invitation */
.hero__scroll{ position:absolute; left:0; right:0; bottom:5.5vh; margin:0 auto; z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); }
.hero__mouse{ width:24px; height:38px; border:2px solid var(--ink-mute); border-radius:14px;
  position:relative; opacity:.7; }
.hero__mouse i{ position:absolute; top:7px; left:50%; width:4px; height:7px; border-radius:3px;
  background:var(--ink-mute); transform:translateX(-50%); animation:mouse 1.7s var(--ease) infinite; }
@keyframes mouse{ 0%{opacity:0;transform:translate(-50%,0)} 25%{opacity:1}
  65%{opacity:1;transform:translate(-50%,10px)} 100%{opacity:0;transform:translate(-50%,10px)} }

/* hero 3D stage (mouse parallax wrapper) */
.stage3d{ transform-style:preserve-3d; will-change:transform; }
.caption--left{ left:6vw; top:0; bottom:0; max-width:430px;
  display:flex; flex-direction:column; justify-content:center; text-align:left; }
.caption--top{ left:0; right:0; top:5.5vh; bottom:auto; margin:0 auto; max-width:740px;
  text-align:center; padding:0 24px; }
.caption--top .caption__body{ margin-left:auto; margin-right:auto; max-width:60ch; }
.caption--bottom{ left:0; right:0; bottom:6.5vh; top:auto; margin:0 auto; max-width:620px;
  text-align:center; padding:0 24px; }
.caption--bottom .caption__body{ margin-left:auto; margin-right:auto; max-width:46ch; }
.caption__kicker{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:16px;
  padding:6px 12px; border-radius:30px; background:rgba(46,91,255,.07); }
.caption__title{ font-size:clamp(30px,4vw,54px); line-height:1.04; font-weight:600; letter-spacing:-.03em; }
.caption__body{ margin-top:18px; font-size:clamp(15px,1.5vw,18px); color:var(--ink-soft); line-height:1.55; }
.caption__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.caption__tags li{ font-size:13px; font-weight:500; color:var(--ink-soft);
  padding:7px 14px; border-radius:30px; background:rgba(255,255,255,.7);
  border:1px solid var(--line); backdrop-filter:blur(6px); }
.caption--left .caption__tags{ justify-content:flex-start; }
.caption--top .caption__tags,.caption--bottom .caption__tags{ justify-content:center; }
.caption__scroll{ margin-top:26px; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); }
.caption__scroll span{ display:inline-block; animation:bob 1.6s var(--ease) infinite; }
@keyframes bob{ 50%{transform:translateY(6px)} }

@media(max-width:760px){
  .caption--left{ left:5vw; right:5vw; max-width:none; top:auto; bottom:8vh;
    display:block; justify-content:initial; }
  .browser{ width:92vw; height:62vh; }
}

/* =================================================================
   ACT II
================================================================= */
.process,.work,.about,.pricing,.studio,.contact{ position:relative; z-index:2; }

/* PROCESS */
.process{ max-width:var(--maxw); margin:0 auto; padding:14vh 24px 16vh; }
.process__intro{ margin-bottom:8vh; max-width:760px; }
.process__sub{ margin-top:18px; font-size:clamp(15px,1.55vw,19px); color:var(--ink-soft); line-height:1.55; max-width:50ch; }
.process__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.process__sticky{ position:sticky; top:16vh; height:66vh; }
.process__stage{ position:relative; height:100%; border-radius:var(--r-xl);
  background:radial-gradient(120% 120% at 30% 15%, #fff, #EEF1F7);
  border:1px solid var(--glass-line); box-shadow:var(--sh-lg); overflow:hidden; }
.process__num{ position:absolute; left:32px; top:20px; font-size:104px; font-weight:600;
  letter-spacing:-.04em; color:rgba(14,17,22,.05); z-index:1; }
.process__label{ position:absolute; left:38px; bottom:30px; z-index:3; font-size:14px; font-weight:600;
  letter-spacing:.04em; color:var(--ink-soft); }

/* animated scenes (one per active step) */
.pscenes{ position:absolute; inset:0; z-index:2; }
.pscene{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; }
.pscene > div{ position:relative; width:74%; max-width:340px; height:58%; }

/* —— 01 Kennenlernen — video call —— */
.call{ display:flex; flex-direction:column; gap:12px; }
.call__status{ align-self:flex-start; display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; color:#1E7A34; }
.call__status::before{ content:''; width:8px; height:8px; border-radius:50%; background:#28C940;
  box-shadow:0 0 0 0 rgba(40,201,64,.5); animation:pulse-g 1.8s infinite; }
.call__tiles{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.call__tile{ position:relative; border-radius:14px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(160deg,#EAF0FB,#D7E2F5); border:1px solid var(--line); box-shadow:var(--sh-sm); }
.call__tile--b{ background:linear-gradient(160deg,#ECEFF4,#D4DAE3); }
.call__av{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  font-weight:600; color:#fff; background:linear-gradient(135deg,var(--navy),var(--blue)); box-shadow:var(--sh-md); }
.call__av--client{ background:linear-gradient(135deg,#5B636F,#8A93A1); }
.call__av--client svg{ width:30px; height:30px; }
.call__name{ position:absolute; left:9px; bottom:8px; font-size:11px; font-weight:600; color:var(--ink-soft);
  background:rgba(255,255,255,.82); padding:3px 9px; border-radius:20px; backdrop-filter:blur(4px); }
.call__bar{ display:flex; justify-content:center; gap:11px; }
.call__btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-sm); color:var(--ink-soft); }
.call__btn svg{ width:17px; height:17px; }
.call__btn--end{ background:#FF5A52; color:#fff; border-color:transparent; }

/* —— 02 Strategie — mindmap → wireframe —— */
.mind,.wf{ position:absolute; inset:0; }
.mind__glow{ position:absolute; left:50%; top:50%; width:170px; height:170px; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; filter:blur(6px);
  background:radial-gradient(circle, rgba(46,91,255,.20), rgba(46,91,255,0) 70%); }
.mind__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; color:rgba(46,91,255,.5); }
.mind__lines path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
.mnode{ position:absolute; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  white-space:nowrap; color:var(--ink-soft); padding:8px 13px; border-radius:30px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-md); }
.mico{ width:15px; height:15px; flex:none; color:var(--blue); }
.mnode--center{ left:50%; top:50%; font-size:13.5px; padding:11px 18px; color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 14px 30px -10px rgba(46,91,255,.6); }
.mnode--center .mico{ color:#fff; }
.mnode--tl{ left:15%; top:20%; } .mnode--tr{ left:85%; top:20%; }
.mnode--bl{ left:15%; top:80%; } .mnode--br{ left:85%; top:80%; }
/* wireframe blueprint */
.wf{ display:flex; flex-direction:column; gap:10px; }
.wf__top{ display:flex; align-items:center; gap:8px; }
.wf__dot{ width:20px; height:20px; border-radius:6px; border:1.5px dashed var(--blue-2); }
.wf__navl{ width:32px; height:8px; border-radius:4px; border:1.5px dashed rgba(46,91,255,.4); }
.wf__navl:nth-of-type(2){ margin-left:auto; }
.wf__hero{ flex:1; display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
.wf__block{ border-radius:10px; border:1.5px dashed var(--blue-2);
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(46,91,255,.22) 50%, transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(46,91,255,.22) 50%, transparent calc(50% + 1px)),
    rgba(46,91,255,.04); }
.wf__col{ display:flex; flex-direction:column; gap:9px; justify-content:center; }
.wf__line{ height:10px; border-radius:5px; background:rgba(46,91,255,.14); }
.wf__line.short{ width:60%; }
.wf__btn{ width:84px; height:28px; border-radius:8px; border:1.5px dashed var(--blue); margin-top:6px; }
.wf__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; height:30%; }
.wf__card{ border-radius:8px; border:1.5px dashed rgba(46,91,255,.4); background:rgba(46,91,255,.04); }

/* —— 03 Design —— */
.uicard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-md);
  padding:20px; display:flex; flex-direction:column; gap:12px; }
.ui-row{ border-radius:6px; background:#E7ECF4; height:14px; }
.ui-h1{ width:70%; height:18px; background:linear-gradient(90deg,var(--ink),#3A4150); }
.ui-h2{ width:48%; }
.ui-img{ height:38%; border-radius:10px; background:linear-gradient(135deg,#E9EEFA,#CDDDF6); }
.ui-btn{ width:96px; height:30px; border-radius:30px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); }
.ui-sw{ display:flex; gap:8px; }
.ui-sw i{ width:26px; height:26px; border-radius:7px; }
.ui-sw i:nth-child(1){ background:var(--navy); } .ui-sw i:nth-child(2){ background:var(--blue); } .ui-sw i:nth-child(3){ background:var(--blue-3); }

/* —— 04 Entwicklung —— */
.codewin{ background:#0E1116; border-radius:var(--r-md); box-shadow:var(--sh-lg); overflow:hidden;
  display:flex; flex-direction:column; }
.codewin__bar{ height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#171A20; }
.codewin__bar i{ width:9px; height:9px; border-radius:50%; background:#3A4150; }
.codewin__body{ position:relative; padding:16px 16px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.cl{ height:7px; border-radius:4px; background:rgba(255,255,255,.16); transform-origin:0 50%; }
.cl--1{ width:40%; background:rgba(110,146,255,.7); } .cl--2{ width:66%; } .cl--3{ width:54%; margin-left:16px; }
.cl--4{ width:72%; margin-left:16px; } .cl--5{ width:34%; }
.ccur{ position:absolute; left:50px; bottom:34px; width:2px; height:14px; background:var(--blue-2); }
.codewin__load{ height:4px; background:rgba(255,255,255,.1); }
.codewin__load span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--blue),var(--blue-2)); transform-origin:0 50%; }

/* —— 05 Launch —— */
.launch{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.launch__addr{ display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:30px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); font-size:13px; color:var(--ink-soft); }
.launch__addr svg{ width:13px; height:13px; fill:#28C940; }
.launch__check{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#28C940,#1FAe37); box-shadow:0 0 0 0 rgba(40,201,64,.4); }
.launch__check svg{ width:30px; height:30px; }
.launch__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:260px; }
.launch__chips span{ font-size:12px; font-weight:600; color:#1E7A34; background:rgba(40,201,64,.12);
  border-radius:30px; padding:6px 12px; }
.launch__chips span::before{ content:'✓ '; }

/* —— 06 Wachstum —— */
.growth{ display:flex; flex-direction:column; gap:16px; }
.growth__head{ display:flex; align-items:baseline; gap:9px; }
.growth__head b{ font-size:46px; font-weight:700; letter-spacing:-.03em; color:var(--blue);
  font-variant-numeric:tabular-nums; }
.growth__head span{ font-size:13px; color:var(--ink-mute); }
.growth__bars{ display:flex; align-items:flex-end; gap:8px; height:64px; }
.growth__bars i{ flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--blue-2),var(--blue)); transform-origin:50% 100%; }
.growth__bars i:nth-child(1){ height:30%; } .growth__bars i:nth-child(2){ height:46%; }
.growth__bars i:nth-child(3){ height:40%; } .growth__bars i:nth-child(4){ height:64%; }
.growth__bars i:nth-child(5){ height:82%; } .growth__bars i:nth-child(6){ height:100%; }
.growth__curve{ width:100%; height:54px; color:var(--blue); }

.process__steps{ display:flex; flex-direction:column; gap:6vh; padding:14vh 0 18vh; }
.pstep{ position:relative; padding:28px 30px; border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:rgba(255,255,255,.5); transition:transform .5s var(--ease), box-shadow .5s, opacity .5s, background .5s;
  opacity:.5; }
.pstep::before{ content:''; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:3px;
  background:var(--blue); transform:scaleY(0); transform-origin:50% 50%; transition:transform .5s var(--ease); }
.pstep.is-active{ opacity:1; background:var(--paper); box-shadow:var(--sh-lg); border-color:transparent;
  transform:translateX(6px) scale(1.02); }
.pstep.is-active::before{ transform:scaleY(1); }
.pstep__idx{ font-size:13px; font-weight:600; color:var(--blue); letter-spacing:.1em; }
.pstep h3{ font-size:24px; font-weight:600; margin:8px 0 8px; letter-spacing:-.02em; }
.pstep p{ color:var(--ink-soft); font-size:15px; }
@media(max-width:880px){ .process__grid{ grid-template-columns:1fr; } .process__sticky{ display:none; }
  .pstep{ opacity:1; } .pstep.is-active{ transform:none; } }

/* PROJECTS */
.work{ padding:12vh 0; overflow:hidden; }
.work__head{ max-width:var(--maxw); margin:0 auto 6vh; padding:0 24px; }
.work__track{ display:flex; gap:32px; padding:0 24px; will-change:transform; }
.cardw{ position:relative; flex:none; width:min(640px,80vw); height:64vh; border-radius:var(--r-xl);
  overflow:hidden; background:var(--paper); box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.7);
  display:flex; flex-direction:column; }
.cardw__shot{ flex:1; position:relative; overflow:hidden; }
.cardw__shot::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 30%, #fff), color-mix(in srgb,var(--accent) 70%, #0B1B3A)); }
.cardw__shot::before{ content:''; position:absolute; inset:0; z-index:2; opacity:.5;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 20px); }
.cardw__meta{ padding:26px 30px 30px; }
.cardw__meta span{ font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--blue); text-transform:uppercase; }
.cardw__meta h3{ font-size:28px; font-weight:600; margin:8px 0 6px; letter-spacing:-.02em; }
.cardw__meta p{ color:var(--ink-mute); font-size:14px; }
.cardw--cta{ background:var(--ink); color:#fff; align-items:center; justify-content:center; width:min(460px,70vw); }
.cardw--cta .cardw__inner{ text-align:center; display:flex; flex-direction:column; gap:24px; align-items:center; }
.cardw--cta h3{ font-size:34px; font-weight:600; line-height:1.08; letter-spacing:-.02em; }
.cardw--cta .btn{ background:#fff; color:var(--ink); }

/* ABOUT */
.about{ max-width:var(--maxw); margin:0 auto; padding:13vh 24px; }
.about__grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(40px,6vw,90px); align-items:start; }
.about__intro{ position:sticky; top:110px; align-self:start; }
.about__p{ margin-top:22px; font-size:clamp(15px,1.55vw,18px); color:var(--ink-soft); line-height:1.6; max-width:48ch; }
.about__by{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; }
.about__avatar{ width:48px; height:48px; border-radius:50%; flex:none; color:#fff; display:grid; place-items:center;
  font-size:16px; font-weight:600; letter-spacing:.02em; background:linear-gradient(135deg,#15171c,#33373f); box-shadow:var(--sh-sm); }
.about__byname{ display:flex; flex-direction:column; font-size:16px; font-weight:600; color:var(--ink); }
.about__byname small{ font-size:13px; font-weight:500; color:var(--ink-mute); }

/* about — journey timeline */
.timeline{ position:relative; padding-top:6px; }
.tl{ position:relative; padding:0 0 88px 46px; }
.tl:last-child{ padding-bottom:0; }
.tl::before{ content:''; position:absolute; left:11px; top:7px; bottom:-7px; width:2px; background:var(--line); }
.tl:last-child::before{ display:none; }
.tl__dot{ position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--blue); box-shadow:0 0 0 4px rgba(46,91,255,.08); }
.tl__dot::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--blue); }
.tl__step{ font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--blue); }
.tl h3{ font-size:clamp(20px,2.2vw,27px); font-weight:600; letter-spacing:-.02em; margin:5px 0 8px; }
.tl p{ color:var(--ink-soft); font-size:15px; line-height:1.55; max-width:48ch; }
@media(max-width:820px){ .about__grid{ grid-template-columns:1fr; gap:44px; }
  .about__intro{ position:static; } }

/* PRICING */
.pricing{ max-width:var(--maxw); margin:0 auto; padding:12vh 24px; }
.pricing__head{ text-align:center; margin-bottom:6vh; }
.pricing__head .eyebrow{ display:block; }
.pricing__sub{ margin:20px auto 0; max-width:56ch; color:var(--ink-soft); font-size:clamp(15px,1.5vw,18px); line-height:1.55; }
.pricing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.pricing__note{ margin:4.5vh auto 0; max-width:62ch; text-align:center; color:var(--ink-mute); font-size:14px; line-height:1.6; }
.tier{ position:relative; padding:38px 32px; border-radius:var(--r-xl); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-sm); display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s, opacity .4s; }
.tier--featured{ background:linear-gradient(180deg,#0E1116,#1A2436); color:#fff; border-color:transparent; transform:scale(1.03); }

/* hovered card lifts gently forward (others stay as they are) */
.tier:hover{ transform:translateY(-10px) scale(1.03);
  box-shadow:0 30px 60px -28px rgba(13,28,64,.34); border-color:rgba(46,91,255,.32); z-index:3; }
.tier--featured:hover{ transform:translateY(-10px) scale(1.05);
  box-shadow:0 36px 72px -28px rgba(13,28,64,.46); z-index:3; }
/* card buttons highlight blue on hover (like the Profi package) */
.tier .btn:hover,.tier .btn--ghost:hover{ background:var(--blue); color:#fff; border-color:transparent;
  box-shadow:0 14px 30px -12px rgba(46,91,255,.6); }
.tier__flag{ position:absolute; top:20px; right:24px; font-size:12px; font-weight:600; letter-spacing:.06em;
  color:#fff; background:var(--blue); padding:5px 12px; border-radius:30px; }
.tier__top h3{ font-size:24px; font-weight:600; letter-spacing:-.02em; }
.tier__top p{ font-size:14px; color:var(--ink-mute); margin-top:6px; }
.tier--featured .tier__top p{ color:rgba(255,255,255,.6); }
.tier__price{ margin:24px 0; display:flex; align-items:baseline; gap:8px; }
.tier__price span{ font-size:14px; color:var(--ink-mute); }
.tier__price b{ font-size:34px; font-weight:600; letter-spacing:-.02em; }
.tier ul{ display:flex; flex-direction:column; gap:13px; margin-bottom:28px; flex:1; }
.tier li{ font-size:15px; color:var(--ink-soft); display:flex; gap:11px; align-items:center; }
.tier--featured li{ color:rgba(255,255,255,.82); }
.tier li::before{ content:''; width:18px; height:18px; border-radius:50%; flex:none;
  background:rgba(46,91,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5BFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.tier--featured li::before{ background-color:rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
@media(max-width:860px){ .pricing__grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } .tier--featured{ transform:none; } }

/* BRANDING ADD-ON — a brand board (monochrome identity) */
.studio{ max-width:var(--maxw); margin:0 auto; padding:12vh 24px; }
.studio__inner{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(36px,5vw,72px); align-items:center; }
.studio__info .eyebrow{ display:block; }
.studio__lead{ margin-top:20px; font-size:clamp(16px,1.6vw,19px); color:var(--ink-soft); line-height:1.55; max-width:42ch; }
.studio__list{ margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:13px 20px; }
.studio__list li{ font-size:15px; color:var(--ink); display:flex; align-items:center; gap:11px; }
.studio__list li::before{ content:''; width:18px; height:18px; border-radius:50%; flex:none;
  background:rgba(46,91,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5BFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.studio__price{ margin:30px 0 26px; display:flex; align-items:baseline; gap:9px; }
.studio__price span{ font-size:15px; color:var(--ink-mute); }
.studio__price b{ font-size:clamp(28px,3.4vw,40px); font-weight:600; letter-spacing:-.02em; }

/* the board (right) */
.studio__board{ display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:auto auto auto;
  gap:14px; }
.bcell{ position:relative; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-sm); display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s; min-height:118px; }
.bcell:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.bcell__lab{ position:absolute; left:16px; bottom:12px; font-size:12px; font-weight:600;
  letter-spacing:.04em; color:var(--ink-mute); }
.bcell--hero{ grid-column:1; grid-row:1 / span 2; flex-direction:column; gap:18px;
  background:radial-gradient(120% 120% at 50% 35%, #fff, #EDEFF3); }
.bcell--hero .logomark{ width:70px; height:80px; }
.bcell__txt{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.bcell__name{ font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.bcell__claim{ font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.bcell--app{ grid-column:2; grid-row:1; }
.bcell--type{ grid-column:2; grid-row:2; }
.bcell--pal{ grid-column:1; grid-row:3; }
.bcell--card{ grid-column:2; grid-row:3; }
@media(max-width:920px){ .studio__inner{ grid-template-columns:1fr; gap:46px; }
  .studio__board{ grid-template-columns:1fr 1fr; }
  .bcell--hero{ grid-column:1 / span 2; grid-row:auto; min-height:160px; }
  .bcell--app{ grid-column:1; grid-row:auto; } .bcell--type{ grid-column:2; grid-row:auto; }
  .bcell--pal{ grid-column:1; grid-row:auto; } .bcell--card{ grid-column:2; grid-row:auto; } }
@media(max-width:520px){ .studio__list{ grid-template-columns:1fr; } }

/* CONTACT */
.contact{ padding:8vh 24px 14vh; display:grid; place-items:center; }
.browser--contact{ width:min(1180px,95vw); height:auto; min-height:560px; }
.screen--contact{ position:relative; inset:auto; }
.contactform{ padding:48px clamp(28px,6vw,72px) 56px; }
.contactform h2{ font-size:clamp(28px,3.6vw,46px); font-weight:600; letter-spacing:-.03em; line-height:1.06; margin-top:6px; }
.contactform__lead{ margin-top:16px; color:var(--ink-soft); font-size:17px; max-width:46ch; }
.contactform form{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ position:relative; }
.field--full{ grid-column:span 2; }

/* package picker */
.field-pkg{ grid-column:span 2; border:none; padding:0; margin:0 0 4px; min-width:0; }
.field-pkg legend{ padding:0; font-size:13px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:12px; }
.field-pkg__opts{ display:flex; flex-wrap:wrap; gap:10px; }
.pkg{ display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:30px;
  border:1px solid var(--line); background:#fff; cursor:pointer; font-size:14px; color:var(--ink-soft);
  transition:border-color .25s, background .25s, box-shadow .25s, color .25s; }
.pkg input{ width:15px; height:15px; accent-color:var(--blue); cursor:pointer; }
.pkg:hover{ border-color:var(--blue-2); color:var(--ink); }
.pkg:has(input:checked){ border-color:var(--blue); background:rgba(46,91,255,.06); color:var(--ink);
  font-weight:500; box-shadow:0 0 0 3px rgba(46,91,255,.09); }
.field input,.field textarea{ width:100%; padding:20px 16px 8px; font-family:inherit; font-size:16px;
  color:var(--ink); background:#F3F5F9; border:1px solid #D5DBE4; border-radius:var(--r-sm);
  outline:none; transition:.25s; resize:none; }
.field input:hover,.field textarea:hover{ border-color:#B9C2CF; }
.field input:focus,.field textarea:focus{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,91,255,.12); }
.field label{ position:absolute; left:16px; top:16px; font-size:15px; color:var(--ink-soft);
  pointer-events:none; transition:.22s var(--ease); }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:7px; font-size:11px; color:var(--blue); font-weight:600; letter-spacing:.04em; }
.field textarea::placeholder{ color:var(--ink-mute); }

/* dropdown fields */
.field--select select{ width:100%; padding:22px 40px 8px 16px; font-family:inherit; font-size:16px;
  color:var(--ink); background-color:#F3F5F9; border:1px solid #D5DBE4; border-radius:var(--r-sm);
  outline:none; transition:.25s; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
.field--select select:hover{ border-color:#B9C2CF; }
.field--select select:focus{ background-color:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,91,255,.12); }
.field--select label{ position:absolute; left:16px; top:7px; font-size:11px; font-weight:600;
  color:var(--blue); letter-spacing:.04em; pointer-events:none; }

.contactform form .btn--full{ grid-column:span 2; margin-top:6px; }
/* submit success state */
.btn.is-sent{ background:var(--blue); pointer-events:none; }
.btn .btn__check{ width:20px; height:20px; flex:none; }
.contactform.is-sent .field,
.contactform.is-sent .field-pkg{ opacity:.4; pointer-events:none; transition:opacity .5s ease; }
.sent-msg{ margin-top:20px; padding:16px 20px; border-radius:var(--r-sm); background:rgba(40,201,64,.1);
  color:#1E7A34; font-weight:500; grid-column:span 2; }
@media(max-width:640px){ .contactform form{ grid-template-columns:1fr; } .field--full,.field-pkg{ grid-column:span 1; }
  .contactform form .btn--full,.sent-msg{ grid-column:span 1; } }

/* FOOTER */
.foot{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:9vh 24px 4vh;
  border-top:1px solid var(--line); }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr 1fr; gap:40px; align-items:start; }
.foot__brand{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:600; }
.foot__tag{ margin-top:14px; color:var(--ink-soft); font-size:15px; max-width:30ch; }
.foot__col{ display:flex; flex-direction:column; gap:12px; }
.foot__col h4{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:4px; }
.foot__col a, .foot__loc{ font-size:15px; color:var(--ink-soft); transition:color .25s; }
.foot__col a:hover{ color:var(--blue); }
.foot__cta{ margin-top:10px; align-self:flex-start; font-size:14px; padding:11px 20px; }
.foot__bottom{ margin-top:7vh; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--ink-mute); }
@media(max-width:780px){ .foot__top{ grid-template-columns:1fr 1fr; gap:34px 28px; } }
@media(max-width:480px){ .foot__top{ grid-template-columns:1fr; } }

/* ===================== LEGAL PAGES ===================== */
.legal-nav{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:26px 24px;
  display:flex; align-items:center; justify-content:space-between; }
.legal-back{ font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .25s; }
.legal-back:hover{ color:var(--blue); }
.legal{ position:relative; z-index:2; max-width:780px; margin:0 auto; padding:5vh 24px 12vh; }
.legal h1{ font-size:clamp(34px,5vw,56px); font-weight:600; letter-spacing:-.03em; margin:10px 0 0; }
.legal__intro{ margin-top:18px; color:var(--ink-soft); font-size:17px; line-height:1.6; max-width:60ch; }
.legal__content{ margin-top:44px; }
.legal__content h2{ font-size:21px; font-weight:600; letter-spacing:-.01em; margin:36px 0 12px; }
.legal__content h2:first-child{ margin-top:0; }
.legal__content p{ color:var(--ink-soft); line-height:1.7; margin-bottom:14px; font-size:16px; }
.legal__content a{ color:var(--blue); }
.legal__note{ margin-top:8px; margin-bottom:36px; padding:14px 18px; border-radius:var(--r-sm);
  background:rgba(46,91,255,.06); border:1px solid rgba(46,91,255,.16); font-size:14px; color:var(--ink-soft); }
.legal-foot{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:28px 24px;
  border-top:1px solid var(--line); display:flex; gap:8px 22px; flex-wrap:wrap; font-size:13px; color:var(--ink-mute); }
.legal-foot a{ color:var(--ink-mute); transition:color .25s; }
.legal-foot a:hover{ color:var(--blue); }

/* reveal helper */
[data-reveal]{ opacity:0; transform:translateY(28px); }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; }
}