/* NuBlock site styles. Visual model: appshots.design. Font: Satoshi (stand-in for Indivisible). */

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.woff2") format("woff2"),
       url("fonts/Satoshi-Variable.woff") format("woff");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  --page: #edeae2;
  --card: #e2ddd0;
  --card-2: #e0ded8;
  --panel: #f7f5f0;
  --ink: #151105;
  --ink-2: #261d04;
  --ink-3: #3b3110;
  --text: #484030;
  --text-2: #3a362a;
  --muted: #666;
  --gold: #cab98c;
  --gold-text: #75663b;
  --btn: #1a1504;
  --btn-soft: #e3e0d6;
  --btn-soft-text: #524f44;
  --lavender: #d5c6ff;
  --green: #2f7a3e;
  --line: rgba(144,139,116,0.25);
  --container: 1600px;
  --gutter: clamp(20px, 2.7vw, 44px);
  --header-h: clamp(80px, 6.2vw, 100px);
  --purple: #9b5de5;
  --green-tag: #1e8a4c;
  --blue: #1877f2;
  --red: #e0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: "Satoshi", "Indivisible", system-ui, -apple-system, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--muted); background: var(--page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; display: flex; flex-direction: column;
}
body[data-modal-open] { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: clamp(36px, 2vw + 26px, 58px); line-height: 1.1; margin-bottom: 25px; font-weight: 900; letter-spacing: -0.02em; }
h3 { font-size: 22px; line-height: 1.2; }
p { color: var(--text); }
strong { font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.page { background: var(--page); overflow: hidden; flex: 1; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 30px 0; }
.section-sub { text-align: center; color: var(--text); margin-bottom: 30px; font-size: clamp(16px, 0.4vw + 12px, 19px); }
.center { text-align: center; }

/* ---- Placeholder images ---- */
.ph {
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(72,64,48,0.35);
  border-radius: 14px;
  display: grid; place-items: center;
  color: var(--text); font-size: 13px; text-align: center; padding: 12px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 35px; border-radius: 40px;
  border: 2px solid var(--btn); background: var(--btn); color: #fff;
  font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: opacity 160ms ease, background 160ms ease, transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
}
.btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,21,4,0.18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.outline { background: transparent; color: var(--btn); }
.btn.outline:hover { background: rgba(26,21,4,0.06); opacity: 1; }
.btn.sm { height: clamp(36px, 2vw + 16px, 50px); padding: 0 clamp(17px, 1.4vw + 3px, 26px); font-size: clamp(14px, 0.5vw + 9px, 18px); border-width: 0; }
.btn.soft { background: var(--btn-soft); color: var(--btn-soft-text); border-color: var(--btn-soft); }
.btn.soft:hover { opacity: 1; background: #dad7cc; }
.btn.dark { background: #000; border-color: #000; }
.btn .pro, .badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
  background: var(--gold); color: #fff; padding: 3px 6px; border-radius: 6px;
}
.badge.live { background: var(--green); }
.badge.soon { background: #b3ab98; }

/* ================= HEADER ================= */
.site-header { position: relative; z-index: 30; height: var(--header-h); display: flex; align-items: center; }
.site-header > .container { display: flex; align-items: center; justify-content: space-between; }
.header-left { display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 6px; color: #000; font-size: clamp(26px, 1vw + 16px, 36px); font-weight: 900; letter-spacing: -0.03em; }
.logo .mark { transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.logo:hover .mark { transform: rotate(-8deg) scale(1.06); }
.logo .mark { width: clamp(40px, 1.55vw + 24px, 53px); height: clamp(40px, 1.55vw + 24px, 53px); position: relative; top: 2px; }
.main-menu { list-style: none; display: flex; align-items: center; gap: clamp(22px, 2.2vw, 36px); margin-left: clamp(4px, 1.4vw, 20px); }
.main-menu > li { position: static; }
.main-menu > li > a, .main-menu > li > button { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-size: clamp(16px, 1vw + 6px, 22px); font-weight: 600; padding: 8px 0; }
.main-menu > li > button svg { width: 22px; height: 22px; transition: transform 160ms ease; }
.main-menu > li.open > button svg { transform: rotate(180deg); }
.main-menu > li > a, .main-menu > li > button { position: relative; }
.main-menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.main-menu > li > a:hover::after, .main-menu > li > a[aria-current="page"]::after { transform: scaleX(1); }
.header-right { display: flex; align-items: center; gap: 14px; }

/* mega menu */
.megamenu {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  display: none; padding: 0 var(--gutter);
}
.site-header li.open .megamenu { display: block; animation: menuIn 220ms cubic-bezier(.2,.7,.2,1); }
.megamenu-inner {
  max-width: calc(var(--container) - var(--gutter) * 2); margin: 0 auto;
  background: var(--panel); border-radius: 22px; padding: 20px;
  box-shadow: 0 20px 50px rgba(30,20,0,0.12); border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.megamenu-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; transition: background 160ms ease, transform 220ms cubic-bezier(.2,.7,.2,1); }
.megamenu-item:hover { background: rgba(255,255,255,0.7); transform: translateY(-2px); }
.megamenu-item .tile svg { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.megamenu-item:hover .tile svg { transform: scale(1.12) rotate(-4deg); }
.megamenu-item h4 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.megamenu-item p { font-size: 13px; line-height: 1.45; }
.megamenu-item .tile { margin-top: auto; background: var(--card-2); border-radius: 14px; height: 120px; display: grid; place-items: center; }
.megamenu-item .tile svg { width: 44px; height: 44px; color: var(--ink); }

/* mobile menu */
.hamburger { display: none; width: 40px; height: 36px; border-radius: 10px; place-items: center; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); }
.hamburger span::before { top: -6px; } .hamburger span::after { top: 6px; }
.mobile-menu { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 24px; }
.site-header.menu-open .mobile-menu { display: block; animation: menuIn 220ms cubic-bezier(.2,.7,.2,1); }
.mobile-menu a { display: block; padding: 12px 0; color: var(--ink); font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-menu .mobile-cta { display: flex; gap: 10px; margin-top: 16px; }
.mobile-menu .mobile-cta .btn { flex: 1; }

/* ================= HERO (home) ================= */
.section-hero { padding: clamp(20px, 5vw, 80px) 0 0; }
.hero-content { position: relative; max-width: 1240px; margin: 0 auto; text-align: center; }
.hero-meta {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0 auto; padding: 0.4em 0.9em; border-radius: 30px;
  border: 1px solid var(--gold); font-size: clamp(13px, 0.5vw + 8px, 16px); color: var(--text); line-height: 1.4;
}
.meta-count {
  font-weight: 700; margin-right: 3px;
  background: linear-gradient(#000 34%, #ffc108);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.meta-text { display: inline-flex; white-space: pre; }
.meta-text span:nth-child(odd) { color: #9a9282; }
.meta-text span:nth-child(even) { color: var(--text); }
.meta-text .fade { opacity: 0; animation: fadeIn 500ms ease forwards; }
.meta-faces { display: inline-flex; margin-left: 8px; }
.meta-faces i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #b8ad95; border: 2px solid var(--page); margin-left: -6px; }
.meta-faces i:nth-child(2) { background: #8d8470; } .meta-faces i:nth-child(3) { background: #d3c8ab; }

.hero h1 { font-size: clamp(56px, 5.2vw + 22px, 106px); line-height: 1; margin-top: 18px; letter-spacing: -0.02em; font-weight: 800; }
.hero h1 .hl { position: relative; display: inline-block; z-index: 0; white-space: nowrap; min-width: 0.25em; --hl: var(--lavender); }
.hero h1 .hl::before {
  content: ""; position: absolute; z-index: -1; inset: 4px -6px 2px -6px;
  background: var(--hl); border-radius: 4px; transition: background 260ms ease, opacity 200ms ease;
  transform-origin: left; animation: hlIn 600ms 300ms cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 .hl.final::before { opacity: 0; }
.hero h1 .hl.final .hl-word { text-decoration: underline; text-decoration-thickness: 0.075em; text-underline-offset: 0.1em; text-decoration-color: var(--ink); animation: underlineIn 400ms ease both; }
.hero h1 .hl-word { display: inline-block; }
.hero h1 .hl.typing .hl-word::after { content: ""; display: inline-block; width: 0.06em; height: 0.85em; margin-left: 0.04em; vertical-align: -0.05em; background: var(--ink); animation: caret 700ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes underlineIn { from { text-decoration-color: transparent; } }
.hero .lead { font-size: clamp(17px, 0.7vw + 11px, 22px); color: var(--text); margin-top: clamp(24px, 2.6vw, 42px); }
.hero-buttons { display: flex; justify-content: center; gap: clamp(15px, 1.4vw, 22px); margin-top: clamp(25px, 3.2vw, 50px); }
.hero-buttons .btn { height: clamp(48px, 3vw + 17px, 66px); padding: 0 clamp(35px, 2.5vw + 10px, 50px); font-size: clamp(16px, 0.7vw + 9px, 20px); }

.hero-shots { position: relative; height: clamp(320px, 41vw, 664px); margin-top: clamp(40px, 3.6vw, 58px); }
.shot {
  position: absolute; bottom: 0; border-radius: 12px;
  background: #fff; box-shadow: 0 10px 40px rgba(40,30,0,0.08);
  border: 1px solid rgba(72,64,48,0.12); overflow: hidden;
}
.shot .bar { height: clamp(26px, 2.6vw, 42px); background: #f4f2ec; border-bottom: 1px solid rgba(72,64,48,0.1); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.shot .bar i { width: 8px; height: 8px; border-radius: 50%; background: #d7d2c4; }
.shot .bar b { flex: 1; height: 12px; margin: 0 40px; border-radius: 6px; background: #eae7df; }
.shot .ph { border-radius: 0; border: 0; background: transparent; height: calc(100% - clamp(26px, 2.6vw, 42px)); font-size: clamp(12px, 0.5vw + 7px, 16px); }
.shot-c { left: 50%; transform: translateX(-50%); width: 61%; height: 100%; z-index: 2; }
.shot-l, .shot-r { width: 40%; height: 87%; bottom: 7%; opacity: 0.85; z-index: 1; }
.shot-l { right: 79.5%; } .shot-r { left: 79.5%; }

/* hero entrance: everything rises in sequence once the page is ready */
.hero-meta, .hero h1, .hero .lead, .hero-buttons, .shot { opacity: 0; }
body.is-loaded .hero-meta   { animation: fadeUp 700ms cubic-bezier(.2,.7,.2,1) 80ms both; }
body.is-loaded .hero h1     { animation: fadeUp 800ms cubic-bezier(.2,.7,.2,1) 180ms both; }
body.is-loaded .hero .lead  { animation: fadeUp 700ms cubic-bezier(.2,.7,.2,1) 360ms both; }
body.is-loaded .hero-buttons{ animation: fadeUp 700ms cubic-bezier(.2,.7,.2,1) 480ms both; }
body.is-loaded .shot-c      { animation: shotUp 900ms cubic-bezier(.2,.7,.2,1) 600ms both; }
body.is-loaded .shot-l      { animation: shotUpSide 900ms cubic-bezier(.2,.7,.2,1) 760ms both; }
body.is-loaded .shot-r      { animation: shotUpSide 900ms cubic-bezier(.2,.7,.2,1) 860ms both; }
.hero h1 .hl::before { animation-delay: 700ms; }
.shot { transition: transform 600ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.shot-l, .shot-r { --dx: 0px; }
@keyframes shotUp { from { opacity: 0; transform: translate(-50%, 60px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes shotUpSide { from { opacity: 0; transform: translate(var(--dx), 60px); } to { opacity: 0.85; transform: translate(var(--dx), 0); } }

/* cursor labels floating around the headline */
.tag-cursor { position: absolute; z-index: 3; display: none; pointer-events: none; opacity: 0; transition: left 260ms cubic-bezier(.2,.7,.2,1), top 260ms cubic-bezier(.2,.7,.2,1); }
.tag-cursor .lbl { display: inline-block; color: #fff; font-size: clamp(22px, 1.2vw + 10px, 32px); font-weight: 600; padding: 0.35em 0.6em; border-radius: 8px; line-height: 1.2; }
.tag-cursor { --arrow: clamp(34px, 2.6vw, 46px); }
.tag-cursor svg { position: absolute; width: var(--arrow); height: auto; }
.tag-cursor.purple .lbl { background: var(--purple); } .tag-cursor.purple svg { fill: var(--purple); }
.tag-cursor.green  .lbl { background: var(--green-tag); } .tag-cursor.green svg { fill: var(--green-tag); }
.tag-cursor.blue   .lbl { background: var(--blue); } .tag-cursor.blue svg { fill: var(--blue); }
.tag-cursor.red    .lbl { background: var(--red); } .tag-cursor.red svg { fill: var(--red); }
/* arrow sits at the corner nearest the headline */
.tag-cursor.tl { left: 12%;  top: 4%;  } .tag-cursor.tl svg { right: calc(var(--arrow) * -0.95); bottom: calc(var(--arrow) * -0.85); transform: scale(-1, -1); }
.tag-cursor.tr { right: 9%;  top: 19%; } .tag-cursor.tr svg { left: calc(var(--arrow) * -0.95); bottom: calc(var(--arrow) * -0.85); transform: scaleY(-1); }
.tag-cursor.bl { left: 9%;   top: 70%; } .tag-cursor.bl svg { right: calc(var(--arrow) * -0.95); top: calc(var(--arrow) * -0.85); transform: scaleX(-1); }
.tag-cursor.br { right: 6%;  top: 67%; } .tag-cursor.br svg { left: calc(var(--arrow) * -0.95); top: calc(var(--arrow) * -0.85); transform: none; }
body.is-loaded .tag-cursor { animation: tagIn 500ms cubic-bezier(.3,1.4,.4,1) both, floaty 5s ease-in-out 1.6s infinite; }
body.is-loaded .tag-cursor.tl { animation-delay: 1000ms, 1.6s; } body.is-loaded .tag-cursor.tr { animation-delay: 1150ms, 2.8s; }
body.is-loaded .tag-cursor.bl { animation-delay: 1300ms, 4s; }   body.is-loaded .tag-cursor.br { animation-delay: 1450ms, 5.2s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tagIn { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 1280px) { .tag-cursor { display: block; } }
@media (prefers-reduced-motion: reduce) { .tag-cursor { animation: none; } }

/* ================= LOGOS ================= */
.logos-title { text-align: center; font-size: clamp(18px, 0.7vw + 11px, 24px); color: var(--text); padding: clamp(40px, 4.5vw, 72px) 0 20px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-item { flex: none; width: 120px; height: 48px; margin: 15px 16px; opacity: 0.7; display: grid; place-items: center; }
.logo-item img { height: 48px; width: auto; filter: invert(1) grayscale(1) contrast(1.1); }

/* ================= FEATURES ================= */
.features-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 5vw, 80px); padding: clamp(40px, 4vw, 64px) 0; }
.features-image { grid-column: 2; }
.features-item:nth-child(even) .features-image { grid-column: 1; grid-row: 1; }
.features-texts { grid-column: 1; grid-row: 1; max-width: 560px; }
.features-item:nth-child(even) .features-texts { grid-column: 2; }
.features-image .ph { aspect-ratio: 740 / 530; width: 100%; }
.features-desc p { font-size: clamp(16px, 0.4vw + 12px, 19px); line-height: 1.6; }
.features-desc p + p { margin-top: 12px; }
.features-buttons { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }

/* ================= COUNTERS ================= */
.section-counters { padding-top: 40px; }
.section-counters h2, .section-testimonials h2, .section-cta h2 { text-align: center; margin-bottom: 15px; }
.counters-row { display: flex; gap: 20px; }
.counters-col { flex: 1; padding-top: 20px; }
.counters-col-inner { background: var(--card); border-radius: 17px; height: 520px; overflow: hidden; display: flex; flex-direction: column; }
.counters-carousels { display: flex; gap: 12px; justify-content: center; height: 360px; padding: 20px 20px 0; overflow: hidden; }
.strip { width: 74px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.strip-track { display: flex; flex-direction: column; gap: 10px; animation: marqueeY 18s linear infinite; }
.strip:nth-child(2) .strip-track { animation-direction: reverse; animation-duration: 22s; }
.strip:nth-child(3) .strip-track { animation-duration: 26s; }
.strip .ph { width: 74px; height: 110px; flex: none; border-radius: 12px; padding: 6px; font-size: 10px; }
.strip .ph:nth-child(3n+2) { height: 80px; } .strip .ph:nth-child(3n) { height: 130px; }
.counters-info { padding: 26px 25px 25px; margin-top: auto; }
.count-slider { font-size: 70px; line-height: 1; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.count-meta { display: flex; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 8px 0; }
.count-type { font-size: 28px; line-height: 1; font-weight: 700; color: var(--ink-3); margin-right: 8px; }
.count-duration { font-size: 13px; color: var(--text); background: rgba(255,255,255,0.45); padding: 4px 8px; border-radius: 12px; }

/* ================= TESTIMONIALS ================= */
.section-testimonials { padding-top: 70px; }
.testimonials-rows { display: grid; gap: 20px; }
.testimonials-row { overflow: hidden; }
.testimonials-track { display: flex; gap: 20px; width: max-content; animation: marquee 60s linear infinite; }
.testimonials-row:nth-child(2) .testimonials-track { animation-direction: reverse; }
.testimonials-row:hover .testimonials-track { animation-play-state: paused; }
.testimonial-item-wrap {
  width: 360px; flex: none; padding: 20px; border-radius: 12px;
  background: rgba(255,255,255,0.4); border: 1px solid var(--line);
  color: var(--text-2); display: flex; flex-direction: column;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease, background 260ms ease;
}
.testimonial-item-wrap:hover { transform: translateY(-4px); background: rgba(255,255,255,0.65); box-shadow: 0 18px 40px rgba(40,30,0,0.08); }
.testimonial-item-wrap p { color: var(--text-2); line-height: 1.5; }
.testimonial-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; }
.testimonial-info { display: flex; align-items: center; }
.testimonial-image { width: 42px; height: 42px; border-radius: 50%; margin-right: 10px; background: #c9c0a9; border: 1px dashed rgba(72,64,48,0.35); flex: none; }
.testimonial-name { color: var(--ink); font-size: 16px; font-weight: 700; }
.testimonial-name span { display: block; font-size: 11px; line-height: 1; color: var(--gold-text); margin-top: 3px; }
.testimonial-platform svg { width: 24px; height: 19px; fill: var(--ink); opacity: 0.85; }
.tweet { text-align: center; font-size: 18px; color: var(--text); margin-top: 40px; }
.tweet a { color: var(--gold-text); }

/* ================= CTA ================= */
.section-cta { padding: 60px 0 70px; text-align: center; }
.section-cta .section-sub { margin-bottom: 0; }
.cta-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 30px; flex-wrap: wrap; }

/* ================= FOOTER ================= */
.site-footer { background: #fff; }
.footer-word {
  font-size: clamp(120px, 25.5vw, 440px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85;
  text-align: center; white-space: nowrap; user-select: none; cursor: default;
  padding: 40px 0 0; margin-bottom: 24px; color: #111;
}
.footer-word span { position: relative; display: inline-block; transform: translateY(60%); transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.footer-word.in span { transform: translateY(0); }
.footer-word span.has-canvas { color: transparent; }   /* canvas paints the black letters + heat */
.footer-word canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1fr repeat(3, 120px); gap: 32px; padding: 36px 0 50px; font-size: 14px; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: #111; }
.footer-brand .mark { width: 33px; height: 33px; position: relative; top: 1px; margin-right: -2px; }
.footer-copy { font-size: 13px; color: #555; margin-top: 10px; line-height: 1.4; max-width: 30ch; }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.socials a { width: 26px; height: 26px; border-radius: 6px; background: #111; display: grid; place-items: center; color: #fff; }
.socials svg { width: 14px; height: 14px; fill: currentColor; }
.site-footer h4 { font-size: 14px; color: #111; margin-bottom: 14px; font-weight: 700; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer li a { color: #333; }
.site-footer li a:hover { color: #000; text-decoration: underline; }

/* ================= SUBPAGES ================= */
.page-hero { padding: 40px 0 30px; text-align: center; }
.page-hero h1 { font-size: 64px; line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; margin: 14px auto 0; font-weight: 900; }
.page-hero .lead { font-size: 18px; max-width: 56ch; margin: 24px auto 0; line-height: 1.5; }
.page-hero .eyebrow { display: inline-flex; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--gold); font-size: 13px; color: var(--text); }
.page-hero .hero-buttons { margin-top: 28px; }

.prose { max-width: 720px; margin: 0 auto; padding: 20px 0 70px; }
.prose h2 { font-size: 32px; margin: 44px 0 14px; font-weight: 800; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; color: var(--text); }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 10px 0; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.prose .note { font-size: 14px; color: var(--muted); border-left: 3px solid var(--gold); padding: 8px 14px; background: rgba(255,255,255,0.4); border-radius: 0 10px 10px 0; margin: 20px 0; }
.prose .stamp { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: rgba(255,255,255,0.4); border: 1px solid var(--line); border-radius: 17px; padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease, background 260ms ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(40,30,0,0.08); background: rgba(255,255,255,0.6); }
.card.solid { background: var(--card); border-color: transparent; }
.card h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card p { font-size: 15px; line-height: 1.55; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card .seal { width: 72px; height: 72px; border-radius: 50%; background: #fff center / 80% no-repeat; border: 1px solid var(--line); }
.card .seal img { width: 100%; height: 100%; object-fit: contain; padding: 8px; filter: invert(1) grayscale(1); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.step { background: var(--card); border-radius: 17px; padding: 26px; transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease; }
.step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(40,30,0,0.08); }
.step .num { font-size: 13px; letter-spacing: 0.08em; color: var(--gold-text); margin-bottom: 10px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; line-height: 1.55; }

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-text); font-weight: 500; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; max-width: 62ch; line-height: 1.6; }
.faq details[open] p { animation: fadeUp 320ms cubic-bezier(.2,.7,.2,1); }
.faq summary::after { transition: transform 220ms ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p a { color: var(--gold-text); text-decoration: underline; }

.form { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 700; }
.form input, .form select, .form textarea {
  height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(72,64,48,0.3);
  background: #fff; font-weight: 600; color: var(--ink); width: 100%;
}
.form textarea { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23151105' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: transparent; }
.form .hint { font-size: 13px; color: var(--muted); }

/* ================= MODAL (sign in) ================= */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(21,17,5,0.55); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; width: min(100%, 440px); background: var(--page); border-radius: 22px; padding: 34px 30px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3); text-align: center;
  animation: popIn 200ms cubic-bezier(.2,.7,.2,1);
}
.modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(0,0,0,0.05); }
.modal-close:hover { background: rgba(0,0,0,0.1); }
.modal-seal { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; background: #fff center / 78% no-repeat; border: 1px solid var(--line); transition: opacity 150ms ease; }
.modal-seal.empty { opacity: 0.5; }
.modal-seal img { width: 100%; height: 100%; object-fit: contain; padding: 10px; filter: invert(1) grayscale(1); }
.modal-card h2 { font-size: 30px; margin-bottom: 6px; }
.modal-card .modal-sub { font-size: 15px; margin-bottom: 20px; }
.modal-card .form { text-align: left; }
.modal-card .form .btn { width: 100%; margin-top: 4px; }
.modal-card .form-msg { font-size: 14px; color: var(--text); text-align: center; margin-top: 2px; }
.modal-card .form-msg.error { color: #a33; }
.modal-note { font-size: 13px; color: var(--muted); margin-top: 18px; }
.modal-card.is-wrong { animation: shake 320ms ease; }

/* ================= MOTION ================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(.94); }
.reveal.in { opacity: 1; transform: none; }
body { animation: pageIn 400ms ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes marqueeY { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hlIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); }
  40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .testimonials-track, .strip-track { animation: none; }
  body, .hero-meta, .hero h1, .hero .lead, .hero-buttons, .shot, .tag-cursor, body.is-loaded .tag-cursor { animation: none; opacity: 1; }
  body.is-loaded .shot-l, body.is-loaded .shot-r { opacity: 0.85; }
  .footer-word span { transform: none; transition: none; }
  .btn, .card, .step, .testimonial-item-wrap, .megamenu-item, .logo .mark { transition: none; }
  .meta-text .fade { animation: none; opacity: 1; }
  .hero h1 .hl::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .modal-card, .modal-card.is-wrong { animation: none; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  h2 { font-size: 36px; }
  .hero h1 { font-size: 52px; }
  .page-hero h1 { font-size: 44px; }
  .main-menu { display: none; }
  .header-right .btn.soft { display: none; }
  .hamburger { display: grid; }
  .features-item, .features-item:nth-child(even) { grid-template-columns: 1fr; }
  .features-image, .features-item:nth-child(even) .features-image,
  .features-texts, .features-item:nth-child(even) .features-texts { grid-column: 1; grid-row: auto; max-width: none; }
  .counters-row { flex-direction: column; }
  .counters-col-inner { height: auto; }
  .counters-carousels { height: 220px; }
  .cards, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .shot-l, .shot-r { display: none; }
  .shot-c { width: 100%; }
  .hero-shots { height: 360px; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; --header-h: 68px; }
  .hero h1 { font-size: 40px; }
  .hero h1 br { display: none; }   /* let long cycling words wrap naturally */
  .hero .lead { margin-top: 20px; }
  .hero-buttons, .features-buttons, .cta-buttons { flex-direction: column; align-items: stretch; }
  .hero-meta { font-size: 11px; }
  .footer-grid { grid-template-columns: 1fr; }
  .count-slider { font-size: 56px; }
  .modal-card { padding: 28px 20px 20px; }
}