:root {
  --bg: #f7f4ed;
  --bg2: #eef1e7;
  --surface: #fffdf8;
  --orange: #e86438;
  --orange2: #f28a62;
  --white: #253028;
  --text: #334139;
  --muted: #6f796f;
  --dim: #8b9389;
  --green: #708b6b;
  --border: rgba(42, 56, 46, .15);
  --glass: rgba(255, 253, 248, .88);
  --radius: 34px;
}

html { background: #f7f4ed; }
body {
  background: #f7f4ed;
  color: #334139;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
}
body::before {
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size: 120px;
  mix-blend-mode: multiply;
}

h1, h2, h3 {
  color: #26332b;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}
h1 span, h2 span { color: #6f7f70; }
.lead { color: #606d63; }
.eyebrow { color: #6e796f; letter-spacing: .13em; }
.eyebrow i { background: #e86438; box-shadow: none; }
.eyebrow .badge, .badge {
  background: #f8dfd4;
  border-color: #eab39d;
  color: #a84626;
}

.site-header { padding: 17px 0; }
.nav {
  background: rgba(247, 244, 237, .76);
  border-color: transparent;
  border-radius: 999px;
  backdrop-filter: blur(16px);
}
.site-header.scrolled .nav {
  background: rgba(255, 253, 248, .92);
  border-color: rgba(45, 59, 49, .12);
  box-shadow: 0 12px 35px rgba(51, 64, 54, .09);
}
.logo, .product-logo { color: #26332b; letter-spacing: .16em; }
.logo span, .product-logo span, .giant-logo span { color: #e86438; }
.nav-links a, .login { color: #536057; }
.nav-links a:hover, .login:hover { color: #e86438; }
.button {
  background: #e86438;
  border-color: #e86438;
  box-shadow: 0 10px 24px rgba(169, 75, 43, .16);
  border-radius: 999px;
  font-weight: 600;
}
.button:hover {
  box-shadow: 0 14px 28px rgba(169, 75, 43, .22);
  background: #d9562e;
}
.button-ghost {
  color: #334139;
  background: transparent;
  border-color: rgba(51, 65, 57, .22);
  box-shadow: none;
}

.hero {
  min-height: 880px;
  background:
    radial-gradient(ellipse at 90% 26%, rgba(229, 136, 102, .24), transparent 35%),
    radial-gradient(ellipse at 62% 88%, rgba(126, 153, 115, .20), transparent 33%),
    #f7f4ed;
}
.hero::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 330px;
  right: -90px;
  top: 90px;
  border-radius: 44% 56% 63% 37% / 45% 38% 62% 55%;
  background: #e9bca8;
  opacity: .5;
  transform: rotate(-9deg);
}
.hero::after { background: linear-gradient(transparent, #f7f4ed); }
.hero-glow {
  width: 420px;
  height: 420px;
  right: 25%;
  top: 280px;
  background: rgba(149, 170, 128, .22);
  filter: blur(95px);
}
.hero h1 { color: #26332b; }
.hero h1 span { color: #e86438; font-style: italic; }
.micro { color: #737d73; }
.micro span::before { color: #718b6c; }
.glass {
  background: rgba(255, 253, 248, .86);
  border-color: rgba(47, 62, 51, .13);
  box-shadow: 0 24px 70px rgba(53, 64, 54, .13);
  backdrop-filter: blur(15px);
}
.tablet {
  background: #303a32;
  box-shadow: -22px 35px 70px rgba(55, 65, 56, .19), 0 0 0 1px rgba(38, 49, 42, .18);
  border-radius: 38px 31px 39px 30px;
  transform: rotateY(-8deg) rotateZ(1.3deg);
}
.tablet-screen {
  background: #fbfaf5;
  color: #344038;
  border-radius: 25px 20px 24px 19px;
  background-image: none;
}
.tablet-top { color: #f8f5ec; }
.tablet-top .product-logo { color: white; }
.ready strong, .scan-copy strong { color: #2e3a32; }
.status-icon { background: #e3eadf; color: #5d7e5b; }
.scan-copy span, .ready small, .confirm-card small { color: #879086; }
.qr {
  background: white url("qr-zente.png") center / contain no-repeat !important;
  border: 8px solid white;
  image-rendering: pixelated;
}
.qr-wrap { border-radius: 20px 17px 19px 15px; box-shadow: 0 10px 25px rgba(49, 61, 51, .12); }
.scan-line { background: #e86438; box-shadow: 0 0 10px 3px rgba(232, 100, 56, .35); }
.mode-buttons button { background: #f2f0e9; color: #6e776f; border-color: #dedfd8; }
.mode-buttons button.active { background: #f7e1d7; color: #9a4529; border-color: #e8a78e; }
.confirm-card {
  background: #edf2e9;
  color: #304034;
  border-color: #b9ccb4;
  box-shadow: 0 16px 35px rgba(55, 71, 58, .16);
  animation: organic-confirm 7.2s steps(1, end) infinite;
}
@keyframes organic-confirm {
  0%, 45%, 73%, 100% { opacity: 0; transform: translate(-50%, 12px); }
  46%, 72% { opacity: 1; transform: translate(-50%, 0); }
}
.presence-card { color: #344038; transform: translateZ(50px) rotate(2deg); border-radius: 26px 21px 28px 19px; }
.presence-card strong b { color: #26332b; }
.floating-event { color: #344038; border-radius: 23px 19px 25px 18px; }
.avatar { background: #dfe7dc; color: #476046; }

.problem { background: linear-gradient(#f7f4ed, #eef1e7 52%, #f7f4ed); }
.transform-line { border-color: rgba(50, 65, 54, .14); border-radius: 40px 26px 40px 24px; background: rgba(255,255,255,.35); }
.old { color: #969a91; background: transparent; }
.new { background: #fffaf2; color: #344038; }
.new i { background: #e86438; box-shadow: none; }
.section-head > p, .section-head > div:last-child { color: #6c776e; }

.experiences { background: #f7f4ed; }
.experience-shell { border-color: rgba(45, 60, 49, .14); }
.role-tabs button { color: #7b857c; border-color: rgba(45, 60, 49, .14); }
.role-tabs button[aria-selected="true"] {
  color: #26332b;
  border-color: #e86438;
  background: linear-gradient(#f6e3d9, transparent);
}
.role-panel {
  background: #eef1e7;
  border-color: rgba(45, 60, 49, .14);
  border-radius: 0 0 46px 28px;
}
.role-kicker { color: #e86438; }
.role-desc { color: #68746b; }
.feature-list li::before { color: #e86438; }
.role-visual { background: radial-gradient(ellipse, rgba(232, 100, 56, .14), transparent 62%); }
.mini-window {
  background: #fffdf8;
  color: #344038;
  border-color: rgba(45, 60, 49, .14);
  box-shadow: 0 28px 60px rgba(61, 73, 62, .14);
  border-radius: 32px 23px 35px 25px;
}
.window-bar { border-color: #e8e7df; color: #7a847b; }
.window-bar i:nth-child(1) { background: #e69a7c; }
.window-bar i:nth-child(2) { background: #dfc47c; }
.window-bar i:nth-child(3) { background: #8eaa85; }
.visual-title { color: #2c3930; }
.mini-scan { border-radius: 23px 18px 22px 17px; box-shadow: 0 10px 30px rgba(59,72,61,.12); }

.how { background: #eef1e7; }
.step-icon {
  background: #fffdf8;
  border-color: rgba(49, 65, 53, .14);
  color: #566559;
  box-shadow: 0 12px 30px rgba(55, 67, 57, .08);
  border-radius: 44% 56% 52% 48% / 53% 40% 60% 47%;
}
.steps article:nth-of-type(2) .step-icon { color: #e86438; border-color: #e6b29d; box-shadow: none; }
.steps article:nth-of-type(3) .step-icon { color: #708b6b; }
.steps p { color: #6f7a71; }
.tech-note, .steps article > span { color: #7f897f; border-color: rgba(48,63,52,.13); }

.qr-security { background: #f7f4ed; }
.qr-stage { background: radial-gradient(ellipse, rgba(232,100,56,.14), transparent 60%); }
.qr-core { border-radius: 42% 58% 48% 52% / 53% 42% 58% 47%; box-shadow: 0 25px 60px rgba(63,75,64,.15); }
.ring { border-color: #e86438; border-left-color: transparent; border-radius: 45% 55% 48% 52%; }
.orbit { border-color: rgba(54,69,58,.13); }
.orbit span { background: #fffdf8; color: #647066; border-color: rgba(54,69,58,.14); }
.orbit-c span { color: #587355; }
.split-copy > p:not(.eyebrow) { color: #647067; }
.check-list li { color: #425046; border-color: rgba(50,65,54,.12); }
.check-list li::before { background: #f7dfd5; color: #d75a31; }

.dashboard-section { background: #eef1e7; }
.dashboard {
  background: #f5f1e7;
  color: #243028;
  border-color: rgba(46,60,50,.14);
  border-radius: 42px 28px 44px 25px;
  box-shadow: 0 45px 90px rgba(59,70,60,.16);
}
.dashboard aside { background: #334238; color: #c8d0c7; }
.dashboard aside nav b { background: #e9efe4; color: #304035; }
.dash-main h3 { color: #27332b; }
.dash-main header button, .stat-grid article, .dash-content > article { background: #fffdf8; border-color: #daddd4; }
.orange-bg { background: #f7ded2; color: #b44c2b; }
.green-bg { background: #dfead9; color: #4e704d; }
.incident { background: #f8e3da; }

.privacy { background: #f7f4ed; }
.face-ui { background: radial-gradient(ellipse, rgba(115,145,104,.17), transparent 62%); }
.face-frame {
  background: #e6ebdf;
  border-color: rgba(51,67,55,.14);
  border-radius: 44% 56% 41% 59% / 50% 43% 57% 50%;
}
.face-frame::before, .face-frame::after { border-color: rgba(57,75,61,.1); }
.face-outline { border-color: #93a291; }
.face-status { background: rgba(255,253,248,.92); color: #334139; border-color: rgba(49,64,53,.13); }
.face-status small { color: #788279; }
.legal-note { color: #747f76; border-color: #9da69c; }

.visitor-card {
  background: radial-gradient(ellipse at 84% 24%, rgba(232,100,56,.17), transparent 40%), #eef1e7;
  border-color: rgba(47,62,51,.13);
  border-radius: 55px 30px 60px 28px;
}
.visitor-card > div:first-child > p:not(.eyebrow) { color: #68746b; }
.inline-list { color: #59665c; }
.visitor-pass {
  background: #fffdf8;
  color: #26332b;
  border-radius: 48% 52% 45% 55% / 8% 8% 8% 8%;
  box-shadow: 0 28px 55px rgba(65,77,66,.14);
}
.visitor-pass h3 { color: #26332b; }
.visitor-pass > span { color: #4c6b4b; background: #e1eadc; }

.infrastructure { background: #f7f4ed; }
.stack > div {
  background: #fffdf8;
  border-color: rgba(47,62,51,.13);
  border-radius: 24px 17px 26px 18px;
  box-shadow: 0 8px 20px rgba(58,70,59,.05);
}
.stack span, .security-list small { color: #7b857c; }
.security-list li { border-color: rgba(47,62,51,.13); }
.security-list li > span, .text-link, .section-head a { color: #d65730; }

.use-cases { background: #eef1e7; }
.case-strip article {
  border-color: rgba(47,62,51,.13);
  background: #fffdf8;
  border-radius: 38px 22px 42px 24px;
}
.case-strip article:nth-child(2) { background: #f5ded3; }
.case-strip article:nth-child(3) { background: #e1e9dc; }
.case-strip article:nth-child(4) { background: #f2e8cc; }
.case-strip article:nth-child(5) { background: #e6e3ed; }
.case-strip p { color: #667168; }

.faq { background: #f7f4ed; }
.faq-grid > div:first-child > p:not(.eyebrow), .accordion details p { color: #6f7a71; }
.accordion details { border-color: rgba(47,62,51,.14); }
.accordion summary { color: #2f3c33; }
.accordion summary span { color: #e86438; }

.final-cta {
  background: radial-gradient(ellipse at 50% 80%, rgba(232,100,56,.16), transparent 37%), #eef1e7;
}
.final-cta .container > p:not(.eyebrow) { color: #6c776e; }
.cta-line { background: linear-gradient(90deg, transparent, #e86438, transparent); box-shadow: none; }
.giant-logo { color: rgba(50,66,54,.07); }

footer { background: #344238; border-color: rgba(255,255,255,.12); color: #f5f1e8; }
footer .logo { color: #fffaf2; }
.footer-grid p, .footer-grid a, .footer-grid button { color: #bdc7bc; }
.footer-bottom { color: #96a295; border-color: rgba(255,255,255,.12); }

.demo-modal {
  background: #fffdf8;
  color: #334139;
  border-color: rgba(47,62,51,.14);
  border-radius: 42px 28px 44px 25px;
  box-shadow: 0 35px 100px rgba(39,48,41,.25);
}
.demo-modal::backdrop { background: rgba(39,48,41,.55); }
.modal-copy { background: radial-gradient(ellipse at 20% 20%, rgba(232,100,56,.15), transparent 42%), #eef1e7; }
.modal-copy > p:not(.eyebrow), .modal-proof small { color: #68746b; }
.modal-proof > span { background: #dfe9da; color: #537451; }
.demo-modal input, .demo-modal select, .demo-modal textarea {
  background: #f7f4ed;
  color: #2f3c33;
  border-color: rgba(48,63,52,.17);
}
.demo-modal label { color: #56635a; }
.modal-close { background: #f1eee6; color: #334139; border-color: rgba(48,63,52,.14); }
.form-success > span { background: #dfe9da; color: #537451; }
.form-success p { color: #68746b; }

@media (max-width: 720px) {
  .nav { background: rgba(255,253,248,.9); border-color: rgba(47,62,51,.12); }
  .menu-btn span:not(.sr-only) { background: #334139; }
  .nav-menu { background: #fffdf8; border-color: rgba(47,62,51,.13); }
  .nav-links a { border-color: rgba(47,62,51,.12); }
  .hero h1 { font-size: 48px; }
  .hero::before { width: 250px; height: 200px; top: 40px; right: -100px; }
  .tablet { background: #334238; }
  .dashboard { box-shadow: 0 30px 60px rgba(59,70,60,.14); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-line, .ring, .face-scan { animation: none !important; }
}