@font-face {
  font-family:"Archivo";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family:"Archivo";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("../fonts/archivo-800.woff2") format("woff2");
}
@font-face {
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-400.woff2") format("woff2");
}
@font-face {
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-500.woff2") format("woff2");
}
@font-face {
  font-family:"Be Vietnam Pro";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/be-vietnam-pro-600.woff2") format("woff2");
}

:root {
  --paper:#f5f6f8;
  --surface:#fff;
  --ink:#0a0a0a;
  --ink-2:#55585f;
  --line:#e3e5ea;
  --line-dark:#2a2b2e;
  --on-dark:#f5f6f8;
  --on-dark-2:#a4a7ae;
  --marker:#ffe14d;
  --font-display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --font-body:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--marker); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button,a { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; height:auto; }
svg { display:block; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:var(--font-display); font-weight:800; }
h1 {
  font-size:42px;
  font-size:clamp(42px,6.2vw,84px);
  line-height:1.1;
  letter-spacing:-.03em;
}
h2 {
  font-size:32px;
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.15;
  letter-spacing:-.025em;
}
h3 {
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.015em;
}
h1,h2 { text-wrap:balance; }
.faq-answer p,.product-row p { text-wrap:pretty; }
.contact p { text-wrap:balance; }
p { max-width:38rem; }
section { scroll-margin-top:84px; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--ink); outline-offset:5px; }
.on-dark :focus-visible { outline-color:var(--marker); }
.container {
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}
.section-space { padding-top:72px; padding-bottom:72px; }
.not-found { max-width:800px; padding-top:64px; padding-bottom:80px; text-align:center; }
.not-found .brand { margin-bottom:40px; }
.not-found-code { margin:0 auto 16px; font-family:var(--font-display); font-size:100px; font-weight:800; line-height:1.1; }
.not-found h1 { font-size:36px; font-size:clamp(36px,5vw,56px); }
.not-found h1+p { margin:24px auto 0; color:var(--ink-2); }
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.svg-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  background:var(--marker);
  color:var(--ink);
  padding:12px 20px;
  border-radius:4px;
}
.skip-link:focus { top:10px; }

/* Buttons */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
  transition:background-color .15s,color .15s,border-color .15s;
}
.button .icon { margin-right:10px; width:20px; height:20px; }
.button-dark { background:var(--ink); color:#fff; }
.button-dark:hover { background:#303136; }
.button-outline { border:1.5px solid var(--ink); background:transparent; }
.button-outline:hover { background:var(--ink); color:#fff; }
.button-marker { background:var(--marker); color:var(--ink); }
.button-marker:hover { background:#ffeb8a; }
.button-light-outline { background:transparent; border-color:#626469; color:var(--on-dark); }
.button-light-outline:hover { background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); }
.icon-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  transition:background-color .15s;
}
.icon-link:hover { background:var(--line); }

/* Header */
.site-header {
  height:64px;
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:30;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.site-header.is-scrolled { border-bottom-color:var(--line); }
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))) {
  .site-header {
    background:rgba(245,246,248,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
}
.brand img { width:150px; height:44px; object-fit:contain; mix-blend-mode:multiply; }
.site-header .brand { flex-shrink:0; }
.main-nav { display:none; }
.header-contact { font-size:14px; min-height:44px; padding:10px 18px; }

/* Hero */
.hero {
  position:relative;
  padding-top:128px;
  padding-bottom:80px;
  text-align:center;
}
.hero-copy { width:100%; max-width:1120px; margin:0 auto; }
.hero h1 {
  font-size:48px;
  font-size:clamp(48px,10vw,136px);
  line-height:1.12;
  letter-spacing:-.045em;
}
.hero h1>span { display:block; }
.hero h1>span:last-child { white-space:nowrap; }
.hero-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:36px auto 0;
  max-width:440px;
}

/* Products */
.products h2 span { white-space:nowrap; }
.product-list { display:grid; grid-template-columns:minmax(0,1fr); margin-top:36px; }
.product-row {
  border-top:1px solid var(--line);
  padding:28px 0;
}
.product-row:last-of-type { border-bottom:1px solid var(--line); }
.product-row-heading { display:flex; align-items:center; }
.product-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  margin-right:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.product-icon .icon { width:22px; height:22px; }
.product-row h3 { font-size:24px; }
.product-row p {
  margin-top:16px;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-2);
}

/* Forecast action */
.how.section-space { padding-top:0; text-align:center; }
.how .forecast-button {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  max-width:960px;
  min-height:96px;
  margin:0 auto;
  padding:22px 24px;
  border:2px solid var(--ink);
  background:var(--marker);
  color:var(--ink);
  box-shadow:0 7px 0 var(--ink);
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  line-height:1.4;
  transition:background-color .2s,transform .2s,box-shadow .2s;
}
.forecast-button::before {
  content:"";
  position:absolute;
  top:-9px;
  right:-9px;
  bottom:-9px;
  left:-9px;
  border:2px solid var(--marker);
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  animation:forecast-pulse 3.4s ease-out infinite;
}
.forecast-button-label { flex:1; min-width:0; text-wrap:balance; }
.forecast-button-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  margin-left:16px;
  border-radius:50%;
  background:var(--ink);
  color:var(--on-dark);
  transition:transform .2s;
}
.forecast-button-arrow .icon { width:22px; height:22px; margin:0; }
@keyframes forecast-pulse {
  0% { opacity:.6; transform:scale(1); }
  70%,100% { opacity:0; transform:scale(1.045); }
}
@media(min-width:768px) {
  .how .forecast-button { min-height:108px; padding:24px 32px; font-size:26px; }
  .forecast-button-arrow { flex-basis:48px; width:48px; height:48px; margin-left:24px; }
  .forecast-button-arrow .icon { width:26px; height:26px; }
}
@media(min-width:1024px) {
  .how .forecast-button { min-height:112px; padding:24px 44px; font-size:30px; }
  .forecast-button-arrow { flex-basis:56px; width:56px; height:56px; margin-left:28px; }
}
@media(hover:hover) {
  .how .forecast-button:hover { background:#ffea78; transform:translateY(-4px); box-shadow:0 11px 0 var(--ink); }
  .how .forecast-button:hover .forecast-button-arrow { transform:translateX(3px); }
}
.how .forecast-button:active {
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--ink);
}

/* Dark sections */
.on-dark { background:var(--ink); color:var(--on-dark); }

/* Feedback */
.feedback .section-heading p { color:var(--on-dark-2); font-size:16px; margin-top:16px; }
.feedback-grid {
  margin-top:36px;
  -webkit-column-count:2;
  column-count:2;
  -webkit-column-gap:12px;
  column-gap:12px;
}
.feedback-placeholder,.feedback-item {
  position:relative;
  width:100%;
  display:block;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 12px;
  border:1px solid var(--line-dark);
  background:#161617;
  border-radius:10px;
  overflow:hidden;
}
.feedback-placeholder>div {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.feedback-placeholder .icon { width:28px; height:28px; color:#858991; margin-bottom:14px; }
.feedback-placeholder span { font-size:14px; color:var(--on-dark-2); }
.feedback-placeholder small { font-size:12px; color:#9b9ea6; margin-top:4px; }
.feedback-item { padding:0; cursor:zoom-in; color:var(--on-dark); }
.feedback-item img { width:100%; height:auto; }
.feedback-bottom { margin-top:28px; text-align:center; }
.feedback-bottom .button { min-width:200px; }

/* FAQ */
.faq-list { margin-top:32px; border-bottom:1px solid var(--line); }
.faq-list details { border-top:1px solid var(--line); }
.faq-list summary {
  position:relative;
  list-style:none;
  cursor:pointer;
  min-height:72px;
  padding:24px 44px 24px 0;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
}
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:before,.faq-list summary:after {
  content:"";
  position:absolute;
  right:4px;
  top:36px;
  width:14px;
  height:1.5px;
  background:var(--ink);
}
.faq-list summary:after { transform:rotate(90deg); }
.faq-list details[open] summary:after { transform:rotate(0); }
.faq-answer { padding:0 36px 26px 0; color:var(--ink-2); font-size:16px; line-height:1.75; }

/* Contact */
.contact { text-align:center; padding:80px 0 64px; }
.contact h2 { font-size:38px; font-size:clamp(38px,5.4vw,72px); line-height:1.12; letter-spacing:-.03em; margin:0 auto; max-width:16ch; }
.contact p { margin:20px auto 0; color:var(--on-dark-2); font-size:17px; }
.contact-channels {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:32px auto 0;
  max-width:680px;
}
.contact-channels .button { padding-left:16px; padding-right:16px; }

/* Footer */
.site-footer { padding-bottom:28px; }
.footer-top { border-top:1px solid var(--line-dark); padding-top:32px; }
.footer-brand { background:#fff; padding:8px 14px; border-radius:12px; }
.footer-brand img { width:180px; height:44px; }
.footer-socials { display:flex; margin-top:20px; }
.footer-socials .icon-link { border-color:var(--line-dark); margin-right:8px; }
.footer-socials .icon-link:hover { background:var(--line-dark); }
.footer-socials .icon { width:18px; height:18px; }
.footer-bottom {
  border-top:1px solid var(--line-dark);
  margin-top:28px;
  padding-top:24px;
  color:var(--on-dark-2);
  font-size:14px;
}
.footer-bottom p { max-width:42rem; line-height:1.75; }
.footer-bottom>span { display:block; margin-top:16px; font-size:13px; white-space:nowrap; }

/* Persistent contact disclosure */
.contact-widget {
  position:fixed;
  right:16px;
  right:calc(16px + env(safe-area-inset-right));
  bottom:20px;
  bottom:calc(20px + constant(safe-area-inset-bottom));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:40;
}
.contact-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  padding:0;
  list-style:none;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--marker);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 4px 0 var(--ink);
  transition:background-color .15s,transform .15s;
}
.contact-toggle::-webkit-details-marker { display:none; }
.contact-toggle::marker { content:""; }
.contact-toggle .icon { width:24px; height:24px; }
.contact-toggle-label { display:none; font-size:15px; font-weight:600; white-space:nowrap; }
.contact-toggle-close { display:none; }
.contact-widget[open] .contact-toggle-chat { display:none; }
.contact-widget[open] .contact-toggle-close { display:block; }
.contact-panel {
  position:absolute;
  bottom:calc(100% + 16px);
  right:0;
  width:296px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 124px);
  max-height:calc(100svh - 124px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px 12px 12px;
  border:1px solid var(--ink);
  border-radius:20px;
  background:var(--surface);
  color:var(--ink);
  animation:contact-in .18s ease;
}
.contact-widget:not([open]) .contact-panel { display:none; }
.contact-panel-heading { padding:0 8px 16px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.contact-panel-heading strong { display:block; font-size:17px; line-height:1.5; }
.contact-panel-heading p { color:var(--ink-2); font-size:13px; margin-top:4px; }
.contact-options { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
.contact-options>a { display:flex; align-items:center; min-height:60px; padding:8px; border:1px solid transparent; border-radius:12px; }
.contact-options>a[data-channel="zalo"] { background:var(--paper); border-color:var(--line); }
.contact-option-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:12px; flex:0 0 36px; }
.contact-option-icon .icon { width:23px; height:23px; }
.contact-option-copy { display:block; flex:1; min-width:0; }
.contact-option-copy strong { display:block; font-size:15px; font-weight:500; line-height:1.6; }
.contact-option-copy small { display:block; font-size:12px; line-height:1.6; color:var(--ink-2); }
.contact-option-arrow { width:18px; height:18px; margin-left:8px; transform:rotate(-45deg); color:var(--ink-2); }
@keyframes contact-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media(hover:hover) {
  .contact-toggle:hover { background:#ffea8a; transform:translateY(-2px); }
  .contact-options>a:hover { background:var(--paper); border-color:var(--line); }
}
@media(min-width:768px) {
  .contact-widget { right:28px; right:calc(28px + env(safe-area-inset-right)); bottom:28px; bottom:calc(28px + env(safe-area-inset-bottom)); }
  .contact-toggle { width:auto; padding:0 24px; }
  .contact-toggle-label { display:block; margin-left:12px; }
  .contact-panel { width:312px; }
}

/* Lightbox */
.lightbox {
  position:fixed;
  z-index:60;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0,0,0,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:68px 54px;
  animation:lightbox-in .15s ease;
}
.lightbox .icon-link {
  position:absolute;
  border-color:#626469;
  color:var(--on-dark);
  background:#151517;
  width:44px;
  height:44px;
}
.lightbox .icon-link:hover { background:#36383b; }
.lightbox-close { right:16px; top:16px; }
.lightbox-prev { left:5px; top:50%; transform:translateY(-50%) rotate(180deg); }
.lightbox-next { right:5px; top:50%; transform:translateY(-50%); }
.lightbox-figure { max-width:100%; display:flex; align-items:center; flex-direction:column; }
.lightbox-figure img {
  max-height:75vh;
  max-height:75svh;
  max-width:100%;
  width:auto;
  object-fit:contain;
  border-radius:6px;
}
.lightbox-figure figcaption { font-size:13px; color:var(--on-dark-2); text-align:center; margin-top:12px; }
.lightbox-placeholder {
  width:220px;
  height:340px;
  max-width:100%;
  background:#161617;
  border:1px solid var(--line-dark);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  font-size:15px;
  padding:24px;
}
.lightbox-placeholder .icon { width:36px; height:36px; margin-bottom:20px; }
.lightbox-placeholder small { font-size:13px; color:var(--on-dark-2); margin-top:12px; }
@keyframes lightbox-in { from { opacity:0; } to { opacity:1; } }
.button .button-trailing-icon { margin:0 0 0 12px; }
.lightbox-tools { position:absolute; left:16px; top:16px; right:76px; display:flex; align-items:center; flex-wrap:wrap; }
.lightbox-tools button,.lightbox-tools a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid #626469; border-radius:999px; background:#151517; color:var(--on-dark); font-size:12px; margin-right:8px; }
.lightbox-tools button:hover,.lightbox-tools a:hover { background:#36383b; }
.lightbox-figure { width:100%; }
#lightbox-content { max-width:100%; max-height:75vh; max-height:75svh; overflow:auto; -webkit-overflow-scrolling:touch; }
.lightbox.is-zoomed { padding:92px 16px 80px; }
.lightbox.is-zoomed .lightbox-figure { max-width:850px; }
.lightbox.is-zoomed #lightbox-content { width:100%; max-height:calc(100vh - 208px); max-height:calc(100svh - 208px); }
.lightbox.is-zoomed .lightbox-figure img { width:100%; max-height:none; height:auto; object-fit:initial; }
.lightbox.is-zoomed .lightbox-prev,.lightbox.is-zoomed .lightbox-next { top:auto; bottom:16px; transform:none; }
.lightbox.is-zoomed .lightbox-prev { left:calc(50% - 52px); transform:rotate(180deg); }
.lightbox.is-zoomed .lightbox-next { right:calc(50% - 52px); }
@media(min-width:768px) { .lightbox-tools { left:25px; top:24px; right:90px; } .lightbox-tools button,.lightbox-tools a { font-size:14px; padding:8px 16px; } }

@media(min-width:480px) {
  .site-header .brand img { width:180px; height:46px; }
  .hero-actions { grid-template-columns:auto auto; justify-content:center; max-width:none; gap:12px; }
}
@media(min-width:768px) {
  .container { padding-left:32px; padding-right:32px; }
  .main-nav { display:flex; align-items:center; }
  .main-nav a {
    display:flex;
    align-items:center;
    min-height:44px;
    font-size:13px;
    color:var(--ink-2);
    margin:0 8px;
  }
  .main-nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
  .hero { padding-top:132px; padding-bottom:88px; }
  .section-space { padding-top:96px; padding-bottom:96px; }
  .product-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; margin-top:48px; }
  .product-row { padding:34px 0; }
  .product-row:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
  .product-row h3 { font-size:28px; }
  .section-heading { display:flex; align-items:flex-end; justify-content:space-between; }
  .section-heading>p { margin-top:0; margin-left:40px; max-width:22rem; }
  .feedback .section-heading p { margin-top:0; }
  .feedback-grid { -webkit-column-count:3; column-count:3; margin-top:48px; }
  .feedback-bottom { margin-top:36px; }
  .faq-list { margin-top:48px; }
  .faq-list summary { font-size:19px; }
  .contact { padding-top:104px; padding-bottom:80px; }
  .contact-channels { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:40px; }
  .contact p { font-size:19px; }
  .footer-top { display:flex; align-items:center; justify-content:space-between; }
  .footer-socials { margin:0; }
  .footer-socials .icon-link { margin-right:0; margin-left:8px; }
  .footer-bottom { display:flex; justify-content:space-between; align-items:flex-end; }
  .footer-bottom>span { margin-top:0; margin-left:40px; }
  .site-footer { padding-bottom:32px; }
  .lightbox { padding:72px 90px; }
  .lightbox-prev { left:25px; }
  .lightbox-next { right:25px; }
  .lightbox-close { top:24px; right:25px; }
}
@media(min-width:1024px) {
  .site-header .brand img { width:200px; height:48px; }
  .container { padding-left:40px; padding-right:40px; }
  .main-nav a { font-size:14px; margin:0 18px; }
  .hero { padding-top:160px; padding-bottom:112px; }
  .hero-actions { margin-top:44px; }
  .section-intro { align-self:start; }
  .section-intro h2 { font-size:48px; font-size:clamp(40px,3.8vw,54px); }
  .product-list { column-gap:64px; }
  .product-row { padding:36px 0; }
  .product-row p { font-size:18px; max-width:32rem; }
  .feedback-grid { -webkit-column-count:4; column-count:4; }
  .faq { display:grid; grid-template-columns:5fr 7fr; gap:72px; padding-top:112px; }
  .faq-list { margin-top:0; }
  .faq-list summary { min-height:88px; padding-top:30px; padding-bottom:30px; }
  .faq-list summary:before,.faq-list summary:after { top:43px; }
  .faq-answer { font-size:17px; }
  .section-space { padding-bottom:112px; }
  .contact { padding-top:120px; padding-bottom:96px; }
}
@media(min-width:1280px) {
  .hero { padding-top:168px; padding-bottom:120px; }
}
/* ---------- Polish: depth, motion, details ---------- */
main { position:relative; }
.hero { position:relative; z-index:1; }
.hero-bg {
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:780px;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(#c3c6ce 1.2px,transparent 1.4px);
  background-size:26px 26px;
  opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 72% 32%,#000 0,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 65% at 72% 32%,#000 0,transparent 78%);
}
.scroll-progress {
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* Hero entrance */
.hero-copy>* { animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
.hero-copy>h1 { animation-delay:.05s; }
.hero-copy>.hero-actions { animation-delay:.32s; }
@keyframes rise {
  from { opacity:0; transform:translateY(22px); }
  to { opacity:1; transform:none; }
}
/* Ticker */
.ticker { background:var(--ink); color:var(--on-dark); overflow:hidden; padding:20px 0; }
.ticker-track { display:flex; width:-webkit-max-content; width:max-content; animation:ticker 42s linear infinite; }
.ticker-group { display:flex; flex-shrink:0; }
.ticker-item {
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-.01em;
}
.ticker-item i {
  display:block;
  width:8px;
  height:8px;
  margin:0 36px;
  background:var(--marker);
  transform:rotate(45deg);
}
@keyframes ticker { to { transform:translateX(-50%); } }

/* Scroll reveal (only when JS + IntersectionObserver + motion allowed) */
.can-reveal [data-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
.can-reveal [data-reveal].is-in { opacity:1; transform:none; }
.product-row:nth-of-type(2),.faq-list details:nth-of-type(2) { --d:90ms; }
.product-row:nth-of-type(3),.faq-list details:nth-of-type(3) { --d:180ms; }
.product-row:nth-of-type(4),.faq-list details:nth-of-type(4) { --d:270ms; }
.faq-list details:nth-of-type(5) { --d:360ms; }
/* Details */
.product-row { position:relative; }
.product-row:before {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:0;
  height:2px;
  background:var(--ink);
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.faq-list summary:before,.faq-list summary:after { transition:transform .3s; }
.faq-list details[open] .faq-answer { animation:faq-in .35s ease; }
@keyframes faq-in {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:none; }
}
.feedback-placeholder { transition:border-color .2s,background-color .2s; }
.button { transition:background-color .15s,color .15s,border-color .15s,transform .2s; }
.button:active { transform:none; }
@media(hover:hover) {
  .button:hover { transform:translateY(-2px); }
  .product-row h3 { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .product-row:hover:before { width:100%; }
  .product-row:hover h3 { transform:translateX(8px); }
  .feedback-placeholder:hover { border-color:#4a4c52; background:#1b1b1d; }
  .feedback-item img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .feedback-item:hover img { transform:scale(1.04); }
}

/* Dark panels sit inset, like floating sheets */
.feedback,.contact,.site-footer { margin-left:12px; margin-right:12px; }
.feedback { border-radius:28px; }
.contact {
  border-radius:28px 28px 0 0;
  background:radial-gradient(640px 300px at 50% 0,rgba(255,225,77,.14),rgba(255,225,77,0) 70%),var(--ink);
}
.contact .button-marker { animation:ring 2.6s ease-out infinite; }
@keyframes ring {
  0% { box-shadow:0 0 0 0 rgba(255,225,77,.5); }
  70%,100% { box-shadow:0 0 0 16px rgba(255,225,77,0); }
}
.site-footer { border-radius:0 0 28px 28px; margin-bottom:12px; padding-bottom:0; overflow:hidden; }
.footer-wordmark {
  margin-top:36px;
  padding-bottom:6px;
  overflow:hidden;
  font-family:var(--font-display);
  font-weight:800;
  font-size:13.4vw;
  line-height:.82;
  letter-spacing:-.045em;
  white-space:nowrap;
  text-align:center;
  color:#1d1e21;
  -webkit-user-select:none;
  user-select:none;
}
@media(min-width:768px) {
  .feedback,.contact,.site-footer { margin-left:20px; margin-right:20px; }
  .feedback { border-radius:40px; }
  .contact { border-radius:40px 40px 0 0; }
  .site-footer { border-radius:0 0 40px 40px; margin-bottom:20px; }
  .ticker { padding:24px 0; }
  .ticker-item { font-size:22px; }
  .ticker-item i { margin:0 44px; }
}
@media(min-width:1024px) {
  .hero-bg { height:680px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}