@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Caveat:wght@600;700&display=swap');

/* ============================================================
   flimmr — Design Tokens
   ============================================================ */
:root{
  /* colors */
  --color-paper:#F6F1E7;--color-paper-2:#EFE7D6;--color-card:#FFFDF8;
  --color-ink:#17130E;--color-ink-2:#5E564A;--color-ink-3:#9A9081;
  --color-line:rgba(23,19,14,.1);
  --color-orange:#C8763A;--color-orange-deep:#A85423;--color-orange-soft:rgba(200,118,58,.1);
  --color-night:#14100B;--color-night-ink:#F3EDE2;--color-night-ink-2:#B9AF9F;--color-night-line:rgba(255,255,255,.12);
  /* type */
  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-hand:'Caveat',cursive;
  --text-hero:clamp(2.9rem,8vw,6rem);
  --text-h1:clamp(2.4rem,6vw,4.2rem);
  --text-h2:clamp(1.9rem,4.6vw,3.4rem);
  --text-h3:21px;
  --text-body-lg:clamp(1.02rem,1.6vw,1.16rem);
  --text-body:15.5px;
  --tracking-tight:-.035em;
  --tracking-kicker:.24em;
  --line-tight:1.06;
  /* space + shape */
  --radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:26px;--radius-pill:999px;
  --shadow-sm:0 12px 26px -14px rgba(23,19,14,.4);
  --shadow-md:0 20px 40px -24px rgba(23,19,14,.25);
  --shadow-lg:0 44px 90px -34px rgba(23,19,14,.5);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--color-ink)}
a:hover{color:var(--color-orange-deep)}
::selection{background:var(--color-orange);color:#fff}
[id]{scroll-margin-top:96px}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;display:block}

/* Shared type helpers */
.kicker{font:700 11px/1 var(--font-mono);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--color-ink-3)}
.text-orange{color:var(--color-orange)}
.section{padding:clamp(96px,12vw,150px) 24px}
.section--alt{background:var(--color-paper-2)}
.container{max-width:1080px;margin:0 auto}
.container--md{max-width:880px;margin:0 auto}
.container--sm{max-width:740px;margin:0 auto}
.narrow{max-width:680px;margin:0 auto}
.section-head{max-width:680px;margin:0 auto clamp(44px,6vw,64px);text-align:center}
.section-title{font-size:var(--text-h2);line-height:var(--line-tight);letter-spacing:var(--tracking-tight);font-weight:700;margin-top:16px}
.section-lead{color:var(--color-ink-2);font-size:var(--text-body-lg);margin-top:16px}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--font-sans);padding:16px 28px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn--primary{background:var(--color-orange);color:#fff}
.btn--primary:hover{background:var(--color-orange-deep);color:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:var(--color-line);color:var(--color-ink);background:transparent}
.btn--ghost:hover{border-color:var(--color-ink);color:var(--color-ink);transform:translateY(-2px)}
.btn--block{width:100%}
.btn--pulse{animation:btnPulse 2.2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,118,58,.55);transform:scale(1)}
  50%{box-shadow:0 0 0 16px rgba(200,118,58,0);transform:scale(1.04)}
}

/* ============================================================
   Navigation (floating pill)
   ============================================================ */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:min(1040px,calc(100% - 48px));z-index:900;
  border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--color-line);
  box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .35s;
}
.nav--scrolled{box-shadow:var(--shadow-md)}
.nav__inner{
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:rgba(246,241,231,.82);backdrop-filter:blur(14px) saturate(1.5);
}
.nav__logo{font:700 21px var(--font-mono);letter-spacing:-.04em;color:var(--color-ink);text-decoration:none}
.nav__logo b{color:var(--color-ink)}
.nav__links{display:flex;gap:26px}
.nav__link{font:500 14.5px var(--font-sans);color:var(--color-ink-2);text-decoration:none}
.nav__link:hover{color:var(--color-orange-deep)}
.nav__cta{background:var(--color-orange);color:#fff;font:600 14px var(--font-sans);padding:11px 19px;border-radius:var(--radius-pill);text-decoration:none;transition:background .18s ease}
.nav__cta:hover{background:var(--color-orange-deep);color:#fff}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:190px 24px 60px;text-align:center;position:relative;overflow:hidden}
.hero__content{max-width:860px;margin:0 auto;position:relative;z-index:2}
.hero__title{font-size:var(--text-hero);line-height:1;letter-spacing:-.045em;font-weight:700;margin-top:20px}
.hero__lead{color:var(--color-ink-2);font-size:var(--text-body-lg);max-width:600px;margin:28px auto 0}
.hero__cta{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__meta{margin-top:34px;font:400 12.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-3)}

.scroll-ind{margin:76px auto 0;width:26px;height:42px;border:2px solid var(--color-ink-3);border-radius:var(--radius-pill);position:relative;opacity:.55}
.scroll-ind__dot{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:var(--radius-pill);background:var(--color-ink-2);animation:scrollDot 1.6s ease-in infinite}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}

/* Hero polaroids */
.hero__polaroid{position:absolute;background:#fff;padding:7px 7px 5px;border-radius:6px;box-shadow:var(--shadow-sm);z-index:1;will-change:transform}
.hero__polaroid .polaroid__photo{aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden}
.hero__polaroid .polaroid__cap{display:block;padding:6px 0 2px;line-height:1;font-weight:600;font-family:var(--font-hand)}
.hero__polaroid--crew{left:min(4%,calc(50% - 640px));top:24%;width:180px;transform:rotate(-6deg)}
.hero__polaroid--seeblick{right:min(5%,calc(50% - 620px));top:18%;width:160px;transform:rotate(5deg)}
.hero__polaroid--alicante{left:min(11%,calc(50% - 590px));bottom:4%;width:150px;transform:rotate(3.5deg)}
.hero__polaroid--juli{right:min(10%,calc(50% - 600px));bottom:-2%;width:170px;transform:rotate(-4deg)}
.hero__polaroid--crew .polaroid__cap,.hero__polaroid--juli .polaroid__cap{font-size:22px}
.hero__polaroid--seeblick .polaroid__cap,.hero__polaroid--alicante .polaroid__cap{font-size:21px}
.photo-crew{background:linear-gradient(150deg,#3E3752,#221E30 60%,#141019)}
.photo-crew::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,183,94,.5),transparent 45%)}
.photo-seeblick{background:linear-gradient(140deg,#E8B27D,#C8763A 55%,#7A4A2B)}
.photo-alicante{background:linear-gradient(160deg,#2E5E8A,#1B3A57 55%,#122636)}
.photo-alicante::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(255,200,120,.5),transparent 45%)}
.photo-juli{background:linear-gradient(120deg,#B85C38,#6E3A20)}

/* ============================================================
   Statement (dark)
   ============================================================ */
.statement{background:var(--color-night);color:var(--color-night-ink);padding:clamp(120px,16vw,190px) 24px;text-align:center}
.statement__head{max-width:880px;margin:0 auto;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.statement__line{display:block;font-size:clamp(1.5rem,4.2vw,2.8rem);color:rgba(185,175,159,.35)}
.statement__line--final{font-size:clamp(1.85rem,5vw,3.35rem);margin-top:10px;color:rgba(200,118,58,.3)}
.statement__lead{max-width:540px;margin:30px auto 0;color:var(--color-night-ink-2);font-size:16.5px}

/* ============================================================
   App showcase (pinned)
   ============================================================ */
.showcase{position:relative;height:340vh;background:var(--color-paper)}
.showcase__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.showcase__grid{width:100%;max-width:1080px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}

.stage{position:relative;min-height:360px;width:100%}
.stage__item{position:absolute;left:32px;right:0;top:50%;transform:translateY(-50%);opacity:0;will-change:opacity,transform;transition:opacity .7s cubic-bezier(.33,0,.13,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.stage__item[data-stage-txt="0"]{opacity:1}
.stage__kicker{font:700 11px/1 var(--font-mono);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--color-orange)}
.stage__title{font-size:var(--text-h2);line-height:var(--line-tight);letter-spacing:var(--tracking-tight);font-weight:700;margin-top:14px}
.stage__text{color:var(--color-ink-2);font-size:var(--text-body-lg);margin-top:16px;max-width:420px;line-height:1.55}
.stage__rail{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:2}
.rail__track{width:4px;height:52px;border-radius:var(--radius-pill);background:rgba(23,19,14,.12);position:relative;overflow:hidden}
.rail__fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--color-orange);border-radius:var(--radius-pill);display:block}

/* Phone frame */
.phone{justify-self:center;will-change:transform,opacity}
.phone__body{width:375px;height:784px;background:#0E0B08;border-radius:58px;padding:12px;box-shadow:var(--shadow-lg);position:relative}
.phone__viewport{width:100%;height:100%;background:var(--color-paper-2);border-radius:46px;overflow:hidden;position:relative}
.phone__notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:118px;height:30px;background:#0E0B08;border-radius:var(--radius-pill);z-index:60}
.phone__screen{position:absolute;inset:0;opacity:0;will-change:opacity,transform;overflow:hidden;transition:opacity .85s cubic-bezier(.33,0,.13,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.phone__screen[data-screen="0"]{opacity:1}
.phone__tabbar{position:absolute;left:0;right:0;bottom:0;z-index:50}

/* Status bar */
.statusbar{height:52px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;font:700 14px var(--font-sans);color:var(--color-ink)}
.statusbar--over{position:relative;z-index:5}

/* Tab bar */
.tabbar{position:relative;height:86px;background:rgba(246,241,231,.94);backdrop-filter:blur(12px);border-top:1px solid var(--color-line);display:flex;padding-bottom:12px}
.tabbar__btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 9px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-2);background:none;border:0;cursor:pointer}
.tabbar__btn--active{color:var(--color-orange)}
.tabbar__ic{width:23px;height:23px}
.tabbar__cam{flex:1;background:none;border:0;cursor:pointer;position:relative}
.tabbar__fab{position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:var(--color-orange);display:grid;place-items:center;color:#fff;box-shadow:0 12px 24px -8px rgba(168,84,35,.6),0 0 0 6px var(--color-paper)}
.tabbar__fab .tabbar__ic{width:27px;height:27px}

/* Screen: Alben */
.pscreen--alben{background:var(--color-paper);display:flex;flex-direction:column}
.albums-header{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid var(--color-line)}
.albums-title{font:700 30px var(--font-sans);letter-spacing:-.03em}
.btn-plus{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(200,118,58,.35);background:var(--color-card);display:grid;place-items:center;color:var(--color-orange);font:400 26px/1 var(--font-sans)}
.filters{display:flex;gap:8px;padding:14px 18px 4px}
.filter{background:#EDE4D2;color:#8A7B66;font:700 12px var(--font-sans);letter-spacing:.08em;padding:10px 17px;border-radius:var(--radius-pill)}
.filter--active{background:var(--color-orange);color:#2E1A0E}
.albums-body{flex:1;overflow:hidden;padding:12px 18px 0}
.albums-label{font:700 11px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:#9A6B3F;margin:6px 0 10px}
.albums-label--mt{margin-top:16px}
.event-card{background:var(--color-card);border-radius:14px;padding:10px 10px 6px;box-shadow:var(--shadow-sm)}
.event-card__photo{border-radius:8px;position:relative;overflow:hidden;aspect-ratio:1/1.02;background:linear-gradient(180deg,#8FA9C9 0%,#C9A27A 62%,#8A6A45 100%)}
.event-card__photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 20%,rgba(255,214,140,.55),transparent 40%),radial-gradient(circle at 30% 74%,rgba(90,60,30,.45),transparent 55%)}
.event-badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--color-orange);color:#2E1A0E;font:700 12px var(--font-sans);padding:7px 13px;border-radius:var(--radius-pill);display:flex;align-items:center;gap:6px}
.event-badge__dot{width:7px;height:7px;border-radius:50%;background:#2E1A0E}
.event-card__meta{position:absolute;left:14px;bottom:14px;z-index:1;color:#fff}
.event-card__title{font-size:23px;letter-spacing:-.02em;display:block;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.event-card__sub{font:500 11.5px var(--font-sans);color:rgba(255,255,255,.72);display:block;margin-top:2px}
.event-card__date{font:700 11.5px var(--font-mono);color:#FFB067;display:block;margin-top:2px}
.event-card__avatar{position:absolute;right:14px;bottom:14px;z-index:1;width:28px;height:28px;border-radius:50%;border:2px solid rgba(46,26,14,.55);background:linear-gradient(140deg,#B85C38,#6E3A20)}
.album-cap{font:600 italic 17px var(--font-sans);display:block;padding:8px 2px 4px}
.album-cap--sm{font-size:15px;padding:6px 2px 2px}
.group-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 2px}
.group-card{background:var(--color-card);border-radius:10px;padding:8px 8px 4px;box-shadow:var(--shadow-sm)}
.group-card--a{transform:rotate(-1.6deg)}
.group-card--b{transform:rotate(1.4deg)}
.group-card__photo{aspect-ratio:1;border-radius:6px;position:relative;overflow:hidden}
.group-card__photo--crew{background:linear-gradient(165deg,#A9C2DD 0%,#D9C9A8 55%,#8A6A45 100%)}
.group-card__photo--tennis{background:linear-gradient(120deg,#3E7BC4 0%,#2E5E9A 55%,#8FBE4F 100%)}
.count-badge{position:absolute;top:8px;right:8px;background:rgba(30,24,16,.72);color:#fff;font:700 11px var(--font-sans);padding:4px 9px;border-radius:var(--radius-pill);display:flex;align-items:center;gap:4px}

/* Screen: Cam */
.pscreen--cam{background:radial-gradient(circle at 68% 16%,rgba(255,244,222,.9),transparent 46%),radial-gradient(circle at 20% 80%,rgba(88,58,30,.55),transparent 55%),linear-gradient(160deg,#EDE7DB 0%,#CFC0A8 42%,#B08D5F 72%,#6E4E30 100%)}
.cam__top{position:absolute;top:52px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center}
.cam-icon{width:42px;height:42px;border-radius:15px;background:rgba(56,44,32,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px)}
.cam-icon--round{border-radius:50%}
.cam__title{background:rgba(56,44,32,.5);color:#fff;font:700 14px var(--font-sans);padding:9px 18px;border-radius:12px;backdrop-filter:blur(4px)}
.cam__bottom{position:absolute;left:0;right:0;bottom:0;padding:0 14px 22px;display:flex;flex-direction:column;gap:14px;align-items:center}
.zoom{display:flex;background:rgba(56,44,32,.42);border-radius:var(--radius-pill);padding:3px;backdrop-filter:blur(4px)}
.zoom__opt{color:#fff;font:700 13px var(--font-sans);padding:8px 16px;border-radius:var(--radius-pill)}
.zoom__opt--active{background:#fff;color:var(--color-ink)}
.cam-modes{display:flex;gap:30px;align-items:flex-start}
.cam-mode{font:700 16px var(--font-sans);letter-spacing:.1em;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.cam-mode--active{color:#E8935A;position:relative;padding-bottom:10px}
.cam-mode--active::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#E8935A}
.cam-chips{display:flex;gap:9px;align-items:center}
.chip{font:700 12px var(--font-sans);letter-spacing:.04em;padding:12px 15px;border-radius:var(--radius-pill)}
.chip--dark{background:rgba(56,44,32,.55);color:#fff}
.chip--crew{background:var(--color-orange);color:#2E1A0E;font-size:14px;padding:14px 26px}
.shutter-row{display:flex;align-items:center;justify-content:center;width:100%;position:relative;padding-top:4px}
.shutter-ring{width:70px;height:70px;border-radius:24px;border:2px solid rgba(255,255,255,.8);display:grid;place-items:center}
.shutter{width:58px;height:58px;border-radius:18px;background:#FFFDF8;display:grid;place-items:center;color:var(--color-ink);box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.flip-btn{position:absolute;right:8px;width:46px;height:46px;border-radius:15px;background:rgba(56,44,32,.5);color:#fff;display:grid;place-items:center}

/* Screen: Feed */
.pscreen--feed{background:var(--color-paper);display:flex;flex-direction:column}
.feed-body{flex:1;overflow:hidden;padding:6px 12px 0;display:flex;flex-direction:column;gap:14px}
.feed-card{border-radius:22px;position:relative;overflow:hidden;flex:none}
.feed-card--1{height:150px;margin-top:-64px;background:linear-gradient(170deg,#9FB8CC 0%,#5E7A8A 60%,#3E5260 100%)}
.feed-card--2{aspect-ratio:1/1.18;background:linear-gradient(150deg,#EDE6DA 0%,#C9B698 55%,#8A6F4D 100%)}
.feed-card--2::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 26% 30%,rgba(255,250,235,.7),transparent 45%)}
.feed-card--3{height:120px;background:linear-gradient(140deg,#D9C0A0 0%,#A87C4E 60%,#6E4E30 100%)}
.feed-time{position:absolute;top:12px;right:12px;background:rgba(30,24,16,.66);color:#fff;font:700 10.5px var(--font-mono);letter-spacing:.08em;padding:6px 11px;border-radius:var(--radius-pill)}
.feed-more{position:absolute;top:12px;left:12px;background:rgba(30,24,16,.5);color:#fff;font:700 13px/1 var(--font-sans);padding:6px 10px;border-radius:10px}
.feed-meta{position:absolute;left:0;right:0;bottom:0;padding:46px 16px 14px;background:linear-gradient(transparent,rgba(10,8,5,.72));color:#fff}
.feed-author{display:flex;align-items:center;gap:9px}
.feed-avatar{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.65)}
.feed-avatar--blue{background:linear-gradient(150deg,#4A6A8A,#2E4256)}
.feed-avatar--rust{background:linear-gradient(140deg,#B85C38,#6E3A20)}
.feed-name{font-size:16px}
.feed-tag{font:600 11px var(--font-sans);border:1px solid rgba(255,255,255,.55);padding:4px 10px;border-radius:var(--radius-pill);font-style:normal}
.feed-title{display:block;font-size:18px;margin-top:8px}

/* ============================================================
   Steps / Teasers / FAQ
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step{border-top:2px solid var(--color-ink);padding-top:24px}
.step__n{font:700 14px var(--font-mono);color:var(--color-orange)}
.step__t{font-size:var(--text-h3);letter-spacing:-.02em;margin:10px 0 8px}
.step__d{color:var(--color-ink-2);font-size:var(--text-body)}

.teasers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.teaser{display:flex;flex-direction:column;gap:8px;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:32px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.teaser:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.teaser__t{font-size:20px;letter-spacing:-.02em;color:var(--color-ink)}
.teaser__d{color:var(--color-ink-2);font-size:15px}
.teaser__cta{color:var(--color-orange);font:700 15px var(--font-sans);margin-top:6px}

.faq__item{border-bottom:1px solid var(--color-line)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;font:600 17px var(--font-sans);color:var(--color-ink);letter-spacing:-.01em}
.faq__icon{font:400 26px/1 var(--font-mono);color:var(--color-orange);flex:none;transition:transform .3s}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
.faq__a{overflow:hidden;max-height:0;padding:0 4px;color:var(--color-ink-2);font-size:15.5px;max-width:640px;transition:max-height .35s ease,padding .35s ease}
.faq__item.is-open .faq__a{max-height:360px;padding-bottom:22px}

/* ============================================================
   Forms (Beta + generic)
   ============================================================ */
.beta{position:relative;overflow:hidden}
.beta__deco{position:absolute;right:8%;top:12%;width:110px;opacity:.9;transform:rotate(8deg);will-change:transform}
.beta__card{max-width:600px;margin:0 auto;background:var(--color-orange-soft);border:1.5px solid rgba(200,118,58,.3);border-radius:var(--radius-xl);padding:clamp(26px,4vw,40px)}
.form{display:flex;flex-direction:column;gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input{width:100%;border:1.5px solid var(--color-line);background:var(--color-card);border-radius:var(--radius-md);padding:14px 16px;font:400 15px var(--font-sans);color:var(--color-ink);transition:border-color .15s}
.input:focus{border-color:var(--color-orange);outline:none}
.checkbox{display:flex;gap:10px;align-items:flex-start;font:400 13.5px var(--font-sans);color:var(--color-ink-2);cursor:pointer}
.checkbox input{margin-top:3px;accent-color:var(--color-orange);width:17px;height:17px;flex:none;cursor:pointer}
.form-note{font:400 12.5px var(--font-mono);color:var(--color-ink-3);line-height:1.7}
.done{text-align:center;padding:18px 0}
.done__check{width:56px;height:56px;border-radius:50%;background:var(--color-orange);color:#fff;display:grid;place-items:center;font-size:26px;margin:0 auto 18px}
.done__title{font-size:23px;letter-spacing:-.02em}
.done__text{color:var(--color-ink-2);font-size:15px;margin-top:10px}

/* ============================================================
   Booking (termin.html)
   ============================================================ */
.book{padding:150px 24px 90px;flex:1}
.book__title{font-size:var(--text-h1);line-height:var(--line-tight);letter-spacing:var(--tracking-tight);font-weight:700;margin-top:16px}
.stepbar{display:flex;justify-content:center;gap:28px;margin:0 0 26px;padding:0;list-style:none}
.stepbar__item{display:flex;align-items:center;gap:9px}
.stepbar__num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--font-sans);background:var(--color-card);color:var(--color-ink-3);border:1.5px solid var(--color-line);transition:background .3s,color .3s,border-color .3s}
.stepbar__item.is-active .stepbar__num,.stepbar__item.is-done .stepbar__num{background:var(--color-orange);color:#fff;border-color:var(--color-orange)}
.stepbar__label{font:600 13px var(--font-sans);color:var(--color-ink-3)}
.stepbar__item.is-active .stepbar__label{color:var(--color-ink)}
.booking-card{max-width:640px;margin:0 auto;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(26px,4vw,40px)}
.booking-card--cal{max-width:920px;padding:12px;overflow:hidden;min-height:680px}
.cal-embed-container{width:100%;min-height:660px;border:none;border-radius:var(--radius-lg);overflow:hidden}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal__nav{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--color-line);background:var(--color-card);cursor:pointer;font:400 18px var(--font-sans);color:var(--color-ink)}
.cal__nav:disabled{color:var(--color-ink-3);cursor:default}
.cal__month{font-size:18px;letter-spacing:-.01em}
.cal__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.cal__weekdays span{text-align:center;font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-3)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal__day{height:44px;border-radius:var(--radius-pill);border:0;font:600 15px var(--font-sans);background:var(--color-paper);color:var(--color-ink);cursor:pointer;transition:background .15s,transform .15s}
.cal__day:not(.cal__day--disabled):not(.cal__day--empty):hover{background:var(--color-orange-soft);transform:translateY(-1px)}
.cal__day--empty{background:transparent;cursor:default}
.cal__day--disabled{background:transparent;color:var(--color-ink-3);opacity:.42;cursor:default}
.cal__day--selected{background:var(--color-orange);color:#fff}
.cal__note{font:400 12.5px var(--font-mono);color:var(--color-ink-3);margin-top:18px;text-align:center}
.back-link{background:none;border:0;cursor:pointer;font:600 13.5px var(--font-sans);color:var(--color-ink-2);padding:0;margin-bottom:14px}
.back-link:hover{color:var(--color-orange-deep)}
.booking-step__title{font-size:21px;letter-spacing:-.02em;margin-bottom:18px}
.times{display:flex;flex-direction:column;gap:10px}
.time-btn{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:1.5px solid var(--color-line);border-radius:14px;background:var(--color-card);cursor:pointer;font:700 16px var(--font-sans);color:var(--color-ink);transition:border-color .15s,transform .15s}
.time-btn:hover{border-color:var(--color-orange);transform:translateY(-1px)}
.time-btn span{font:400 12px var(--font-mono);color:var(--color-ink-3)}
.chosen-chip{display:inline-block;background:var(--color-orange-soft);color:var(--color-orange-deep);font:700 13px var(--font-sans);padding:9px 15px;border-radius:var(--radius-pill);margin-bottom:20px}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--color-night);color:var(--color-night-ink-2);padding:64px 24px 40px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;max-width:1180px;margin:0 auto}
.footer__logo{font:700 21px var(--font-mono);color:var(--color-night-ink);text-decoration:none}
.footer__logo b{color:var(--color-orange)}
.footer__h{font:700 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#7A7264;margin-bottom:14px}
.footer__links{display:flex;flex-direction:column;gap:9px}
.footer__links a{font-size:14px;color:var(--color-night-ink-2);text-decoration:none}
.footer__links a:hover{color:var(--color-orange)}
.footer__mail{color:var(--color-orange);font:700 15px var(--font-mono);text-decoration:none}
.footer__bottom{border-top:1px solid var(--color-night-line);max-width:1180px;margin:46px auto 0;padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:400 13px var(--font-sans);color:#8F8B86}

/* ============================================================
   404
   ============================================================ */
.notfound{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px}
.notfound__title{font-size:var(--text-hero);line-height:1;letter-spacing:-.045em;font-weight:700;margin-top:18px}
.notfound__text{color:var(--color-ink-2);font-size:var(--text-body-lg);max-width:460px;margin:24px auto 0}
.notfound__cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   No-JS fallback
   ============================================================ */
.no-js .reveal{opacity:1;transform:none}
.no-js .stage__item,.no-js .phone__screen{opacity:1}
.no-js .statement__line{color:var(--color-night-ink-2)}
.no-js .statement__line--final{color:var(--color-orange)}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-ind__dot,.btn--pulse{animation:none}
}

/* ============================================================
   Responsive — phones/tablets
   ============================================================ */
@media (max-width:768px){
  .nav{top:8px;width:calc(100% - 20px)}
  .nav__links{display:none}
  .hero{padding:116px 20px 30px}
  .hero__title{font-size:clamp(2.3rem,10vw,3rem)}
  .hero__polaroid{display:none}
  .section-title,.statement__head{font-size:clamp(1.7rem,7.4vw,2.4rem)}
  .showcase{height:300vh}
  .showcase__grid{grid-template-columns:1fr;gap:20px;padding:0 20px;justify-items:center}
  .phone{order:-1}
  .stage{width:100%;height:auto;min-height:150px;text-align:center}
  .stage__item{left:0;right:0}
  .stage__text{max-width:none;margin-left:auto;margin-right:auto}
  .stage__title{font-size:clamp(1.6rem,7vw,2.1rem)}
  .stage__title br{display:none}
  .stage__rail{display:none}
  .steps{grid-template-columns:1fr;gap:22px}
  .teasers{grid-template-columns:1fr}
  .beta__deco{display:none}
  .book__title{font-size:clamp(2.1rem,9vw,2.8rem)}
  .stepbar{gap:14px;flex-wrap:wrap}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .form-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}