:root {
  --ink:#0b0b0a;
  --paper:#f3f0e8;
  --paper-2:#e7e2d7;
  --muted:#68655d;
  --line:rgba(11,11,10,.18);
  --acid:#d8ff36;
  --radius:18px;
  --page:min(1380px,calc(100vw - 48px));
  --ease:cubic-bezier(.2,.75,.2,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
::selection { background:var(--ink); color:var(--paper); }

.noise {
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.section-shell { width:var(--page); margin-inline:auto; }
.eyebrow { margin:0 0 20px; font-size:10px; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }

.site-header {
  position:fixed;
  z-index:50;
  top:14px;
  left:50%;
  width:min(1360px,calc(100vw - 28px));
  min-height:64px;
  padding:0 12px 0 18px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border:1px solid rgba(11,11,10,.1);
  border-radius:16px;
  background:rgba(243,240,232,.88);
  backdrop-filter:blur(18px);
  transition:box-shadow .25s ease,border-color .25s ease;
}
.site-header.is-scrolled { border-color:rgba(11,11,10,.18); box-shadow:0 16px 44px rgba(0,0,0,.08); }
.brand { display:inline-flex; align-items:center; gap:10px; width:max-content; font-weight:900; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--ink); color:var(--paper); font-size:14px; letter-spacing:-.06em; }
.brand-name { font-size:13px; letter-spacing:.14em; }
.desktop-nav { display:flex; gap:28px; align-items:center; font-size:12px; font-weight:750; }
.desktop-nav a { position:relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--ink); transition:right .22s ease; }
.desktop-nav a:hover::after { right:0; }
.site-header > .button { justify-self:end; }

.button {
  min-height:52px;
  padding:0 22px;
  border:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:13px;
  font-weight:850;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s ease;
}
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0); }
.button-small { min-height:40px; padding-inline:16px; font-size:12px; }
.button-dark { background:var(--ink); color:white; }
.button-primary { background:var(--acid); color:var(--ink); box-shadow:0 12px 30px rgba(140,167,18,.15); }
.button-light { background:var(--paper); color:var(--ink); }
.text-link { font-size:13px; font-weight:850; border-bottom:1px solid currentColor; padding-bottom:4px; }

.hero {
  min-height:900px;
  padding-top:140px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(36px,6vw,100px);
  align-items:center;
}
.hero-copy { padding-bottom:15px; }
.hero h1 {
  max-width:700px;
  margin:0;
  font-size:clamp(68px,7.3vw,122px);
  line-height:.86;
  letter-spacing:-.078em;
  font-weight:900;
}
.hero h1 em { color:transparent; -webkit-text-stroke:2px var(--ink); font-style:normal; }
.hero-lede { max-width:600px; margin:34px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:34px; }
.hero-proof { display:flex; flex-wrap:wrap; gap:0; margin-top:34px; border-top:1px solid var(--line); max-width:590px; }
.hero-proof span { flex:1; min-width:145px; padding:15px 16px 0 0; font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }

.attention-demo { border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden; background:#ded8cb; box-shadow:18px 18px 0 rgba(11,11,10,.08); }
.attention-topline { min-height:48px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); font-size:9px; font-weight:900; letter-spacing:.16em; }
.attention-canvas { position:relative; min-height:560px; overflow:hidden; background:var(--paper); }
.attention-canvas::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; opacity:.38; }
.quiet-note { position:absolute; top:34px; left:36px; color:#969188; font-size:11px; }
.attention-price { position:absolute; top:50%; left:50%; width:270px; height:270px; transform:translate(-50%,-54%) rotate(-3deg); background:var(--acid); border:2px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:14px 14px 0 var(--ink); transition:transform .8s var(--ease); }
.attention-price small { margin-bottom:-14px; font-size:16px; font-weight:900; letter-spacing:.15em; }
.attention-price strong { font-size:150px; line-height:.9; letter-spacing:-.11em; }
.attention-arrow { position:absolute; right:95px; bottom:105px; font-size:56px; transform:rotate(4deg); opacity:0; transition:opacity .45s ease .55s,transform .55s var(--ease) .55s; }
.attention-result { position:absolute; right:32px; bottom:28px; margin:0; text-align:right; font-size:13px; line-height:1.35; opacity:0; transform:translateY(8px); transition:opacity .45s ease .75s,transform .45s var(--ease) .75s; }
.attention-result span { font-size:20px; font-weight:900; letter-spacing:-.035em; }
.attention-demo.is-active .attention-price { transform:translate(-50%,-56%) rotate(1deg); }
.attention-demo.is-active .attention-arrow,.attention-demo.is-active .attention-result { opacity:1; transform:none; }
.attention-explain { padding:25px 28px 28px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; border-top:1px solid var(--ink); background:var(--ink); color:var(--paper); }
.attention-explain p { max-width:350px; margin:0; color:#bcb8af; font-size:12px; line-height:1.6; }
.attention-explain strong { font-size:clamp(27px,2.8vw,45px); line-height:.9; letter-spacing:-.055em; color:var(--acid); }

.hierarchy-strip { border-block:1px solid var(--ink); background:var(--acid); overflow:hidden; }
.hierarchy-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; white-space:nowrap; }
.hierarchy-inner span { font-size:9px; font-weight:900; letter-spacing:.16em; }
.hierarchy-inner strong { font-size:16px; letter-spacing:-.02em; }
.hierarchy-inner i { font-style:normal; font-size:22px; }

.work { padding-top:145px; }
.section-heading { display:grid; grid-template-columns:1fr minmax(280px,440px); gap:80px; align-items:end; margin-bottom:54px; }
.section-heading h2,.offer h2,.process h2,.faq h2,.final-cta h2 { margin:0; font-size:clamp(48px,5.4vw,84px); line-height:.94; letter-spacing:-.065em; }
.section-heading > p,.section-heading > div + p { margin:0; color:var(--muted); line-height:1.7; }
.work-showcase { display:grid; grid-template-columns:260px 1fr; gap:18px; }
.work-tabs { display:flex; flex-direction:column; border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden; }
.work-tab { min-height:92px; padding:0 20px; border:0; border-bottom:1px solid var(--ink); background:transparent; display:flex; align-items:center; gap:18px; text-align:left; font-weight:850; }
.work-tab:last-child { border-bottom:0; }
.work-tab span { font-size:9px; letter-spacing:.15em; }
.work-tab.is-active { background:var(--ink); color:var(--paper); }
.browser-frame { overflow:hidden; border:1px solid var(--ink); border-radius:var(--radius); background:white; }
.browser-topbar { height:46px; padding:0 15px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#d7d3ca; border-bottom:1px solid var(--ink); }
.browser-dots { display:flex; gap:6px; }
.browser-dots i { width:8px; height:8px; border:1px solid var(--ink); border-radius:50%; }
.browser-url { padding:6px 22px; border:1px solid rgba(11,11,10,.2); border-radius:5px; background:#ebe8e1; font-size:9px; font-weight:800; letter-spacing:.08em; }
.browser-menu { justify-self:end; font-weight:900; }
.showcase-browser { min-height:660px; }
.demo-panel { position:relative; min-height:613px; overflow:hidden; padding:30px; }
.demo-panel[hidden] { display:none; }
.demo-nav { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.12em; }
.demo-nav b { font-size:14px; }
.restaurant-layout,.fitness-layout,.service-layout { position:relative; z-index:2; min-height:525px; display:flex; flex-direction:column; justify-content:center; }
.restaurant-layout p,.fitness-layout p,.service-layout p { margin:0 0 17px; font-size:10px; font-weight:900; letter-spacing:.16em; }
.restaurant-layout h3,.fitness-layout h3,.service-layout h3 { margin:0; font-size:clamp(70px,7.5vw,120px); line-height:.82; letter-spacing:-.075em; }
.demo-panel button { width:max-content; margin-top:30px; padding:13px 18px; border:1px solid currentColor; background:transparent; color:inherit; font-size:9px; font-weight:900; letter-spacing:.12em; }
.demo-restaurant { background:#f1b34b; color:#19130d; }
.plate-art { position:absolute; right:-80px; top:50%; width:430px; aspect-ratio:1; transform:translateY(-43%); border:2px solid #19130d; border-radius:50%; background:#e6d8bd; box-shadow:inset 0 0 0 25px #f6eedf; }
.plate-art div { position:absolute; inset:24% 28%; border-radius:42% 58% 48% 52%; background:#9d3528; transform:rotate(18deg); }
.plate-art i { position:absolute; width:100px; height:170px; top:31%; left:25%; border-radius:60%; background:#213e27; transform:rotate(-35deg); }
.plate-art span { position:absolute; width:78px; height:78px; top:33%; right:22%; border-radius:50%; border:14px solid #e7c841; }
.demo-fitness { background:#17191a; color:#f1eee6; }
.demo-fitness::after { content:"49"; position:absolute; right:-24px; bottom:-90px; color:#252829; font-size:360px; font-weight:900; letter-spacing:-.12em; }
.fitness-bottom { display:flex; align-items:end; justify-content:space-between; }
.fitness-bottom span { max-width:220px; text-align:right; color:#9fa2a1; font-size:9px; line-height:1.6; letter-spacing:.13em; }
.demo-service { background:#eae5d9; color:#161514; }
.service-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(11,11,10,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(11,11,10,.13) 1px,transparent 1px); background-size:72px 72px; }
.service-layout h3 { max-width:850px; }

.offer { padding-top:145px; }
.offer-card { padding:clamp(34px,6vw,82px); display:grid; grid-template-columns:1.05fr .95fr; gap:80px; border-radius:var(--radius); background:var(--ink); color:var(--paper); }
.offer-main h2 strong { color:var(--acid); }
.offer-main > p:not(.eyebrow) { max-width:520px; margin:27px 0 34px; color:#aaa79f; line-height:1.7; }
.offer-list { border-top:1px solid #42423f; }
.offer-list div { min-height:66px; display:grid; grid-template-columns:48px 1fr; align-items:center; border-bottom:1px solid #42423f; }
.offer-list span { color:#9d9b94; font-size:9px; letter-spacing:.13em; }
.offer-list p { margin:0; font-weight:750; }
.offer-list small { display:block; margin-top:18px; color:#8f8d87; line-height:1.55; }

.process { padding-top:145px; }
.process-heading { margin-bottom:45px; }
.process-line { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--ink); }
.process-line article { min-height:250px; padding:28px; border-right:1px solid var(--ink); display:flex; flex-direction:column; }
.process-line article:last-child { border-right:0; }
.process-line span { font-size:9px; font-weight:900; letter-spacing:.15em; }
.process-line h3 { margin:auto 0 12px; font-size:38px; letter-spacing:-.05em; }
.process-line p { max-width:300px; margin:0; color:var(--muted); line-height:1.6; }

.faq { padding-top:145px; }
.section-heading.compact { grid-template-columns:1fr; }
.faq-list { border-top:1px solid var(--ink); }
.faq details { border-bottom:1px solid var(--ink); }
.faq summary { list-style:none; padding:25px 0; display:flex; justify-content:space-between; gap:30px; font-size:21px; font-weight:800; letter-spacing:-.025em; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary span { transition:transform .22s ease; }
.faq details[open] summary span { transform:rotate(45deg); }
.faq details p { max-width:760px; margin:-4px 0 27px; color:var(--muted); line-height:1.7; }

.final-cta { padding:170px 0 145px; text-align:center; }
.final-cta h2 { max-width:1050px; margin-inline:auto; }
.final-cta .button { margin-top:36px; }

.site-footer { padding:45px 0 30px; border-top:1px solid var(--ink); }
.footer-brand { overflow:hidden; white-space:nowrap; font-size:clamp(70px,15vw,220px); line-height:.76; font-weight:900; letter-spacing:-.09em; }
.footer-bottom { margin-top:52px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; font-size:9px; font-weight:900; letter-spacing:.13em; }

[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }

.order-dialog { width:min(1180px,calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:20px; background:var(--paper); color:var(--ink); overflow:auto; box-shadow:0 40px 120px rgba(0,0,0,.35); }
.order-dialog::backdrop { background:rgba(7,7,6,.72); backdrop-filter:blur(8px); }
.dialog-close { position:fixed; z-index:3; top:max(24px,calc((100vh - min(800px,100vh - 24px))/2 + 18px)); right:max(24px,calc((100vw - min(1180px,100vw - 24px))/2 + 18px)); width:40px; height:40px; border:0; border-radius:50%; background:var(--paper); font-size:26px; }
.order-layout { min-height:720px; display:grid; grid-template-columns:.38fr .62fr; }
.order-summary { padding:38px; display:flex; flex-direction:column; justify-content:space-between; background:var(--ink); color:var(--paper); }
.brand-inverse .brand-mark { background:var(--acid); color:var(--ink); }
.order-summary h2 { margin:0 0 35px; font-size:42px; line-height:.95; letter-spacing:-.055em; }
.order-summary ul { list-style:none; padding:0; margin:0; border-top:1px solid #3e3e3a; }
.order-summary li { padding:13px 0; border-bottom:1px solid #3e3e3a; font-size:12px; }
.order-total { display:flex; justify-content:space-between; align-items:end; padding-top:18px; border-top:1px solid #3e3e3a; }
.order-total span { font-size:11px; letter-spacing:.12em; }
.order-total strong { color:var(--acid); font-size:35px; }
.order-form { padding:clamp(34px,5vw,70px); }
.form-heading h2 { margin:0; font-size:48px; letter-spacing:-.055em; }
.form-heading > p:last-child { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:38px; }
.form-grid label { display:grid; gap:9px; }
.form-grid label > span { font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.field-wide { grid-column:1/-1; }
input,select,textarea { width:100%; padding:14px 15px; border:1px solid #c9c4b9; border-radius:9px; outline:none; background:#faf7f0; color:var(--ink); transition:border-color .2s ease,box-shadow .2s ease; }
input:focus,select:focus,textarea:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(11,11,10,.08); }
textarea { min-height:110px; resize:vertical; }
.form-submit { width:100%; margin-top:24px; }
.form-error { min-height:20px; margin-top:15px; color:#b3261e; font-size:12px; font-weight:750; }
.order-form > small { display:block; margin-top:14px; color:#8d8a83; line-height:1.5; }
.toast { position:fixed; left:50%; bottom:24px; z-index:70; padding:13px 17px; border-radius:10px; transform:translate(-50%,20px); background:var(--ink); color:white; font-size:12px; opacity:0; pointer-events:none; transition:.25s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width:1050px) {
  :root { --page:min(100% - 32px,900px); }
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .hero { min-height:auto; padding-top:145px; grid-template-columns:1fr; }
  .attention-demo { max-width:850px; }
  .section-heading { grid-template-columns:1fr; gap:24px; }
  .work-showcase { grid-template-columns:1fr; }
  .work-tabs { flex-direction:row; }
  .work-tab { flex:1; border-bottom:0; border-right:1px solid var(--ink); }
  .work-tab:last-child { border-right:0; }
  .offer-card { grid-template-columns:1fr; gap:55px; }
}

@media (max-width:760px) {
  :root { --page:calc(100% - 24px); --radius:14px; }
  .site-header { top:8px; width:calc(100vw - 16px); min-height:58px; padding-left:12px; }
  .brand-name { display:none; }
  .button-small { padding-inline:13px; }
  .hero { padding-top:115px; gap:60px; }
  .hero h1 { font-size:clamp(55px,16.2vw,82px); }
  .hero h1 em { -webkit-text-stroke:1.4px var(--ink); }
  .hero-lede { margin-top:26px; font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-proof span { min-width:33%; padding-right:7px; font-size:8px; }
  .attention-canvas { min-height:420px; }
  .attention-price { width:205px; height:205px; }
  .attention-price strong { font-size:112px; }
  .attention-arrow { right:45px; bottom:90px; font-size:42px; }
  .attention-result { right:20px; bottom:20px; }
  .attention-result span { font-size:17px; }
  .attention-explain { grid-template-columns:1fr; gap:18px; }
  .hierarchy-inner { min-height:58px; justify-content:flex-start; animation:strip-scroll 15s linear infinite; }
  .work,.offer,.process,.faq { padding-top:105px; }
  .section-heading { margin-bottom:38px; }
  .section-heading h2,.offer h2,.process h2,.faq h2,.final-cta h2 { font-size:47px; }
  .work-tabs { flex-direction:column; }
  .work-tab { min-height:62px; border-right:0; border-bottom:1px solid var(--ink); }
  .showcase-browser { min-height:540px; }
  .demo-panel { min-height:493px; padding:20px; }
  .restaurant-layout,.fitness-layout,.service-layout { min-height:420px; }
  .restaurant-layout h3,.fitness-layout h3,.service-layout h3 { font-size:61px; }
  .plate-art { width:300px; right:-135px; }
  .fitness-bottom { align-items:flex-start; flex-direction:column; }
  .fitness-bottom span { display:none; }
  .offer-card { padding:34px 22px; }
  .process-line { grid-template-columns:1fr; border-block:1px solid var(--ink); }
  .process-line article { min-height:190px; border-right:0; border-bottom:1px solid var(--ink); }
  .process-line article:last-child { border-bottom:0; }
  .faq summary { font-size:18px; }
  .final-cta { padding:120px 0 105px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
  .order-dialog { width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .dialog-close { top:14px; right:14px; }
  .order-layout { grid-template-columns:1fr; }
  .order-summary { min-height:350px; padding:28px 22px; }
  .order-form { padding:42px 20px 50px; }
  .form-heading h2 { font-size:39px; }
  .form-grid { grid-template-columns:1fr; }
  .field-wide { grid-column:auto; }
}

@keyframes strip-scroll { to { transform:translateX(-420px); } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  [data-reveal] { opacity:1; transform:none; }
}