:root{
  --sf-ink:#171513;
  --sf-muted:#5e584f;
  --sf-line:#2a241d;
  --sf-bg:#e8e1d4;
  --sf-paper:#f5f0e7;
  --sf-paper-2:#efe7da;
  --sf-kraft:#d8c3a3;
  --sf-accent:#8f3f3f;
  --sf-accent-2:#6f5334;
  --sf-shadow:0 12px 30px rgba(20,16,12,.12);
}

html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  color:var(--sf-ink)!important;
  background:
    linear-gradient(rgba(246,241,232,.94), rgba(246,241,232,.94)),
    url('/assets/story-v3/paper.jpg') center/900px repeat !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
a{color:inherit}
#snowCanvas{display:none !important}

/* ===== Header ===== */
header.site-header{
  position:sticky; top:0; z-index:60;
  background:#f4eee3;
  backdrop-filter:none;
  border-bottom:1px solid rgba(23,21,19,.12);
}
.site-header .site-header-inner{
  max-width:1240px; margin:0 auto; padding:10px 14px;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand .brand-badge{
  width:32px;height:32px;border-radius:8px; flex:none;
  background:url('/assets/story-v3/kraft.jpg') center/cover;
  border:2px solid var(--sf-line);
  position:relative;
}
.brand .brand-badge::after{
  content:''; position:absolute; inset:6px; border:2px solid var(--sf-line); border-radius:4px;
}
.brand .brand-title{font-weight:800; letter-spacing:.03em; font-size:15px; line-height:1}
.brand .brand-sub{font-size:11px; color:var(--sf-muted); margin-top:2px; white-space:nowrap}

.top-nav{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap}
.top-nav a{
  font-size:12px; color:#2f2b26; text-decoration:none; cursor:pointer;
  border:1px solid rgba(23,21,19,.14); background:#f5f0e6;
  padding:8px 10px; border-radius:10px 14px 12px 8px;
  transition:transform .15s ease, background .15s ease;
}
.top-nav a:nth-child(2){border-radius:15px 9px 13px 10px}
.top-nav a:nth-child(3){border-radius:8px 16px 9px 14px}
.top-nav a:hover{transform:translateY(-1px); background:#f1eadf}

.header-actions{display:flex; align-items:center; gap:8px}
.sf-btn{
  border:2px solid var(--sf-line); background:#f7f2ea; color:var(--sf-ink);
  padding:10px 14px; font-weight:700; font-size:13px; cursor:pointer;
  border-radius:12px 18px 10px 16px; box-shadow:0 2px 0 rgba(0,0,0,.2);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sf-btn:hover{transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.18)}
.sf-btn:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.18)}
.sf-btn--dark{background:#2f2e2c; color:#fff; border-color:#1a1918; border-radius:18px 10px 16px 12px}
.sf-btn--quiet{background:#ebe2d2; border-style:dashed}
.header-mobile-btn{
  display:none; width:42px; height:42px; border:2px solid var(--sf-line);
  background:#f5ede0; border-radius:12px; align-items:center; justify-content:center; cursor:pointer;
}
.header-mobile-btn span{display:block; width:18px; height:2px; background:#211f1d; box-shadow:0 6px 0 #211f1d, 0 -6px 0 #211f1d}

/* Mobile menu */
#mobileMenu.sf-mobile-menu{
  position:fixed; inset:0; z-index:120; background:rgba(18,16,14,.42);
  backdrop-filter:none;
  display:none; padding:10px;
}
#mobileMenu.open{display:block}
.sf-mobile-panel{
  margin-left:auto; width:min(92vw,360px); height:100%; background:#f4eee3;
  backdrop-filter:none;
  border:2px solid var(--sf-line); border-radius:18px 12px 20px 14px;
  box-shadow:-14px 0 40px rgba(0,0,0,.18);
  display:flex; flex-direction:column; overflow:hidden;
}
.sf-mobile-head{display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid rgba(23,21,19,.15)}
.sf-mobile-title{font-weight:800; font-size:14px}
.sf-mobile-close{border:2px solid var(--sf-line); background:#f7f2ea; width:38px; height:38px; border-radius:10px; font-size:22px; line-height:1; cursor:pointer}
.sf-mobile-links{padding:10px; display:grid; gap:8px}
.sf-mobile-links a{padding:12px; border:1px solid rgba(23,21,19,.14); background:#fffaf2; border-radius:12px; text-decoration:none; font-weight:600}
.sf-mobile-actions{margin-top:auto; padding:12px; border-top:1px solid rgba(23,21,19,.15); display:grid; gap:8px}

/* ===== Story layout ===== */
.story-home{max-width:1240px; margin:0 auto; padding:14px 12px 28px; display:grid; gap:16px}
.story-shell{
  border:2px solid rgba(23,21,19,.85);
  background:var(--sf-paper);
  border-radius:18px 28px 16px 24px;
  box-shadow:var(--sf-shadow);
  position:relative;
  overflow:hidden;
}
.story-shell::before{
  content:''; position:absolute; inset:0; background:url('/assets/story-v3/paper.jpg') center/820px repeat; opacity:.38; pointer-events:none;
}
.story-shell > *{position:relative}
.story-shell.alt{background:linear-gradient(rgba(245,239,229,.95),rgba(245,239,229,.95)), url('/assets/story-v3/linen.jpg') center/700px repeat;}
.story-shell.kraft{background:linear-gradient(rgba(232,220,198,.92),rgba(232,220,198,.92)), url('/assets/story-v3/kraft.jpg') center/700px repeat;}

.section-pad{padding:18px}
.section-label-chip{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid rgba(23,21,19,.2); background:#f7f2e9;
  border-radius:999px; padding:5px 10px;
}
.section-label-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--sf-accent)}
.story-title{font-size:clamp(24px,4vw,44px); line-height:.96; margin:10px 0 0; letter-spacing:-.02em}
.story-note{color:var(--sf-muted); font-size:14px; line-height:1.45; margin:10px 0 0}

/* Hero */
.story-hero{min-height:clamp(560px,90vh,780px); display:grid; grid-template-columns:1.05fr .95fr; gap:12px; align-items:stretch}
.story-hero-copy{padding:18px; display:grid; align-content:start; gap:10px}
.hero-kicker{display:flex; gap:8px; align-items:center; font-size:12px; color:#3b352f}
.hero-kicker img{width:26px; height:26px}
.hero-title{font-size:clamp(34px,5vw,62px); line-height:.92; letter-spacing:-.03em; margin:4px 0}
.hero-title .line{display:block}
.hero-title .line:nth-child(2){padding-left:.5ch}
.hero-facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px}
.hero-facts .fact{
  background:#f9f5ed; border:1px solid rgba(23,21,19,.16); padding:9px; min-height:70px;
  border-radius:12px 16px 10px 18px;
}
.hero-facts .fact:nth-child(2){border-radius:16px 10px 18px 10px}
.hero-facts .fact:nth-child(3){border-radius:10px 18px 12px 16px}
.fact .num{font-weight:800; font-size:20px}
.fact .txt{font-size:11px; color:var(--sf-muted); line-height:1.2; margin-top:2px}
.hero-buttons{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.hero-caption{font-size:12px; color:var(--sf-muted)}

.story-hero-stage{position:relative; padding:14px; display:grid; align-content:stretch}
.stage-frame{
  height:100%; min-height:500px; border:2px solid var(--sf-line); background:#ece3d3; 
  border-radius:22px 14px 24px 16px; overflow:hidden; position:relative;
}
.stage-frame::before{
  content:''; position:absolute; inset:0; background:url('/assets/story-v3/event-desk.jpg') center/cover no-repeat; opacity:.82;
}
.stage-grid{position:absolute; inset:0; background:
  linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),
  repeating-linear-gradient(0deg, transparent 0 31px, rgba(15,12,10,.08) 31px 32px),
  repeating-linear-gradient(90deg, transparent 0 31px, rgba(15,12,10,.08) 31px 32px);
  mix-blend-mode:multiply; opacity:.35;
}
.hero-layer{position:absolute; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; will-change:transform;}
.hero-card{
  background:#fbf8f2; border:2px solid var(--sf-line); box-shadow:0 16px 35px rgba(0,0,0,.14);
}
.hero-card.board{left:6%; top:8%; width:62%; border-radius:14px 20px 16px 18px; transform:rotate(-3deg) translate(calc(var(--mx,0px)), calc(var(--my,0px) + var(--heroShift,0px)*-1));}
.hero-card.phone{right:6%; top:26%; width:34%; border-radius:22px 14px 20px 14px; transform:rotate(4deg) translate(calc(var(--mx,0px)), calc(var(--my,0px) + var(--heroShift,0px)*1));}
.hero-card.ticket{left:18%; bottom:8%; width:34%; border-radius:12px; transform:rotate(3deg) translate(calc(var(--mx,0px)), calc(var(--my,0px) + var(--heroShift,0px)*.6));}
.hero-card.cardwide{right:14%; bottom:8%; width:44%; border-radius:14px 20px 12px 18px; transform:rotate(-2deg) translate(calc(var(--mx,0px)), calc(var(--my,0px) + var(--heroShift,0px)*-.6));}
.hero-card img{display:block; width:100%; height:auto}
.hero-pin{right:18px; top:-18px; width:54px; height:auto}
.hero-tape{left:12%; top:0; width:90px; opacity:.92; transform:rotate(-9deg)}
.hero-stamp{left:58%; top:58%; width:78px; opacity:.95; transform:rotate(-12deg)}

/* Reveal helpers */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
[data-reveal].in{opacity:1; transform:none}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="right"]{transform:translateX(24px)}
[data-reveal="zoom"]{transform:scale(.97)}
[data-reveal].in[data-reveal="zoom"]{transform:scale(1)}

/* Scrollytelling rail */
.story-rail{display:grid; grid-template-columns:.95fr 1.05fr; gap:12px; align-items:start}
.rail-copy{padding:18px; position:relative}
.rail-progress{position:absolute; left:22px; top:92px; bottom:20px; width:2px; background:rgba(23,21,19,.15)}
.rail-progress-bar{position:absolute; left:0; top:0; width:2px; height:var(--railProgress,0%); background:#8f3f3f; transition:height .2s linear}
.step-list{display:grid; gap:10px; margin-top:14px}
.scroll-step{
  border:1px solid rgba(23,21,19,.16); background:#f8f3ea; padding:12px; border-radius:14px 10px 16px 12px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.scroll-step:nth-child(2){border-radius:11px 16px 12px 18px}
.scroll-step:nth-child(3){border-radius:16px 12px 18px 10px}
.scroll-step:nth-child(4){border-radius:12px 18px 10px 15px}
.scroll-step.active{background:#f1e7d7; border-color:#6f5334; transform:translateX(4px)}
.scroll-step .step-top{display:flex; align-items:baseline; gap:8px}
.scroll-step .n{font-size:22px; font-weight:800; letter-spacing:-.02em}
.scroll-step .t{font-weight:700}
.scroll-step .d{margin-top:5px; color:var(--sf-muted); font-size:13px; line-height:1.35}

.rail-stage{padding:12px; position:sticky; top:74px}
.rail-stage-frame{
  height:min(76vh,620px); border:2px solid var(--sf-line); border-radius:18px 26px 20px 14px;
  background:linear-gradient(rgba(246,241,232,.96),rgba(246,241,232,.96)), url('/assets/story-v3/paper.jpg') center/720px repeat;
  position:relative; overflow:hidden;
}
.rail-slide{position:absolute; inset:10px; opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .35s ease}
.rail-slide.active{opacity:1; transform:none}
.rail-slide img{width:100%; height:100%; object-fit:cover; border:1px solid rgba(23,21,19,.15); border-radius:12px}
.rail-slide .slide-note{
  position:absolute; left:14px; right:14px; bottom:14px; background:#fffaf1; border:2px solid var(--sf-line);
  border-radius:12px 18px 10px 14px; padding:10px 12px; box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.slide-note .head{font-weight:800; font-size:14px}
.slide-note .sub{font-size:12px; color:var(--sf-muted); margin-top:3px}

/* Mosaic / what inside */
.mosaic-grid{padding:14px; display:grid; grid-template-columns:1.2fr .8fr; gap:12px}
.mosaic-left{display:grid; gap:12px}
.mosaic-right{display:grid; gap:12px}
.mosaic-card{
  border:2px solid var(--sf-line); background:#faf6ee; border-radius:16px 22px 14px 18px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.mosaic-card.alt{border-radius:22px 12px 20px 12px}
.mosaic-card.compact{padding:12px}
.mosaic-card .top{padding:12px 12px 0}
.mosaic-card .h{font-size:20px; font-weight:800; letter-spacing:-.02em}
.mosaic-card .p{font-size:13px; color:var(--sf-muted); line-height:1.35; margin-top:6px}
.mosaic-card .imgwrap{padding:10px}
.mosaic-card .imgwrap img{display:block; width:100%; border:1px solid rgba(23,21,19,.14); border-radius:10px}
.mosaic-list{display:grid; gap:8px; margin-top:8px}
.mosaic-list .li{display:flex; gap:8px; align-items:flex-start; font-size:13px}
.mosaic-list .li b{min-width:72px}

/* Designs section */
.designs-grid{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.design-board{border:2px solid var(--sf-line); border-radius:14px 20px 16px 12px; background:#fbf8f1; padding:10px}
.design-board img{width:100%; display:block; border:1px solid rgba(23,21,19,.15); border-radius:10px}
.design-board .meta{display:flex; justify-content:space-between; gap:8px; margin-top:10px; align-items:center}
.design-board .meta .title{font-weight:700; font-size:14px}
.design-board .meta .tag{font-size:11px; border:1px dashed rgba(23,21,19,.35); padding:4px 6px; border-radius:999px}
.design-side{display:grid; gap:12px}
.data-card{border:2px solid var(--sf-line); background:#f3ecde; border-radius:18px 12px 20px 14px; padding:12px}
.data-card .title{font-weight:800; font-size:15px}
.data-card .rows{margin-top:8px; display:grid; gap:8px}
.data-card .row{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; font-size:13px}
.data-card .bar{height:8px; border:1px solid rgba(23,21,19,.2); background:#fffaf1; border-radius:999px; overflow:hidden; grid-column:1/-1}
.data-card .bar > i{display:block; height:100%; background:#6f5334}
.designs-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}

/* Examples */
#examplesSection .section-pad{padding:14px}
.examples-layout{display:grid; grid-template-columns:1.05fr .95fr; gap:12px; align-items:start}
.examples-intro{padding:6px 4px 4px}
.examples-intro .stack{display:grid; gap:8px; margin-top:12px}
.examples-intro .stack .mini{
  border:1px solid rgba(23,21,19,.14); background:#f8f3ea; border-radius:12px; padding:10px; font-size:13px;
}
.examples-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.example-card{
  background:#f8f2e8; border:2px solid var(--sf-line); border-radius:12px 16px 10px 18px;
  overflow:hidden; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.08); transition:transform .18s ease;
}
.example-card:nth-child(2n){border-radius:16px 10px 18px 10px}
.example-card:hover{transform:translateY(-2px)}
.example-thumb{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#ddd}
.example-meta{padding:8px 10px}
.example-title{font-weight:800; font-size:13px}
.example-sub{font-size:11px; color:var(--sf-muted); margin-top:2px}

/* Lightbox (for examples) */
.lightbox{position:fixed; inset:0; z-index:130; background:rgba(15,13,11,.82); display:none; align-items:center; justify-content:center; padding:20px}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-inner{max-width:min(92vw,900px); width:100%; background:#f7f2e9; border:2px solid var(--sf-line); border-radius:16px; padding:10px; position:relative}
.lightbox-close{position:absolute; top:10px; right:10px; width:38px; height:38px; border:2px solid var(--sf-line); background:#f7f2ea; border-radius:10px; cursor:pointer; font-size:22px}
.lightbox-img{width:100%; max-height:78vh; object-fit:contain; background:#e7dfcf; border-radius:10px; border:1px solid rgba(23,21,19,.15)}
.lightbox-caption{font-size:12px; color:var(--sf-muted); margin-top:8px; padding-right:44px}

/* ===== Restyle existing form/faq/contacts/footer blocks ===== */
#formSection,#faqSection,#contactsSection{
  margin:0; padding:0;
}
#formSection.section,#faqSection.section,#contactsSection.section{
  max-width:none; background:transparent; border:none; box-shadow:none;
}
#formSection .section-inner,#faqSection .section-inner,#contactsSection .section-inner{
  border:2px solid var(--sf-line); background:linear-gradient(rgba(245,239,228,.96),rgba(245,239,228,.96)), url('/assets/story-v3/paper.jpg') center/720px repeat;
  border-radius:18px 24px 14px 20px; box-shadow:var(--sf-shadow); padding:16px !important; max-width:none;
}
#formSection .section-label,#faqSection .section-label,#contactsSection .section-label{
  display:inline-flex; border:1px solid rgba(23,21,19,.2); border-radius:999px; padding:6px 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:#f9f4ea;
}
#formSection .section-title,#faqSection .section-title,#contactsSection .section-title{
  font-size:clamp(22px,3vw,34px) !important; line-height:.95; letter-spacing:-.02em;
}
#formSection .section-sub,#faqSection .section-sub,#contactsSection .section-sub{color:var(--sf-muted); max-width:800px}
#formSection .cta-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:12px}
#formSection .form-card,#formSection .tariff-card{
  background:#fbf8f1; border:2px solid var(--sf-line); box-shadow:none; border-radius:14px 20px 12px 16px !important;
}
#formSection .tariff-card{border-radius:18px 12px 20px 10px !important}
#formSection input,#formSection textarea,#formSection select{
  background:#fffaf1; border:1px solid rgba(23,21,19,.25) !important; border-radius:10px !important;
}
#formSection .submit-btn{
  background:#2f2e2c !important; color:#fff !important; border:2px solid #171513 !important;
  border-radius:12px 18px 10px 16px !important; box-shadow:none !important;
}
#formSection .extra-help{color:var(--sf-muted)}
#faqSection .faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#faqSection .faq-card{
  background:#fbf8f1; border:2px solid var(--sf-line) !important; border-radius:14px 20px 12px 16px !important; box-shadow:none !important;
}
#contactsSection .feature-card{background:#fbf8f1; border:2px solid var(--sf-line) !important; border-radius:14px 20px 12px 16px !important; box-shadow:none !important}
#contactsSection .header-btn{border:2px solid var(--sf-line)!important; background:#f2e8d7!important; color:var(--sf-ink)!important; border-radius:12px 18px 10px 16px!important}

footer{background:transparent !important; border-top:none !important; margin-top:0 !important}
footer .footer-inner{
  max-width:1240px; margin:0 auto 8px; border:2px solid var(--sf-line); background:#f3ecdd;
  border-radius:16px 22px 14px 20px; padding:14px; box-shadow:var(--sf-shadow)
}
footer .footer-buttons{display:flex; gap:8px; flex-wrap:wrap}
footer .footer-btn{border:1px solid rgba(23,21,19,.2); background:#fffaf1; border-radius:10px; padding:9px 10px; cursor:pointer}
footer .footer-text{color:var(--sf-muted); font-size:12px; line-height:1.4; margin-top:8px}

/* Original modals tweaks (keep functionality, calmer visual) */
.popup,.modal,.account-modal,.privacy-modal,.design-modal,.effects-modal,[id$="Modal"] .modal-card{backdrop-filter:none}

/* Responsive */
@media (max-width: 980px){
  .site-header .site-header-inner{grid-template-columns:auto 1fr auto}
  .top-nav{display:none}
  .header-mobile-btn{display:flex}
  .story-hero{grid-template-columns:1fr; min-height:auto}
  .story-hero-stage{order:-1}
  .stage-frame{min-height:380px}
  .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story-rail{grid-template-columns:1fr}
  .rail-stage{position:relative; top:auto}
  .rail-stage-frame{height:360px}
  .mosaic-grid,.designs-grid,.examples-layout,#formSection .cta-grid,#faqSection .faq-grid{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .story-home{padding:10px 8px 20px; gap:12px}
  .site-header .site-header-inner{padding:8px 10px; gap:8px}
  .brand .brand-sub{display:none}
  .header-actions .sf-btn--dark{display:none}
  .header-actions .sf-btn{padding:9px 10px; font-size:12px}
  .hero-title{font-size:34px}
  .hero-title .line:nth-child(2){padding-left:0}
  .hero-facts{grid-template-columns:1fr 1fr}
  .hero-facts .fact:last-child{grid-column:1/-1}
  .hero-buttons{display:grid; grid-template-columns:1fr; gap:8px}
  .sf-btn{width:100%; justify-content:center}
  .hero-card.board{width:72%; left:4%; top:5%}
  .hero-card.phone{width:38%; right:4%; top:22%}
  .hero-card.ticket{width:42%; left:8%; bottom:9%}
  .hero-card.cardwide{width:50%; right:8%; bottom:8%}
  .scroll-step{padding:10px}
  .examples-grid{grid-template-columns:1fr 1fr; gap:8px}
  #formSection .section-inner,#faqSection .section-inner,#contactsSection .section-inner{padding:12px !important}
}
@media (max-width: 460px){
  .examples-grid{grid-template-columns:1fr}
  .fact .num{font-size:18px}
  .section-pad{padding:12px}
  .story-shell{border-radius:14px 18px 12px 16px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  [data-reveal]{opacity:1!important; transform:none!important; transition:none!important}
  .hero-layer,.example-card,.sf-btn,.top-nav a{transition:none!important}
}


/* hard overrides against legacy glass/blur styles */
.mobile-menu-panel,.mobile-menu,.mobile-menu-head,header.site-header{
  backdrop-filter:none !important;
}
.mobile-menu-panel{background:#f4eee3 !important;}