/* ==========================================================================
   EliteMartLabs — Website Design System
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-variable.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root{
  --obsidian:#0b0b0a;
  --surface:#181714;
  --cream:#f1e7d2;
  --champagne:#c6a46d;
  --bronze:#7f6643;
  --stone:#a79b87;
  --navy-950:#080807;
  --navy-900:var(--obsidian);
  --navy-850:#0f0e0c;
  --navy-800:var(--surface);
  --navy-700:#211e19;
  --line-soft: rgba(241,231,210,0.09);
  --line-soft-2: rgba(241,231,210,0.14);
  --blue:var(--champagne);
  --blue-2:#d8bd8d;
  --purple:#b8945f;
  --purple-2:var(--bronze);
  --grad: linear-gradient(92deg, var(--blue) 0%, #c6a46d 55%, var(--purple-2) 100%);
  --grad-soft: linear-gradient(135deg, rgba(216,195,157,0.20), rgba(216,195,157,0.20));
  --white:#f7eedf;
  --ink-900:#0f0e0c;
  --ink-700:#2a241d;
  --muted:var(--stone);
  --muted-2:#8f8573;
  --muted-dark:#776e60;
  --card-light:#f1e7d2;
  --card-light-2:#f7eedf;
  --border-light:#d8c7a8;
  --container: 1180px;
  --radius: 18px;
  --shadow-lg: 0 30px 60px -24px rgba(42,36,29,0.35);
  --shadow-sm: 0 10px 24px -14px rgba(42,36,29,0.25);
  --focus-ring: #e2d0ae;
  --header-h: 74px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--navy-900);
  color: var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,
.headline-xl,.headline-lg,.headline-md,
.wordmark,.eyebrow,.btn,.nav-links,.mobile-nav-links{
  font-family:'Space Grotesk', 'IBM Plex Sans', sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- accessibility helpers ---------- */
::selection{ background: rgba(216,195,157,0.35); color:#f7eedf; }
:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}
/* keep the pill/card shapes readable when focus lands on them */
.btn:focus-visible, .contact-pill:focus-visible, .footer-social a:focus-visible{ outline-offset: 4px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline-offset: 0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:12px; left:12px; z-index:300;
  transform: translateY(-160%);
  background: var(--grad); color:#f7eedf; font-weight:800; font-size:14px;
  padding:12px 20px; border-radius:999px;
  box-shadow: 0 16px 34px -12px rgba(216,195,157,0.6);
  transition: transform .2s ease;
}
.skip-link:focus{ transform: translateY(0); outline:none; }

.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
@media (max-width:560px){
  .container{ padding-left:18px; padding-right:18px; }
}

/* ---------- backgrounds ---------- */
.bg-dark{
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(216,195,157,0.22), transparent 60%),
    radial-gradient(900px 650px at -10% 108%, rgba(216,195,157,0.18), transparent 55%),
    linear-gradient(165deg, var(--navy-950) 0%, var(--navy-850) 45%, var(--navy-900) 100%);
  position:relative;
}
.bg-light{
  background:
    radial-gradient(900px 600px at 90% -10%, rgba(216,195,157,0.08), transparent 60%),
    linear-gradient(160deg, #f5ecdc 0%, #eadfc9 100%);
  position:relative;
  color: var(--ink-900);
}
.grid-lines{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(241,231,210,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,231,210,0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 60% 20%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 60% 20%, black, transparent 75%);
}
.grid-lines-light{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(24,23,20,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,23,20,0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 60% 20%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 60% 20%, black, transparent 72%);
}
.glow-blob{ position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; }

/* ---------- typography ---------- */
.eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.eyebrow-row.center{ justify-content:center; }
.bar{ width:28px; height:2px; background: var(--grad); border-radius:2px; flex-shrink:0; }
.eyebrow{ font-size:13px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#ddc69e; }
.on-light .eyebrow, .bg-light .eyebrow{ color:#7f6643; }

h1,h2,h3,h4{ font-weight:800; line-height:1.12; letter-spacing:-0.01em; }
.accent{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.headline-xl{ font-size: clamp(34px, 5.2vw, 64px); margin-bottom:22px; }
.headline-lg{ font-size: clamp(28px, 3.6vw, 44px); margin-bottom:18px; }
.headline-md{ font-size: clamp(22px, 2.6vw, 30px); margin-bottom:14px; }
.subhead{ font-size: clamp(15px, 1.4vw, 18.5px); font-weight:500; color: var(--muted); line-height:1.6; max-width:560px; }
.bg-light .subhead, .on-light .subhead{ color: var(--muted-dark); }
p{ line-height:1.7; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  font-size:14.5px; font-weight:800; letter-spacing:0.03em;
  border:none; white-space:nowrap;
}
.btn-primary{
  background: var(--grad); color:#f7eedf;
  box-shadow: 0 16px 34px -12px rgba(216,195,157,0.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(216,195,157,0.65); }
.btn-outline{
  background: transparent; color:#f7eedf;
  border:1.5px solid var(--line-soft-2);
  transition: background .2s ease, border-color .2s ease;
}
.btn-outline:hover{ background: rgba(241,231,210,0.06); border-color: rgba(241,231,210,0.3); }
.on-light .btn-outline, .bg-light .btn-outline{
  color: var(--ink-900); border-color: rgba(24,23,20,0.14);
}
.on-light .btn-outline:hover, .bg-light .btn-outline:hover{ background: rgba(24,23,20,0.04); }
.btn-sm{ padding:11px 20px; font-size:13px; }

/* ---------- nav ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(24,23,20,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:32px; width:auto; }
.brand .wordmark{ font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:14.5px; font-weight:600; color: var(--muted); transition: color .2s ease; position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:#f7eedf; }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--grad); border-radius:2px;
}
.nav-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:12px; background: rgba(241,231,210,0.06);
  border:1px solid var(--line-soft); align-items:center; justify-content:center; flex-shrink:0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ display:none; }
.nav-toggle svg{ width:20px; height:20px; }

.mobile-nav{
  display:none; position:fixed; inset:0; z-index:200;
  background: var(--navy-950);
}
.mobile-nav.open{ display:block; }
.mobile-nav-inner{ padding:20px 24px; height:100%; overflow-y:auto; }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; }
.mobile-nav-close{
  width:42px; height:42px; border-radius:12px; background: rgba(241,231,210,0.06);
  border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center;
}
.mobile-nav-close svg{ width:20px; height:20px; }
.mobile-nav-links a{
  display:block; font-size:26px; font-weight:800; padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.mobile-nav-links a.active{ color:#e2d0ae; }
.mobile-nav .btn{ margin-top:28px; width:100%; justify-content:center; }
.mobile-nav-meta{ margin-top:36px; display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:14px; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:560px){
  .nav-row{ padding:10px 18px; gap:14px; }
  .brand{ gap:8px; }
  .brand img{ height:28px; }
  .brand .wordmark{ font-size:17px; }
  .nav-toggle,.mobile-nav-close{ width:44px; height:44px; border-radius:11px; }
}

/* ---------- page header banner (subpages) ---------- */
.page-banner{
  position:relative; padding: 132px 0 64px; text-align:center; overflow:hidden;
}
.page-banner h1{ font-size: clamp(32px, 5vw, 52px); margin-bottom:14px; }
.breadcrumb{ display:flex; align-items:center; justify-content:center; gap:8px; color: var(--muted); font-size:14px; font-weight:600; }
.breadcrumb .accent{ font-weight:700; }
.page-banner .node-field{ position:absolute; inset:0; opacity:0.5; }

/* Subpage mastheads use a compact editorial scale on phones. The desktop banner
   keeps its cinematic spacing, while mobile gets to the page content sooner. */
@media (max-width:700px){
  .page-banner{ padding:64px 0 42px; }
  .page-banner h1{
    margin-bottom:10px;
    font-size:clamp(30px,9vw,38px);
    letter-spacing:-.025em;
  }
  .breadcrumb{ gap:7px; font-size:13px; }
}
@media (max-width:360px){
  .brand img{ height:26px; }
  .brand .wordmark{ font-size:16px; }
  .page-banner{ padding:56px 0 38px; }
  .page-banner h1{ font-size:30px; }
}

/* ---------- sections ---------- */
section{ position:relative; }
.section-pad{ padding: 88px 0; }
.section-pad-sm{ padding: 56px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- hero ---------- */
.hero{ padding: 156px 0 100px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }
.hero-visual{ position:relative; }
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; width:100%; max-width:420px; margin:0 auto; }
}

/* abstract hero graphic */
.hero-art{
  position:relative; aspect-ratio: 1/1; border-radius:28px;
  background: linear-gradient(160deg, rgba(216,195,157,0.16), rgba(216,195,157,0.10));
  border:1px solid var(--line-soft-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-art .core{
  width:58%; aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(241,231,210,0.18), transparent 60%), var(--grad);
  box-shadow: 0 40px 100px -20px rgba(216,195,157,0.55);
  display:flex; align-items:center; justify-content:center;
}
.hero-art .core img{ width:44%; height:auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.25)); }
.hero-art .ring{ position:absolute; border-radius:50%; border:1.5px dashed rgba(241,231,210,0.18); }
.hero-art .ring.r1{ inset:6%; }
.hero-art .ring.r2{ inset:16%; }
.hero-art .node{
  position:absolute; width:46px; height:46px; border-radius:14px;
  background: rgba(241,231,210,0.06); border:1px solid var(--line-soft-2);
  display:flex; align-items:center; justify-content:center; color:#ddc69e;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.4);
}

/* ---------- About: luxury service solar system ---------- */
.about-intro-section{
  padding-top:104px;
  overflow:hidden;
}
.about-intro-grid{
  grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);
  gap:clamp(52px,6vw,96px);
}
.about-intro-copy{ max-width:610px; }
.about-cosmos-wrap{
  width:100%;
  max-width:640px;
  justify-self:end;
}
.service-cosmos{
  --cosmos-light-x:72%;
  --cosmos-light-y:20%;
  --cosmos-tilt-x:0deg;
  --cosmos-tilt-y:0deg;
  --planet-size:clamp(64px,7.2vw,88px);
  --outer-x:clamp(120px,16.8vw,218px);
  --outer-y:clamp(74px,8.8vw,116px);
  --inner-x:clamp(100px,13vw,170px);
  --inner-y:clamp(60px,7vw,90px);
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:1/1;
  border:1px solid rgba(234,223,201,.19);
  border-radius:clamp(24px,3vw,38px);
  overflow:hidden;
  background:
    radial-gradient(circle 42% at var(--cosmos-light-x) var(--cosmos-light-y),rgba(216,195,157,.22),transparent 74%),
    radial-gradient(circle 44% at 10% 92%,rgba(167,155,135,.12),transparent 76%),
    linear-gradient(145deg,rgba(42,36,29,.96),rgba(24,23,20,.99) 48%,rgba(42,36,29,.98));
  box-shadow:
    0 46px 100px -46px rgba(0,0,0,.88),
    0 0 80px -42px rgba(216,195,157,.75),
    inset 0 1px 0 rgba(241,231,210,.11),
    inset 0 -40px 90px rgba(11,11,10,.46);
  contain:layout paint;
}
.service-cosmos::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:24;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(118deg,rgba(241,231,210,.13),transparent 16%,transparent 70%,rgba(216,195,157,.07)),
    radial-gradient(circle at 50% 50%,transparent 50%,rgba(11,11,10,.36) 100%);
  box-shadow:inset 0 0 0 1px rgba(241,231,210,.025);
}
.service-cosmos::after{
  content:'';
  position:absolute;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  background:conic-gradient(from 210deg at 50% 50%,transparent,rgba(216,195,157,.08),transparent 27%,rgba(167,155,135,.07),transparent 58%);
  animation:cosmosAtmosphere 24s linear infinite;
}
.cosmos-stars{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cosmos-stars i{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#f1e7d2;
  box-shadow:0 0 8px rgba(234,223,201,.9);
  opacity:.42;
  animation:cosmosTwinkle 4.8s ease-in-out infinite;
}
.cosmos-stars i:nth-child(1){ left:9%; top:19%; animation-delay:-.8s; }
.cosmos-stars i:nth-child(2){ left:21%; top:12%; width:3px; height:3px; animation-delay:-2.1s; }
.cosmos-stars i:nth-child(3){ left:38%; top:19%; animation-delay:-3.4s; }
.cosmos-stars i:nth-child(4){ left:66%; top:10%; width:3px; height:3px; animation-delay:-1.4s; }
.cosmos-stars i:nth-child(5){ left:88%; top:23%; animation-delay:-3.8s; }
.cosmos-stars i:nth-child(6){ left:14%; top:47%; width:3px; height:3px; animation-delay:-2.7s; }
.cosmos-stars i:nth-child(7){ left:91%; top:52%; animation-delay:-.3s; }
.cosmos-stars i:nth-child(8){ left:7%; top:76%; animation-delay:-4.1s; }
.cosmos-stars i:nth-child(9){ left:26%; top:88%; animation-delay:-1.9s; }
.cosmos-stars i:nth-child(10){ left:54%; top:83%; width:3px; height:3px; animation-delay:-3s; }
.cosmos-stars i:nth-child(11){ left:78%; top:91%; animation-delay:-.9s; }
.cosmos-stars i:nth-child(12){ left:94%; top:78%; width:3px; height:3px; animation-delay:-2.4s; }
.cosmos-aurora{
  position:absolute;
  z-index:1;
  width:76%;
  height:35%;
  left:12%;
  top:31%;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(167,155,135,.08),rgba(216,195,157,.15),rgba(167,155,135,.06));
  filter:blur(44px);
  transform:rotate(-12deg);
  animation:cosmosAurora 7.5s ease-in-out infinite;
}
.cosmos-status{
  position:absolute;
  z-index:30;
  top:22px;
  left:22px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  padding:8px 12px;
  border:1px solid rgba(234,223,201,.13);
  border-radius:999px;
  color:rgba(241,231,210,.74);
  background:rgba(24,23,20,.48);
  box-shadow:inset 0 1px 0 rgba(241,231,210,.06),0 12px 32px rgba(0,0,0,.2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.cosmos-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d8c39d;
  box-shadow:0 0 12px rgba(216,195,157,.95);
}
.cosmos-scene{
  position:absolute;
  inset:0;
  z-index:3;
  perspective:1100px;
  transform-style:preserve-3d;
  transform:rotateX(var(--cosmos-tilt-x)) rotateY(var(--cosmos-tilt-y));
  transition:transform .22s ease-out;
  will-change:transform;
}
.cosmos-orbit{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  border:1px solid rgba(234,223,201,.15);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-6deg);
  box-shadow:0 0 28px rgba(216,195,157,.035),inset 0 0 24px rgba(216,195,157,.025);
}
.cosmos-orbit::before,
.cosmos-orbit::after{
  content:'';
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#eadfc9;
  box-shadow:0 0 12px rgba(234,223,201,.9);
}
.cosmos-orbit::before{ left:12%; top:8%; }
.cosmos-orbit::after{ right:8%; bottom:15%; opacity:.6; }
.cosmos-orbit--outer{ width:78%; height:43%; }
.cosmos-orbit--inner{
  width:60%;
  height:31%;
  border-color:rgba(234,223,201,.105);
  transform:translate(-50%,-50%) rotate(7deg);
}
.cosmos-sun{
  position:absolute;
  left:50%;
  top:50%;
  z-index:7;
  width:clamp(112px,12vw,172px);
  aspect-ratio:1;
  translate:-50% -50%;
  transform-style:preserve-3d;
  animation:cosmosSunFloat 6.4s ease-in-out infinite;
}
.cosmos-sun__corona{
  position:absolute;
  inset:-42%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(216,195,157,.38) 0%,rgba(216,195,157,.18) 32%,rgba(167,155,135,.07) 53%,transparent 72%);
  filter:blur(10px);
  animation:cosmosCorona 5.8s ease-in-out infinite;
}
.cosmos-sun__ring{
  position:absolute;
  inset:-12%;
  border:1px solid rgba(241,231,210,.24);
  border-left-color:transparent;
  border-bottom-color:rgba(216,195,157,.08);
  border-radius:50%;
  transform:rotateX(68deg) rotateZ(0deg);
  animation:cosmosSunRing 10s linear infinite;
}
.cosmos-sun__ring--two{
  inset:-24%;
  border-color:rgba(216,195,157,.11);
  border-right-color:transparent;
  transform:rotateY(67deg) rotateZ(0deg);
  animation-name:cosmosSunRingVertical;
  animation-duration:13s;
  animation-direction:reverse;
}
.cosmos-sun__sphere{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(241,231,210,.38);
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 31% 24%,rgba(241,231,210,.78),rgba(241,231,210,.22) 12%,transparent 30%),
    radial-gradient(circle at 34% 31%,#d8c39d 0%,#d8c39d 27%,#a79b87 57%,#4a3f31 84%,#2a241d 100%);
  box-shadow:
    0 0 30px rgba(216,195,157,.72),
    0 0 86px rgba(167,155,135,.48),
    0 30px 70px -24px rgba(0,0,0,.9),
    inset 13px 14px 24px rgba(241,231,210,.13),
    inset -24px -28px 48px rgba(42,36,29,.67),
    inset 0 0 0 5px rgba(241,231,210,.035);
}
.cosmos-sun__sphere::before{
  content:'';
  position:absolute;
  inset:7%;
  border:1px solid rgba(241,231,210,.1);
  border-radius:50%;
}
.cosmos-sun__shine{
  position:absolute;
  width:74%;
  height:28%;
  left:2%;
  top:7%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(241,231,210,.24),transparent);
  filter:blur(7px);
  transform:rotate(-28deg);
}
.cosmos-sun img{
  position:relative;
  z-index:2;
  width:56%;
  height:auto;
  filter:drop-shadow(0 8px 10px rgba(11,11,10,.55)) drop-shadow(0 0 14px rgba(234,223,201,.42));
  transform:translateZ(26px);
  animation:cosmosLogoBreathe 5.8s ease-in-out infinite;
}
.service-planet{
  --orbit-x:var(--outer-x);
  --orbit-y:var(--outer-y);
  --orbit-duration:26s;
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:var(--planet-size);
  aspect-ratio:1;
  translate:-50% -50%;
  color:#f1e7d2;
  text-decoration:none;
  transform-style:preserve-3d;
  animation:servicePlanetOrbit var(--orbit-duration) linear infinite;
  animation-delay:var(--orbit-delay);
  will-change:transform,filter;
}
.service-planet--inner{
  --orbit-x:var(--inner-x);
  --orbit-y:var(--inner-y);
  --orbit-duration:20s;
}
.service-planet__glass{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border:1px solid rgba(241,231,210,.32);
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 29% 21%,rgba(241,231,210,.68) 0%,rgba(241,231,210,.2) 11%,transparent 31%),
    radial-gradient(circle at 38% 34%,rgba(216,195,157,.38),transparent 49%),
    linear-gradient(145deg,rgba(216,195,157,.32),rgba(167,155,135,.25) 48%,rgba(42,36,29,.88));
  box-shadow:
    0 18px 38px -12px rgba(0,0,0,.78),
    0 0 28px rgba(216,195,157,.28),
    inset 10px 11px 18px rgba(241,231,210,.11),
    inset -17px -20px 30px rgba(24,23,20,.66),
    inset 0 0 0 4px rgba(241,231,210,.025);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.service-planet__glass::before{
  content:'';
  position:absolute;
  width:76%;
  height:30%;
  left:2%;
  top:5%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(241,231,210,.21),transparent);
  filter:blur(4px);
  transform:rotate(-25deg);
}
.service-planet__glass::after{
  content:'';
  position:absolute;
  inset:auto 16% 8%;
  height:12%;
  border-radius:50%;
  background:rgba(24,23,20,.54);
  filter:blur(7px);
}
.service-planet__inner-ring{
  position:absolute;
  inset:8%;
  border:1px solid rgba(241,231,210,.12);
  border-radius:50%;
}
.service-planet__icon{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58%;
  aspect-ratio:1;
  border:1px solid rgba(241,231,210,.13);
  border-radius:32%;
  background:linear-gradient(145deg,rgba(241,231,210,.11),rgba(241,231,210,.025));
  box-shadow:inset 0 1px 0 rgba(241,231,210,.1),0 9px 20px rgba(11,11,10,.3);
  color:#f1e7d2;
  filter:drop-shadow(0 0 7px rgba(234,223,201,.62));
  transform:translateZ(18px);
}
.service-planet__icon svg{ width:58%; height:58%; }
.service-planet__label{
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  translate:-50% 0;
  min-width:max-content;
  padding:5px 9px;
  border:1px solid rgba(234,223,201,.14);
  border-radius:999px;
  color:rgba(241,231,210,.88);
  background:rgba(24,23,20,.72);
  box-shadow:0 8px 20px rgba(0,0,0,.28),inset 0 1px 0 rgba(241,231,210,.055);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:9px;
  font-weight:800;
  letter-spacing:.075em;
  line-height:1;
  text-transform:uppercase;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.service-planet:hover,
.service-planet:focus-visible{ animation-play-state:paused; z-index:18 !important; outline:none; }
.service-planet:hover .service-planet__glass,
.service-planet:focus-visible .service-planet__glass{
  transform:translateZ(30px) scale(1.1);
  border-color:rgba(241,231,210,.64);
  box-shadow:
    0 24px 50px -15px rgba(0,0,0,.82),
    0 0 38px rgba(216,195,157,.68),
    inset 11px 12px 20px rgba(241,231,210,.16),
    inset -18px -22px 32px rgba(24,23,20,.68),
    0 0 0 4px rgba(216,195,157,.11);
}
.service-planet:hover .service-planet__label,
.service-planet:focus-visible .service-planet__label{
  color:#f7eedf;
  border-color:rgba(241,231,210,.34);
  background:rgba(42,36,29,.9);
}
.cosmos-legend{
  position:absolute;
  z-index:30;
  left:22px;
  right:22px;
  bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:rgba(216,195,157,.62);
  font-size:9px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.cosmos-legend span{ display:inline-flex; align-items:center; gap:7px; }
.cosmos-legend i{ width:5px; height:5px; border-radius:50%; background:#d8c39d; box-shadow:0 0 9px rgba(216,195,157,.8); }
.cosmos-legend b{ color:#eadfc9; font-size:12px; }
.js .service-cosmos:not(.is-cosmos-active) .service-planet,
.js .service-cosmos:not(.is-cosmos-active)::after,
.js .service-cosmos:not(.is-cosmos-active) .cosmos-aurora,
.js .service-cosmos:not(.is-cosmos-active) .cosmos-stars i,
.js .service-cosmos:not(.is-cosmos-active) .cosmos-sun,
.js .service-cosmos:not(.is-cosmos-active) .cosmos-sun__corona,
.js .service-cosmos:not(.is-cosmos-active) .cosmos-sun__ring,
.js .service-cosmos:not(.is-cosmos-active) .cosmos-sun img{ animation-play-state:paused; }

@keyframes servicePlanetOrbit{
  0%,100%{
    z-index:3;
    opacity:.66;
    filter:saturate(.76) brightness(.78) blur(.25px);
    transform:translate3d(0,calc(0px - var(--orbit-y)),-125px) scale(.72);
  }
  25%{
    z-index:5;
    opacity:.86;
    filter:saturate(.92) brightness(.92);
    transform:translate3d(var(--orbit-x),0,-20px) scale(.9);
  }
  49%{ z-index:12; }
  50%{
    z-index:12;
    opacity:1;
    filter:saturate(1.08) brightness(1.08);
    transform:translate3d(0,var(--orbit-y),125px) scale(1.12);
  }
  75%{
    z-index:8;
    opacity:.9;
    filter:saturate(.96) brightness(.96);
    transform:translate3d(calc(0px - var(--orbit-x)),0,20px) scale(.92);
  }
}
@keyframes servicePlanetOrbitMobile{
  0%,100%{
    z-index:3;
    opacity:.7;
    filter:saturate(.82) brightness(.84);
    transform:translate(0,calc(0px - var(--orbit-y))) scale(.76);
  }
  25%{
    z-index:5;
    opacity:.88;
    filter:saturate(.94) brightness(.94);
    transform:translate(var(--orbit-x),0) scale(.91);
  }
  49%{ z-index:12; }
  50%{
    z-index:12;
    opacity:1;
    filter:saturate(1.04) brightness(1.04);
    transform:translate(0,var(--orbit-y)) scale(1.08);
  }
  75%{
    z-index:8;
    opacity:.92;
    filter:saturate(.98) brightness(.98);
    transform:translate(calc(0px - var(--orbit-x)),0) scale(.93);
  }
}
@keyframes cosmosSunFloat{
  0%,100%{ transform:translate3d(0,0,22px) scale(1); }
  50%{ transform:translate3d(0,-4px,28px) scale(1.018); }
}
@keyframes cosmosCorona{
  0%,100%{ opacity:.72; transform:scale(.94); }
  50%{ opacity:1; transform:scale(1.08); }
}
@keyframes cosmosSunRing{ to{ transform:rotateX(68deg) rotateZ(360deg); } }
@keyframes cosmosSunRingVertical{ to{ transform:rotateY(67deg) rotateZ(360deg); } }
@keyframes cosmosSunRingMobile{ to{ transform:rotate(360deg); } }
@keyframes cosmosLogoBreathe{
  0%,100%{ transform:translateZ(26px) scale(1); }
  50%{ transform:translateZ(31px) scale(1.035); }
}
@keyframes cosmosAtmosphere{ to{ transform:rotate(360deg); } }
@keyframes cosmosAurora{
  0%,100%{ opacity:.6; transform:translate3d(-3%,0,0) rotate(-12deg) scale(.96); }
  50%{ opacity:1; transform:translate3d(3%,-3%,0) rotate(-7deg) scale(1.06); }
}
@keyframes cosmosTwinkle{
  0%,100%{ opacity:.22; transform:scale(.75); }
  50%{ opacity:.8; transform:scale(1.25); }
}

@media (max-width:1180px){
  .about-intro-grid{ grid-template-columns:minmax(0,.94fr) minmax(440px,1.06fr); gap:46px; }
}
@media (max-width:980px){
  .about-intro-section{ padding-top:78px; }
  .about-intro-grid{ grid-template-columns:1fr; gap:58px; }
  /* The generic .hero-visual rule moves artwork above copy on small screens.
     About needs the opposite hierarchy: explain the story first, then reveal the cosmos. */
  .about-intro-copy{ max-width:680px; order:0; }
  .about-cosmos-wrap{ max-width:590px; justify-self:center; order:1; }
}
@media (max-width:700px){
  /* Mobile Safari can tear transparent images when nested animated 3D layers,
     filters and circular overflow are composited together. Preserve the orbit
     illusion with 2D scale/lighting and keep the logo on one stable layer. */
  .cosmos-scene{
    perspective:none;
    transform:none !important;
    transform-style:flat;
    will-change:auto;
  }
  .cosmos-sun{
    transform-style:flat;
    animation:none;
    will-change:auto;
  }
  .cosmos-sun__sphere{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-mask-image:-webkit-radial-gradient(white,black);
    transform:translate3d(0,0,0);
  }
  .cosmos-sun__ring{
    transform:rotate(0deg);
    animation-name:cosmosSunRingMobile;
    animation-duration:14s;
  }
  .cosmos-sun__ring--two{
    transform:rotate(0deg);
    animation-name:cosmosSunRingMobile;
    animation-duration:18s;
    animation-direction:reverse;
  }
  .cosmos-sun img{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    animation:none;
    transform:none;
    filter:none;
    will-change:auto;
  }
  .service-planet{
    transform-style:flat;
    animation-name:servicePlanetOrbitMobile;
  }
  .service-planet__glass{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .service-planet__icon{ transform:none; }
  .service-planet:focus-visible .service-planet__glass{ transform:scale(1.07); }
}
@media (max-width:560px){
  .about-intro-section{ padding-top:48px; padding-bottom:68px; }
  .about-intro-grid{ gap:36px; }
  .about-intro-copy .eyebrow-row{ margin-bottom:16px; }
  .about-intro-copy .headline-lg{ margin-bottom:16px; }
  .service-cosmos{
    --planet-size:clamp(60px,18vw,72px);
    --outer-x:clamp(116px,32vw,150px);
    --outer-y:clamp(72px,20vw,94px);
    --inner-x:clamp(92px,25vw,120px);
    --inner-y:clamp(56px,15vw,72px);
    border-radius:24px;
  }
  .cosmos-status{ top:14px; left:14px; min-height:28px; padding:7px 10px; font-size:8px; }
  .cosmos-sun{ width:clamp(106px,30vw,128px); }
  .cosmos-legend{ left:14px; right:14px; bottom:12px; font-size:7.5px; }
  .cosmos-legend span:last-child{ display:none; }
  .service-planet__label{ top:calc(100% + 6px); padding:4px 7px; font-size:7.5px; }
  .service-planet__icon svg{ width:55%; height:55%; }
}
@media (max-width:360px){
  .service-cosmos{
    --planet-size:58px;
    --outer-x:108px;
    --outer-y:68px;
    --inner-x:86px;
    --inner-y:53px;
  }
  .cosmos-status{ max-width:calc(100% - 28px); letter-spacing:.055em; }
  .cosmos-sun{ width:101px; }
}

/* ---------- interactive hero showcase (home) ---------- */
:root{
  --win-radius: 14px;
  --win-shadow: 0 34px 80px -30px rgba(0,0,0,0.8);
}
.hero-home{
  --hero-pointer-x:78%;
  --hero-pointer-y:22%;
  padding:78px 0 66px; min-height:calc(100svh - var(--header-h));
}
.hero-home::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle 300px at var(--hero-pointer-x) var(--hero-pointer-y),rgba(216,195,157,.2),rgba(216,195,157,.08) 42%,transparent 72%);
}
.hero-home > .container{ z-index:1; }
.hero-home > .grid-lines, .hero-home > .glow-blob{ z-index:0; }
.hero-grid.home{ grid-template-columns: minmax(0,.94fr) minmax(430px,1.06fr); gap:48px; }
.hero-copy{ max-width:570px; position:relative; z-index:2; }
.hero-copy .headline-xl{
  max-width:620px; margin-bottom:20px;
  font-size:clamp(48px,5.5vw,72px); line-height:.99; letter-spacing:-.055em;
}
.hero-line{ display:block; overflow:hidden; padding-bottom:.04em; margin-bottom:-.04em; }
.hero-line > span{ display:inline-block; }
.hero-copy .subhead{ max-width:550px; font-size:clamp(15px,1.3vw,17px); line-height:1.66; }
.hero-home .eyebrow{ font-size:12px; letter-spacing:.16em; color:#eadfc9; }
.hero-home .eyebrow-row{ margin-bottom:20px; }
.hero-home .btn-lg{ padding:15px 22px; border-radius:14px; font-size:14px; }
.hero-home .hero-cta-row{ gap:12px; margin-top:30px; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:30px; }
.hero-trust li{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:#d8c39d; }
.hero-trust li svg{ width:17px; height:17px; padding:2px; color:#eadfc9; border:1px solid rgba(216,195,157,.32); border-radius:50%; flex-shrink:0; }

.hero-showcase{
  --hero-card-x:72%;
  --hero-card-y:20%;
  --hero-tilt-x:0deg;
  --hero-tilt-y:0deg;
  --hero-shadow-x:0px;
  --hero-shadow-y:34px;
  position:relative; min-width:0;
}
.hero-showcase::before{
  content:''; position:absolute; inset:18% 3% -5%; z-index:-1; border-radius:50%;
  background:rgba(216,195,157,.2); filter:blur(58px); pointer-events:none;
}
.hero-showcase-shell{
  padding:11px; border:1px solid rgba(234,223,201,.15); border-radius:22px;
  background:radial-gradient(circle at var(--hero-card-x) var(--hero-card-y),rgba(216,195,157,.14),transparent 34%),rgba(24,23,20,.92);
  box-shadow:var(--hero-shadow-x) var(--hero-shadow-y) 90px -20px rgba(0,0,0,.5),0 0 0 1px rgba(241,231,210,.025) inset;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform:perspective(1100px) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transform-style:preserve-3d; will-change:transform;
  transition:transform .14s ease-out, box-shadow .18s ease-out;
}
.hero-showcase-head{
  min-height:47px; padding:0 9px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line-soft); font-size:12px;
}
.hero-showcase-head strong{ font-weight:700; }
.hero-interaction-hint{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; white-space:nowrap; }
.hero-interaction-hint i{ width:6px; height:6px; border-radius:50%; background:#58d6a5; box-shadow:0 0 12px #58d6a5; }
.hero-hint-touch{ display:none; }

.hero-tabs{
  display:flex; gap:6px; margin:10px 0; padding:4px;
  background:rgba(241,231,210,.025); border:1px solid var(--line-soft); border-radius:12px;
}
.hero-tab{
  flex:1; min-width:0; border:1px solid transparent; background:transparent; color:var(--muted-2);
  font-size:12.5px; font-weight:700; padding:9px 5px; border-radius:9px;
  transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-tab:hover{ color:#f7eedf; }
.hero-tab.is-active{
  color:#f7eedf; border-color:rgba(234,223,201,.14);
  background:linear-gradient(105deg,rgba(216,195,157,.42),rgba(42,36,29,.96));
  box-shadow:0 8px 22px -14px rgba(216,195,157,.9);
}
.hero-tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

.hero-preview{
  min-height:430px; position:relative; overflow:hidden; padding:19px;
  border:1px solid var(--line-soft); border-radius:16px;
  background:radial-gradient(circle at 82% 8%,rgba(216,195,157,.2),transparent 34%),linear-gradient(150deg,#2a241d,#181714);
}
.hero-preview-copy{ position:relative; z-index:2; max-width:390px; }
.hero-preview-tag{ display:block; color:#eadfc9; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-preview-title{ margin:8px 0 6px; font-size:clamp(22px,2vw,28px); line-height:1.08; letter-spacing:-.035em; }
.hero-caption{ min-height:38px; margin:0; color:var(--muted); font-size:12.5px; font-weight:500; line-height:1.5; text-align:left; }

.hero-window{
  position:relative; margin-top:17px; border-radius:var(--win-radius); overflow:hidden;
  background:#0f0e0c; border:1px solid rgba(241,231,210,.16);
  box-shadow: var(--win-shadow), 0 0 0 1px rgba(241,231,210,0.04) inset;
}
.hero-window-bar{
  display:flex; align-items:center; gap:12px; min-height:36px; padding:8px 12px;
  background:linear-gradient(180deg,rgba(241,231,210,.08),rgba(241,231,210,.025));
  border-bottom:1px solid var(--line-soft);
}
.win-dots{ display:flex; gap:6px; flex-shrink:0; }
.win-dots i{ width:8px; height:8px; border-radius:50%; display:block; }
.win-dots i:nth-child(1){ background:#ff5f57; }
.win-dots i:nth-child(2){ background:#febc2e; }
.win-dots i:nth-child(3){ background:#28c840; }
.win-url{
  display:inline-flex; align-items:center; gap:7px; min-width:0;
  font-size:10px; font-weight:600; color: var(--muted);
  background: rgba(241,231,210,0.05); border:1px solid var(--line-soft);
  border-radius:999px; padding:4px 11px; margin-left:2px;
}
.win-url svg{ color:#8f8573; flex-shrink:0; }
.win-url-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hero-screen{ position:relative; aspect-ratio:16/8.7; background:#0f0e0c; }
/* Outgoing panel hides instantly; incoming fades up from the dark backdrop —
   avoids a muddy cross-fade blend of two different mockups. */
.hero-panel{ position:absolute; inset:0; opacity:0; visibility:hidden; }
.hero-panel.is-active{ opacity:1; visibility:visible; animation: heroPanelIn .35s ease; }
.hero-panel[hidden]{ display:none; }
@keyframes heroPanelIn{ from{ opacity:0; } to{ opacity:1; } }
.hero-panel:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
.hero-panel-inner{ position:absolute; inset:0; }

.hero-outcome{
  position:absolute; right:3px; bottom:34px; z-index:5; min-width:142px; padding:13px;
  border:1px solid rgba(234,223,201,.15); border-radius:13px; color:#f7eedf; background:#2a241d;
  box-shadow:0 20px 45px rgba(0,0,0,.34); transform:translateX(10px);
}
.hero-outcome-label{ display:block; color:var(--muted); font-size:9px; }
.hero-outcome-value{ display:block; margin-top:5px; font-size:17px; letter-spacing:-.03em; }
.hero-outcome-note{ display:block; margin-top:3px; color:#eadfc9; font-size:9px; }

.hero-scroll{
  position:absolute; left:50%; transform:translateX(-50%); bottom:20px;
  display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color: var(--muted-2);
  transition: color .2s ease;
}
.hero-scroll:hover{ color:#f7eedf; }
.hero-scroll .hero-scroll-chevron{ transform: rotate(90deg); animation: heroBob 1.8s ease-in-out infinite; }
@keyframes heroBob{ 0%,100%{ transform: rotate(90deg) translateX(0); } 50%{ transform: rotate(90deg) translateX(4px); } }

/* ---------- first-visit homepage entrance ---------- */
.js .home-page.intro-ready .site-header{ opacity:0; transform:translateY(-14px); }
.js .home-page.intro-ready .hero-home .grid-lines,
.js .home-page.intro-ready .hero-home .glow-blob,
.js .home-page.intro-ready .hero-home::after{ opacity:0; }
.js .home-page.intro-ready .hero-copy .eyebrow-row{ opacity:0; transform:translateY(12px); }
.js .home-page.intro-ready .hero-line > span{ transform:translateY(112%); }
.js .home-page.intro-ready .hero-copy .subhead,
.js .home-page.intro-ready .hero-cta-row .btn,
.js .home-page.intro-ready .hero-trust li{ opacity:0; transform:translateY(18px); }
.js .home-page.intro-ready .hero-home .hero-showcase{
  opacity:0; pointer-events:none;
  transform:translate3d(54px,18px,0) scale(.96);
  transform-origin:50% 55%;
}
.js .home-page.intro-ready .hero-scroll{ opacity:0; transform:translateX(-50%) translateY(10px); }

.js .home-page.intro-ready.intro-play .site-header{
  opacity:1; transform:translateY(0);
  transition:opacity .7s ease .15s,transform .85s cubic-bezier(.16,1,.3,1) .15s;
}
.js .home-page.intro-ready.intro-play .hero-home .grid-lines{ opacity:1; transition:opacity 1.15s ease; }
.js .home-page.intro-ready.intro-play .hero-home .glow-blob{ opacity:1; transition:opacity 1.25s ease .12s; }
.js .home-page.intro-ready.intro-play .hero-home::after{ opacity:1; transition:opacity 1.25s ease .22s; }
.js .home-page.intro-ready.intro-play .hero-copy .eyebrow-row{
  opacity:1; transform:translateY(0);
  transition:opacity .65s ease .34s,transform .78s cubic-bezier(.16,1,.3,1) .34s;
}
.js .home-page.intro-ready.intro-play .hero-line > span{
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.js .home-page.intro-ready.intro-play .hero-line:nth-child(1) > span{ transition-delay:.5s; }
.js .home-page.intro-ready.intro-play .hero-line:nth-child(2) > span{ transition-delay:.69s; }
.js .home-page.intro-ready.intro-play .hero-line:nth-child(3) > span{ transition-delay:.88s; }
.js .home-page.intro-ready.intro-play .hero-copy .subhead{
  opacity:1; transform:translateY(0);
  transition:opacity .75s ease 1.16s,transform .88s cubic-bezier(.16,1,.3,1) 1.16s;
}
.js .home-page.intro-ready.intro-play .hero-cta-row .btn{
  opacity:1; transform:translateY(0);
  transition:opacity .65s ease,transform .82s cubic-bezier(.16,1,.3,1),background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.js .home-page.intro-ready.intro-play .hero-cta-row .btn:nth-child(1){ transition-delay:1.4s,1.4s,0s,0s,0s; }
.js .home-page.intro-ready.intro-play .hero-cta-row .btn:nth-child(2){ transition-delay:1.54s,1.54s,0s,0s,0s; }
.js .home-page.intro-ready.intro-play .hero-trust li{
  opacity:1; transform:translateY(0);
  transition:opacity .6s ease,transform .72s cubic-bezier(.16,1,.3,1);
}
.js .home-page.intro-ready.intro-play .hero-trust li:nth-child(1){ transition-delay:1.72s; }
.js .home-page.intro-ready.intro-play .hero-trust li:nth-child(2){ transition-delay:1.84s; }
.js .home-page.intro-ready.intro-play .hero-home .hero-showcase{
  opacity:1; transform:translate3d(0,0,0) scale(1);
  transition:opacity .95s ease .62s,transform 1.22s cubic-bezier(.16,1,.3,1) .62s;
}
.js .home-page.intro-ready.intro-play .hero-scroll{
  opacity:1; transform:translateX(-50%) translateY(0);
  transition:opacity .58s ease 1.96s,transform .72s ease 1.96s,color .2s ease;
}

@media (max-width: 980px){
  .hero.hero-home{ min-height:0; padding:44px 0 50px; }
  .hero-grid.home{ grid-template-columns:1fr; gap:46px; }
  .hero-copy{ max-width:650px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .hero-copy .subhead{ max-width:620px; }
  .hero-copy .eyebrow-row, .hero-cta-row, .hero-trust{ justify-content:center; }
  .hero-showcase{ max-width:600px; margin:0 auto; width:100%; }
  .hero-scroll{ display:none; }
  .js .home-page.intro-ready .hero-home .hero-showcase{ transform:translate3d(0,26px,0) scale(.98); }
  .js .home-page.intro-ready.intro-play .hero-home .hero-showcase{ transform:translate3d(0,0,0) scale(1); }
}
@media (max-width: 560px){
  .hero.hero-home{ padding:30px 0 34px; }
  .hero-copy .eyebrow-row .bar{ display:none; }
  .hero-home .container{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  .hero-copy .headline-xl{ font-size:clamp(42px,11.3vw,48px); line-height:.98; margin-bottom:18px; }
  .hero-copy .subhead{ font-size:15px; }
  .hero-home .hero-cta-row{ width:100%; flex-direction:column; }
  .hero-home .hero-cta-row .btn{ width:100%; justify-content:center; }
  .hero-trust{ gap:11px 16px; }
  .hero-showcase-shell{ padding:8px; border-radius:18px; }
  .hero-showcase-head{ padding:0 7px; }
  .hero-tab{ min-height:44px; font-size:12px; padding:9px 2px; }
  .hero-preview{ min-height:390px; padding:15px 12px 12px; }
  .hero-preview-title{ font-size:22px; }
  .hero-caption{ min-height:50px; }
  .hero-window{ margin-top:14px; }
  .hero-outcome{ right:-2px; bottom:22px; min-width:124px; padding:11px; }
}
@media (max-width:340px){
  .hero-copy .headline-xl{ font-size:36px; }
}
@media (hover:none){
  .hero-hint-hover{ display:none; }
  .hero-hint-touch{ display:inline; }
  .hero-showcase-shell{ transform:none; }
}

/* ---------- cinematic scroll-controlled brand chapter ---------- */
.brand-story-section{
  height:170svh; position:relative; isolation:isolate;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.brand-story-section > .grid-lines{ z-index:-1; }
.brand-story-sticky{
  height:100svh; position:sticky; top:0; overflow:hidden;
  display:grid; place-items:center;
}
.brand-story-stage{
  height:100%; position:relative; z-index:2; padding:88px 24px 64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.brand-story-glow{
  width:min(76vw,980px); aspect-ratio:1; position:absolute; z-index:0; left:50%; top:48%;
  border-radius:50%; opacity:var(--brand-glow-opacity,.8); pointer-events:none;
  background:radial-gradient(circle,rgba(216,195,157,.28) 0%,rgba(167,155,135,.13) 32%,transparent 68%);
  transform:translate(-50%,-50%) scale(var(--brand-glow-scale,1)); filter:blur(4px);
}
.logo-assemble{
  width:clamp(290px,32vw,430px); aspect-ratio:600/412; flex:0 0 auto;
  position:relative; z-index:2;
  filter:drop-shadow(0 28px 70px rgba(216,195,157,.38));
}
.logo-assemble-base,.logo-piece{ position:absolute; inset:0; }
.logo-assemble img{ width:100%; height:100%; display:block; object-fit:contain; }
.logo-assemble-base{ opacity:1; }
.logo-piece{ opacity:0; will-change:transform,opacity; }
.brand-story-section.is-motion-ready .logo-assemble-base{ opacity:var(--logo-base-opacity,0); }
.brand-story-section.is-motion-ready .logo-piece{ opacity:var(--logo-piece-opacity,1); }
.logo-piece-1{ clip-path:polygon(0 0,52% 0,52% 42%,0 42%); }
.logo-piece-2{ clip-path:polygon(0 42%,40% 42%,40% 68%,0 68%); }
.logo-piece-3{ clip-path:polygon(0 68%,54% 68%,54% 100%,0 100%); }
.logo-piece-4{ clip-path:polygon(40% 42%,54% 42%,54% 68%,40% 68%); }
.logo-piece-5{ clip-path:polygon(52% 0,82% 0,82% 100%,54% 100%,54% 68%,52% 68%); }
.logo-piece-6{ clip-path:polygon(82% 0,100% 0,100% 100%,82% 100%); }
.brand-story-copy{ max-width:900px; margin-top:clamp(20px,3.2vh,34px); position:relative; z-index:3; }
.brand-story-kicker{
  display:block; margin-bottom:10px; color:#eadfc9; font-size:10px; font-weight:900;
  letter-spacing:.2em; opacity:1; transform:none;
}
.brand-story-copy h2{
  font-size:clamp(44px,5.2vw,76px); line-height:1.02; letter-spacing:-.045em;
  opacity:1; transform:none;
}
.brand-story-copy p{
  max-width:760px; margin:20px auto 0; color:var(--muted); font-size:clamp(16px,1.45vw,21px); line-height:1.55;
  opacity:1; transform:none;
}
.brand-story-section.is-motion-ready .brand-story-kicker{ opacity:var(--brand-kicker-opacity,0); transform:translateY(var(--brand-kicker-y,18px)); }
.brand-story-section.is-motion-ready .brand-story-copy h2{ opacity:var(--brand-title-opacity,0); transform:translateY(var(--brand-title-y,28px)); }
.brand-story-section.is-motion-ready .brand-story-copy p{ opacity:var(--brand-copy-opacity,0); transform:translateY(var(--brand-copy-y,24px)); }
.brand-story-scroll-cue{
  position:absolute; z-index:4; left:50%; bottom:28px; display:flex; align-items:center; gap:10px;
  color:var(--muted-2); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  opacity:var(--brand-cue-opacity,0); transform:translateX(-50%); pointer-events:none;
}
.brand-story-scroll-cue i{ width:34px; height:1px; position:relative; overflow:hidden; background:rgba(241,231,210,.16); }
.brand-story-scroll-cue i::after{ content:''; width:45%; height:100%; position:absolute; left:-45%; top:0; background:#d8c39d; animation:brandCue 1.8s ease-in-out infinite; }
@keyframes brandCue{ 0%{ transform:translateX(0); } 100%{ transform:translateX(320%); } }

@media (max-width:560px){
  .brand-story-section{ height:160svh; }
  .brand-story-stage{ padding:78px 18px 54px; }
  .brand-story-glow{ width:145vw; top:46%; }
  .logo-assemble{ width:min(64vw,250px); }
  .brand-story-copy{ margin-top:22px; }
  .brand-story-kicker{ margin-bottom:8px; font-size:8px; }
  .brand-story-copy h2{ font-size:clamp(36px,11vw,46px); }
  .brand-story-copy p{ max-width:340px; margin-top:15px; font-size:14.5px; line-height:1.5; }
  .brand-story-scroll-cue{ bottom:18px; font-size:8px; }
}

@media (max-height:700px) and (min-width:561px){
  .brand-story-stage{ padding-top:70px; padding-bottom:48px; }
  .logo-assemble{ width:min(31vw,350px); }
  .brand-story-copy{ margin-top:18px; }
  .brand-story-copy h2{ font-size:clamp(42px,4.8vw,62px); }
  .brand-story-copy p{ margin-top:14px; font-size:16px; }
}

@media (max-height:520px) and (min-width:561px){
  .brand-story-stage{ padding:56px 24px 24px; }
  .logo-assemble{ width:min(24vw,215px); }
  .brand-story-copy{ margin-top:8px; }
  .brand-story-kicker{ display:none; }
  .brand-story-copy h2{ font-size:36px; }
  .brand-story-copy p{ max-width:620px; margin-top:8px; font-size:13px; line-height:1.4; }
  .brand-story-scroll-cue{ bottom:10px; }
}

@media (prefers-reduced-motion:reduce){
  .brand-story-section{ height:auto; }
  .brand-story-sticky{ height:auto; min-height:720px; position:relative; }
  .brand-story-section .logo-assemble-base{ opacity:1 !important; }
  .brand-story-section .logo-piece{ display:none !important; }
  .brand-story-section .brand-story-copy > *{ opacity:1 !important; transform:none !important; }
  .brand-story-scroll-cue{ display:none; }
}

/* ---------- feature / service tiles ---------- */
.icon-tile{
  width:56px; height:56px; border-radius:16px;
  background: rgba(216,195,157,0.12);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.on-light .icon-tile, .bg-light .icon-tile{ background: rgba(167,155,135,0.10); }

.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: rgba(241,231,210,0.035);
  border:1px solid var(--line-soft);
  border-radius: var(--radius);
  padding:28px 24px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{ transform: translateY(-4px); border-color: rgba(216,195,157,0.4); background: rgba(241,231,210,0.05); }
.card h3{ font-size:18.5px; margin:16px 0 8px; }
.card p{ font-size:14.5px; color: var(--muted); }
.card a.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13.5px; font-weight:700; color:#ddc69e; }

.card-light{
  background: #f7eedf; border:1px solid var(--border-light); border-radius: var(--radius);
  padding:28px 24px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-light:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-light h3{ font-size:18px; color: var(--ink-900); margin:16px 0 8px; }
.card-light p{ font-size:14px; color: var(--muted-dark); }

.feature-item{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; padding:4px 0; }
.feature-item .chk{ display:flex; flex-shrink:0; color:#eadfc9; }
.on-light .feature-item .chk, .bg-light .feature-item .chk{ color:#7f6643; }
.feature-list{ display:flex; flex-direction:column; gap:12px; }
.pill-check{
  display:inline-flex; align-items:center; gap:8px; background:#f7eedf; border:1px solid var(--border-light);
  border-radius:999px; padding:9px 16px 9px 10px; box-shadow: var(--shadow-sm); font-size:14px; font-weight:700; color: var(--ink-700);
}
.pill-wrap{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- process ---------- */
.process-row{ display:flex; gap:22px; align-items:flex-start; position:relative; }
.process-num{
  width:60px; height:60px; border-radius:18px; background: var(--grad);
  display:flex; align-items:center; justify-content:center; color:#f7eedf; flex-shrink:0;
  box-shadow: 0 18px 32px -14px rgba(216,195,157,0.55);
}
.process-line{ width:2px; flex:1; min-height:40px; background: linear-gradient(180deg, rgba(216,195,157,0.55), rgba(216,195,157,0.05)); margin: 8px auto; }
.process-chip{ font-size:12.5px; font-weight:800; letter-spacing:0.08em; color:#d8c39d; text-transform:uppercase; }
.process-title{ font-size: clamp(19px,2vw,23px); font-weight:700; margin-top:4px; }
.process-desc{ font-size:14.5px; color: var(--muted); margin-top:4px; max-width:460px; }

/* ---------- realistic service preview interfaces ---------- */
.service-ui{
  position:absolute; inset:0; overflow:hidden;
  background:#f1e7d2; color:#2a241d; font-family:'IBM Plex Sans',sans-serif;
}
.service-ui *{ box-sizing:border-box; }
.service-ui-topbar{
  height:17%; min-height:34px; padding:0 14px;
  display:flex; align-items:center; gap:12px;
  background:#f7eedf; border-bottom:1px solid #f1e7d2;
}
.service-ui-brand{ font-size:10px; font-weight:800; letter-spacing:-.02em; }
.service-ui-kicker{ display:block; color:#eadfc9; font-size:7px; font-weight:800; letter-spacing:.13em; }
.service-ui-action{
  display:inline-flex; width:max-content; margin-top:8px; padding:6px 10px;
  border-radius:6px; color:#f7eedf; background:var(--grad); font-size:7px; font-weight:800;
}
.service-ui-cardhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.service-ui-cardhead span{ font-size:7px; font-weight:800; color:#2a241d; }
.service-ui-cardhead b{ color:#a79b87; font-size:6px; font-weight:700; }

/* Shopify storefront */
.shopify-nav{ margin-left:auto; display:flex; gap:11px; color:#7f6643; font-size:6.5px; font-weight:700; letter-spacing:.04em; }
.shopify-cart{ display:flex; align-items:center; gap:5px; color:#4a3f31; font-size:6.5px; font-weight:800; }
.shopify-cart b{ width:14px; height:14px; display:grid; place-items:center; border-radius:50%; color:#f7eedf; background:var(--grad); font-size:6px; }
.shopify-main{
  height:63%; padding:10px 14px; display:flex; align-items:stretch; justify-content:space-between; gap:14px;
  background:radial-gradient(circle at 75% 8%,rgba(216,195,157,.3),transparent 34%),linear-gradient(135deg,#181714,#4a3f31);
}
.shopify-copy{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.shopify-copy strong{ margin-top:5px; color:#f7eedf; font-size:17px; line-height:1.05; letter-spacing:-.035em; }
.shopify-copy p{ max-width:175px; margin-top:5px; color:#d8c39d; font-size:6.5px; line-height:1.4; }
.shopify-product-card{
  width:38%; min-width:112px; overflow:hidden; align-self:stretch;
  border:1px solid rgba(241,231,210,.16); border-radius:9px; background:#f7eedf;
  box-shadow:0 16px 28px -16px rgba(0,0,0,.6);
}
.shopify-product-visual{ height:61%; position:relative; overflow:hidden; background:linear-gradient(145deg,#f1e7d2,#d8c39d); }
.shopify-product-visual span{ position:absolute; top:7px; left:7px; z-index:2; padding:3px 5px; border-radius:4px; color:#f7eedf; background:#2a241d; font-size:5.5px; font-weight:800; }
.shopify-product-visual i{
  width:43%; height:72%; position:absolute; left:29%; bottom:-4px;
  border-radius:28px 28px 6px 6px; background:linear-gradient(160deg,#4a3f31,#2a241d);
  box-shadow:inset 0 1px 0 rgba(241,231,210,.18);
}
.shopify-product-visual i::before{
  content:''; width:48%; height:32%; position:absolute; left:26%; top:-13%;
  border:3px solid #4a3f31; border-bottom:0; border-radius:18px 18px 0 0;
}
.shopify-product-info{ height:39%; padding:6px 8px; display:grid; grid-template-columns:1fr auto; gap:2px 6px; align-content:center; }
.shopify-product-info span{ font-size:6.8px; font-weight:800; }
.shopify-product-info b{ font-size:6.8px; }
.shopify-product-info small{ grid-column:1/-1; color:#a79b87; font-size:5.6px; }
.shopify-featurebar{ height:20%; padding:0 14px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; background:#f7eedf; }
.shopify-featurebar span{ padding-left:8px; border-left:1px solid #f1e7d2; color:#7f6643; font-size:6.4px; font-weight:700; }
.shopify-featurebar span:first-child{ padding-left:0; border-left:0; }
.shopify-featurebar b{ display:block; margin-bottom:2px; color:#d8c39d; font-size:5.5px; }

/* QR, SaaS and HR application shells */
.app-ui{ display:grid; grid-template-columns:21% 79%; }
.service-ui-sidebar{ padding:10px 7px; background:linear-gradient(160deg,#2a241d,#181714); color:#f7eedf; }
.service-ui-appmark{
  width:19px; height:19px; margin-bottom:12px; display:grid; place-items:center;
  border-radius:6px; color:#f7eedf; background:var(--grad); font-size:8px; font-weight:800;
}
.service-ui-sideitem{ margin-bottom:5px; padding:5px 5px; display:flex; align-items:center; gap:5px; border-radius:5px; color:#a79b87; font-size:6px; font-weight:700; }
.service-ui-sideitem i{ width:5px; height:5px; border:1px solid currentColor; border-radius:2px; }
.service-ui-sideitem.is-current{ color:#f7eedf; background:rgba(216,195,157,.26); }
.service-ui-sideitem.is-current i{ border-color:#d8c39d; background:#d8c39d; }
.service-ui-main{ min-width:0; padding:9px 10px; display:flex; flex-direction:column; gap:7px; background:#f1e7d2; }
.service-ui-mainhead{ min-height:25px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.service-ui-mainhead > div{ display:flex; flex-direction:column; gap:2px; }
.service-ui-mainhead b{ color:#2a241d; font-size:8.5px; }
.service-ui-mainhead span{ color:#a79b87; font-size:5.8px; }
.service-ui-mainhead em{ display:flex; align-items:center; gap:4px; color:#7f6643; font-size:5.8px; font-style:normal; font-weight:700; white-space:nowrap; }
.service-ui-mainhead em i{ width:5px; height:5px; border-radius:50%; background:#55c99a; box-shadow:0 0 7px rgba(85,201,154,.65); }
.service-ui-metrics{ min-height:47px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.service-ui-metrics > div{ min-width:0; padding:6px 7px; display:flex; flex-direction:column; justify-content:center; border:1px solid #f1e7d2; border-radius:7px; background:#f7eedf; box-shadow:0 7px 18px -15px rgba(42,36,29,.35); }
.service-ui-metrics span{ overflow:hidden; color:#a79b87; font-size:5.3px; font-weight:800; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.service-ui-metrics strong{ margin-top:2px; color:#2a241d; font-size:10px; line-height:1; }
.service-ui-metrics small{ margin-top:2px; color:#d8c39d; font-size:5.2px; font-weight:700; }

/* QR scan-to-landing-page journey */
.qr-journey-ui{
  padding:8px 10px 7px; display:flex; flex-direction:column; gap:5px;
  background:radial-gradient(circle at 50% 40%,rgba(216,195,157,.16),transparent 43%),linear-gradient(145deg,#f1e7d2,#f1e7d2);
}
.qr-journey-head{ min-height:29px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qr-journey-head > div{ display:flex; flex-direction:column; gap:2px; }
.qr-journey-head span{ color:#d8c39d; font-size:5.3px; font-weight:900; letter-spacing:.12em; }
.qr-journey-head strong{ color:#2a241d; font-size:10px; letter-spacing:-.025em; }
.qr-journey-head em{ display:flex; align-items:center; gap:4px; color:#7f6643; font-size:5.8px; font-style:normal; font-weight:800; white-space:nowrap; }
.qr-journey-head em i{ width:5px; height:5px; border-radius:50%; background:#55c99a; box-shadow:0 0 8px rgba(85,201,154,.7); }
.qr-phone-pair{ min-height:0; flex:1; display:flex; align-items:stretch; justify-content:center; gap:8px; }
.qr-phone-step{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; }
.qr-step-label{ display:flex; align-items:center; gap:4px; color:#7f6643; font-size:5.6px; font-weight:800; }
.qr-step-label b{ width:13px; height:13px; display:grid; place-items:center; border-radius:50%; color:#f7eedf; background:#c6a46d; font-size:4.7px; }
.qr-mini-phone{
  height:calc(100% - 16px); max-height:200px; aspect-ratio:9/18.5; position:relative; overflow:hidden;
  padding:4px; border-radius:15px; background:linear-gradient(155deg,#2a241d,#181714);
  box-shadow:0 15px 26px -15px rgba(42,36,29,.72),inset 0 0 0 1px rgba(241,231,210,.14);
}
.qr-mini-notch{ width:34%; height:6px; position:absolute; top:4px; left:33%; z-index:4; border-radius:0 0 5px 5px; background:#181714; }
.qr-scanner-screen,.qr-landing-screen{ width:100%; height:100%; position:relative; overflow:hidden; border-radius:11px; }
.qr-scanner-screen{ padding:9px 6px 6px; display:flex; flex-direction:column; color:#f7eedf; background:radial-gradient(circle at 50% 46%,#4a3f31,#181714 68%); }
.qr-camera-bar{ display:flex; align-items:center; justify-content:space-between; color:#eadfc9; font-size:3.7px; }
.qr-camera-bar b{ font-size:2.8px; letter-spacing:1px; }
.qr-camera-copy{ margin-top:9px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.qr-camera-copy strong{ font-size:6.2px; }
.qr-camera-copy span{ margin-top:2px; color:#d8c39d; font-size:3.8px; }
.qr-scan-frame{
  width:67%; aspect-ratio:1; margin:auto; position:relative; display:grid; place-items:center; flex-shrink:0;
  border:1px solid rgba(241,231,210,.82); border-radius:7px; box-shadow:0 0 0 999px rgba(11,11,10,.13);
}
.qr-scan-frame::before,.qr-scan-frame::after{ content:''; width:11px; height:11px; position:absolute; top:-2px; border-top:2px solid #d8c39d; }
.qr-scan-frame::before{ left:-2px; border-left:2px solid #d8c39d; border-radius:4px 0 0; }
.qr-scan-frame::after{ right:-2px; border-right:2px solid #d8c39d; border-radius:0 4px 0 0; }
.qr-code-paper{ width:78%; aspect-ratio:1; display:grid; place-items:center; padding:4px; border-radius:3px; background:#f7eedf; box-shadow:0 4px 15px rgba(0,0,0,.28); }
.qr-code-paper svg{ width:100%; height:100%; }
.qr-scan-beam{ width:88%; height:1px; position:absolute; top:18%; left:6%; background:#d8c39d; box-shadow:0 0 6px 1px rgba(216,195,157,.9); animation:qrScan 2.2s ease-in-out infinite; }
@keyframes qrScan{ 0%,100%{ top:18%; opacity:.65; } 50%{ top:80%; opacity:1; } }
.qr-detected{ position:absolute; left:6px; right:6px; bottom:6px; z-index:2; padding:4px 5px; display:flex; align-items:center; gap:4px; border-radius:6px; background:rgba(241,231,210,.1); backdrop-filter:blur(4px); }
.qr-detected > i{ width:11px; height:11px; display:grid; place-items:center; flex-shrink:0; border-radius:50%; color:#102419; background:#62dba5; font-size:5px; font-style:normal; font-weight:900; }
.qr-detected > span{ display:flex; flex-direction:column; }
.qr-detected b{ font-size:4.5px; }
.qr-detected small{ color:#d8c39d; font-size:3.5px; }
.qr-landing-screen{ background:#f7eedf; }
.qr-page-hero{ height:41%; padding:12px 7px 6px; position:relative; display:flex; flex-direction:column; color:#f7eedf; background:radial-gradient(circle at 78% 28%,rgba(216,195,157,.8),transparent 38%),linear-gradient(145deg,#2a241d,#7f6643); }
.qr-page-hero > span{ width:15px; height:15px; display:grid; place-items:center; border:1px solid rgba(241,231,210,.45); border-radius:5px; background:rgba(241,231,210,.13); font-size:6px; font-weight:900; }
.qr-page-hero small{ margin-top:3px; color:#eadfc9; font-size:3.5px; font-weight:800; letter-spacing:.11em; }
.qr-page-hero strong{ margin-top:auto; font-size:7.5px; line-height:1.06; letter-spacing:-.04em; }
.qr-page-links{ height:59%; padding:5px; display:flex; flex-direction:column; gap:3px; background:#f5ecdc; }
.qr-page-welcome{ color:#7f6643; font-size:3.8px; font-weight:800; }
.qr-page-links a{ min-height:0; flex:1; padding:3px 4px; display:flex; align-items:center; gap:4px; border:1px solid #f1e7d2; border-radius:5px; color:#4a3f31; background:#f7eedf; text-decoration:none; pointer-events:none; box-shadow:0 3px 9px -8px rgba(42,36,29,.5); }
.qr-page-links a > i{ width:12px; height:12px; display:grid; place-items:center; flex-shrink:0; border-radius:4px; color:#f7eedf; background:linear-gradient(135deg,#d8c39d,#a79b87); font-size:5px; font-style:normal; }
.qr-page-links a > span{ min-width:0; display:flex; flex-direction:column; }
.qr-page-links a b{ overflow:hidden; font-size:4.3px; text-overflow:ellipsis; white-space:nowrap; }
.qr-page-links a small{ overflow:hidden; color:#a79b87; font-size:3.2px; text-overflow:ellipsis; white-space:nowrap; }
.qr-page-links a em{ margin-left:auto; padding:2px 3px; border-radius:3px; color:#c6a46d; background:#f1e7d2; font-size:3.5px; font-style:normal; font-weight:900; }
.qr-flow-arrow{ width:35px; flex:0 0 35px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.qr-flow-arrow i{ width:27px; height:1px; position:relative; background:linear-gradient(90deg,#d8c39d,#d8c39d); }
.qr-flow-arrow i::after{ content:''; width:5px; height:5px; position:absolute; top:-2px; right:0; border-top:1px solid #d8c39d; border-right:1px solid #d8c39d; transform:rotate(45deg); }
.qr-flow-arrow span{ color:#a79b87; font-size:4.6px; font-weight:800; }
.qr-journey-foot{ min-height:17px; padding:3px 7px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; border:1px solid rgba(167,155,135,.12); border-radius:6px; background:rgba(241,231,210,.72); }
.qr-journey-foot span{ display:flex; align-items:center; justify-content:center; gap:3px; color:#7f6643; font-size:5.2px; font-weight:700; white-space:nowrap; }
.qr-journey-foot i{ width:8px; height:8px; display:grid; place-items:center; border-radius:50%; color:#f7eedf; background:#d8c39d; font-size:3.8px; font-style:normal; }

@media (max-width:560px){
  .qr-journey-ui{ padding:6px 8px; gap:3px; }
  .qr-journey-head{ min-height:20px; }
  .qr-journey-head > div{ gap:0; }
  .qr-journey-head > div > span{ display:none; }
  .qr-journey-head strong{ font-size:8px; }
  .qr-journey-head em{ font-size:4.8px; }
  .qr-phone-pair{ gap:5px; }
  .qr-mini-phone{ height:calc(100% - 15px); max-height:none; }
  .qr-flow-arrow{ width:24px; flex-basis:24px; }
  .qr-flow-arrow i{ width:20px; }
  .qr-journey-foot{ display:none; }
}

.service-ui-chart,.saas-activity{ min-width:0; overflow:hidden; border:1px solid #f1e7d2; border-radius:8px; background:#f7eedf; }

/* SaaS operations dashboard */
.saas-workspace{ min-height:0; flex:1; display:grid; grid-template-columns:1.45fr .9fr; gap:6px; }
.service-ui-chart{ padding:7px; display:flex; flex-direction:column; }
.service-ui-chart > svg{ width:100%; min-height:50px; flex:1; margin-top:4px; }
.saas-activity{ padding:7px; display:flex; flex-direction:column; }
.saas-activity > div:not(.service-ui-cardhead){ flex:1; min-height:0; display:flex; align-items:center; gap:5px; border-top:1px solid #f1e7d2; }
.saas-activity > div:not(.service-ui-cardhead) > i{ width:6px; height:6px; flex-shrink:0; border:2px solid #d8c39d; border-radius:50%; }
.saas-activity > div > span{ min-width:0; display:flex; flex-direction:column; }
.saas-activity > div > span b{ overflow:hidden; color:#4a3f31; font-size:5.6px; text-overflow:ellipsis; white-space:nowrap; }
.saas-activity > div > span small{ color:#a79b87; font-size:4.8px; }
.saas-activity > div > em{ margin-left:auto; color:#d8c39d; font-size:4.8px; font-style:normal; }

/* HR employee mobile check-out experience */
.hr-mobile-ui{
  padding:8px 10px 7px; display:flex; flex-direction:column; gap:5px;
  background:radial-gradient(circle at 34% 48%,rgba(216,195,157,.18),transparent 38%),linear-gradient(145deg,#f1e7d2,#f1e7d2);
}
.hr-mobile-head{ min-height:29px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hr-mobile-head > div{ display:flex; flex-direction:column; gap:2px; }
.hr-mobile-head span{ color:#d8c39d; font-size:5.3px; font-weight:900; letter-spacing:.12em; }
.hr-mobile-head strong{ color:#2a241d; font-size:10px; letter-spacing:-.025em; }
.hr-mobile-head em{ display:flex; align-items:center; gap:4px; color:#7f6643; font-size:5.8px; font-style:normal; font-weight:800; white-space:nowrap; }
.hr-mobile-head em i{ width:5px; height:5px; border-radius:50%; background:#55c99a; box-shadow:0 0 8px rgba(85,201,154,.7); }
.hr-mobile-workspace{ min-height:0; flex:1; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:stretch; justify-content:center; gap:10px; }
.hr-app-phone{
  height:100%; max-height:202px; aspect-ratio:9/18.5; position:relative; overflow:hidden;
  padding:4px; border-radius:16px; background:linear-gradient(155deg,#2a241d,#181714);
  box-shadow:0 16px 28px -16px rgba(42,36,29,.75),inset 0 0 0 1px rgba(241,231,210,.14);
}
.hr-app-notch{ width:34%; height:6px; position:absolute; top:4px; left:33%; z-index:4; border-radius:0 0 5px 5px; background:#181714; }
.hr-app-screen{ width:100%; height:100%; padding:9px 6px 5px; display:flex; flex-direction:column; gap:4px; overflow:hidden; border-radius:12px; color:#2a241d; background:#f1e7d2; }
.hr-app-status{ display:flex; justify-content:space-between; color:#7f6643; font-size:3.6px; font-weight:800; }
.hr-app-status b{ font-size:2.8px; letter-spacing:1px; }
.hr-app-profile{ display:flex; align-items:center; gap:5px; }
.hr-app-profile > i{ width:18px; height:18px; display:grid; place-items:center; flex-shrink:0; border-radius:6px; color:#f7eedf; background:linear-gradient(135deg,#a79b87,#d8c39d); font-size:5px; font-style:normal; font-weight:900; }
.hr-app-profile > span{ min-width:0; display:flex; flex-direction:column; }
.hr-app-profile small{ color:#a79b87; font-size:3px; font-weight:800; letter-spacing:.08em; }
.hr-app-profile b{ overflow:hidden; font-size:5.4px; text-overflow:ellipsis; white-space:nowrap; }
.hr-app-profile em{ margin-left:auto; color:#a79b87; font-size:5px; font-style:normal; letter-spacing:1px; }
.hr-live-shift{ padding:7px; display:flex; flex-direction:column; border:1px solid #f1e7d2; border-radius:8px; background:#f7eedf; box-shadow:0 8px 18px -16px rgba(42,36,29,.5); }
.hr-live-shift > span{ display:flex; align-items:center; gap:3px; color:#a79b87; font-size:3.8px; font-weight:900; letter-spacing:.08em; }
.hr-live-shift > span i{ width:4px; height:4px; border-radius:50%; background:#55c99a; box-shadow:0 0 5px rgba(85,201,154,.6); }
.hr-live-shift > strong{ margin-top:5px; color:#2a241d; font-size:15px; line-height:1; letter-spacing:-.045em; }
.hr-live-shift > small{ margin-top:2px; color:#a79b87; font-size:3.8px; }
.hr-location{ margin-top:7px; padding-top:6px; display:flex; align-items:center; gap:4px; border-top:1px solid #f1e7d2; }
.hr-location > i{ width:15px; height:15px; display:grid; place-items:center; flex-shrink:0; border-radius:5px; color:#a79b87; background:#f1e7d2; font-size:6px; font-style:normal; }
.hr-location > span{ min-width:0; display:flex; flex-direction:column; }
.hr-location b{ overflow:hidden; font-size:4.2px; text-overflow:ellipsis; white-space:nowrap; }
.hr-location small{ color:#a79b87; font-size:3.3px; }
.hr-location > em{ width:10px; height:10px; margin-left:auto; display:grid; place-items:center; border-radius:50%; color:#f7eedf; background:#55c99a; font-size:4px; font-style:normal; }
.hr-swipe-checkout{ min-height:24px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:999px; color:#f7eedf; background:linear-gradient(90deg,#a79b87,#a79b87); font-size:4.8px; font-weight:900; }
.hr-swipe-checkout > i{ width:18px; height:18px; position:absolute; top:3px; left:3px; display:grid; place-items:center; border-radius:50%; color:#a79b87; background:#f7eedf; font-size:7px; font-style:normal; box-shadow:0 4px 9px rgba(74,63,49,.22); animation:hrSwipe 2.8s ease-in-out infinite; }
@keyframes hrSwipe{ 0%,18%,100%{ left:3px; } 64%,78%{ left:calc(100% - 21px); } }
.hr-swipe-checkout > span{ margin-left:14px; }
.hr-app-nav{ margin-top:auto; padding-top:4px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #eadfc9; }
.hr-app-nav span{ display:flex; flex-direction:column; align-items:center; gap:1px; color:#d8c39d; font-size:3.2px; font-weight:700; }
.hr-app-nav span i{ font-size:6px; font-style:normal; }
.hr-app-nav .is-current{ color:#a79b87; }
.hr-checkout-preview{ min-width:0; padding:10px 12px; display:flex; flex-direction:column; overflow:hidden; border:1px solid #f1e7d2; border-radius:10px; background:#f7eedf; box-shadow:0 14px 25px -20px rgba(42,36,29,.48); }
.hr-checkout-kicker{ color:#d8c39d; font-size:5px; font-weight:900; letter-spacing:.1em; }
.hr-checkout-preview > strong{ margin-top:4px; color:#2a241d; font-size:14px; letter-spacing:-.03em; }
.hr-checkout-preview > p{ max-width:240px; margin-top:3px; color:#a79b87; font-size:5.6px; line-height:1.35; }
.hr-shift-summary{ margin-top:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.hr-shift-summary > div{ padding:6px; display:flex; flex-direction:column; border:1px solid #f1e7d2; border-radius:6px; background:#f1e7d2; }
.hr-shift-summary span{ overflow:hidden; color:#a79b87; font-size:4px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.hr-shift-summary b{ margin-top:2px; color:#4a3f31; font-size:7px; }
.hr-verified-row{ margin-top:7px; padding:6px 7px; display:flex; align-items:center; gap:6px; border-radius:7px; background:#effaf6; }
.hr-verified-row > i{ width:17px; height:17px; display:grid; place-items:center; flex-shrink:0; border-radius:50%; color:#f7eedf; background:#55c99a; font-size:6px; font-style:normal; font-weight:900; }
.hr-verified-row > span{ display:flex; flex-direction:column; }
.hr-verified-row b{ color:#286d57; font-size:5.5px; }
.hr-verified-row small{ color:#63917f; font-size:4px; }
.hr-confirm-checkout{ min-height:27px; margin-top:7px; padding:4px 7px; display:flex; align-items:center; gap:6px; border-radius:7px; color:#f7eedf; background:linear-gradient(90deg,#a79b87,#a79b87); }
.hr-confirm-checkout > i{ width:17px; height:17px; display:grid; place-items:center; border-radius:5px; color:#a79b87; background:#f7eedf; font-size:6px; font-style:normal; font-weight:900; }
.hr-confirm-checkout span{ font-size:5.8px; font-weight:900; }
.hr-confirm-checkout em{ margin-left:auto; font-size:5px; font-style:normal; font-weight:800; }
.hr-auto-note{ margin-top:auto; color:#a79b87; font-size:4.2px; }
.hr-mobile-foot{ min-height:17px; padding:3px 7px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; border:1px solid rgba(167,155,135,.12); border-radius:6px; background:rgba(241,231,210,.72); }
.hr-mobile-foot span{ display:flex; align-items:center; justify-content:center; gap:3px; color:#7f6643; font-size:5.2px; font-weight:700; white-space:nowrap; }
.hr-mobile-foot i{ width:8px; height:8px; display:grid; place-items:center; border-radius:50%; color:#f7eedf; background:#d8c39d; font-size:3.8px; font-style:normal; }

@media (max-width:560px){
  .hr-mobile-ui{ padding:6px 8px; gap:3px; }
  .hr-mobile-head{ min-height:20px; }
  .hr-mobile-head > div{ gap:0; }
  .hr-mobile-head > div > span{ display:none; }
  .hr-mobile-head strong{ font-size:8px; }
  .hr-mobile-head em{ font-size:4.8px; }
  .hr-mobile-workspace{ gap:6px; }
  .hr-app-phone{ max-height:none; }
  .hr-checkout-preview{ padding:6px 7px; }
  .hr-checkout-preview > strong{ margin-top:2px; font-size:8px; }
  .hr-checkout-preview > p,.hr-auto-note{ display:none; }
  .hr-shift-summary{ margin-top:4px; gap:3px; }
  .hr-shift-summary > div{ padding:4px; }
  .hr-shift-summary span{ font-size:3.2px; }
  .hr-shift-summary b{ font-size:5px; }
  .hr-verified-row{ margin-top:4px; padding:4px; }
  .hr-verified-row > i{ width:13px; height:13px; }
  .hr-verified-row b{ font-size:4.3px; }
  .hr-verified-row small{ font-size:3.3px; }
  .hr-confirm-checkout{ min-height:21px; margin-top:4px; padding:3px 5px; }
  .hr-confirm-checkout > i{ width:14px; height:14px; }
  .hr-confirm-checkout span{ font-size:4.6px; }
  .hr-mobile-foot{ display:none; }
}

/* ---------- device mockups ---------- */
.laptop{ width:100%; }
.laptop-frame{
  background: linear-gradient(160deg,#2a241d,#181714); border-radius:16px 16px 4px 4px;
  padding:12px 12px 0 12px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(241,231,210,0.06) inset;
}
.laptop-dots{ display:flex; gap:6px; padding:0 4px 10px; }
.laptop-dots span{ width:8px; height:8px; border-radius:50%; display:block; }
.laptop-screen{ border-radius:6px; overflow:hidden; background:#f7eedf; position:relative; aspect-ratio: 16/10; }
.laptop-base{ height:14px; background: linear-gradient(180deg,#4a3f31,#2a241d); border-radius:0 0 10px 10px; position:relative; }
.laptop-base::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:70px; height:6px; background:#181714; border-radius:0 0 6px 6px; }

.phone{ width:150px; }
.phone-frame{
  background: linear-gradient(160deg,#2a241d,#181714); border-radius:32px; padding:10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(241,231,210,0.07) inset;
}
.phone-screen{ border-radius:22px; overflow:hidden; background:#f7eedf; position:relative; aspect-ratio:9/19.5; }
.phone-notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:52px; height:14px; background:#181714; border-radius:8px; z-index:5; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; border-radius:28px; overflow:hidden; text-align:center;
  padding: 72px 32px; background: var(--navy-950);
  border:1px solid var(--line-soft-2);
}
.cta-orb{
  position:absolute; width:640px; height:640px; border-radius:50%; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(216,195,157,0.45), transparent 70%);
  pointer-events:none;
}
.cta-content{ position:relative; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px; }
.contact-pill-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:38px; }
.contact-pill{
  display:flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px;
  background: rgba(241,231,210,0.05); border:1px solid var(--line-soft-2); font-size:13.5px; font-weight:700; color:#d8c7a8;
}
.contact-pill svg{ color:#eadfc9; }

/* ---------- pricing ---------- */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
  align-items:stretch; max-width:1040px; margin:0 auto;
}
.plan-card{
  position:relative; display:flex; flex-direction:column;
  background: rgba(241,231,210,0.035);
  border:1px solid var(--line-soft); border-radius: var(--radius);
  padding:34px 26px 30px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.plan-card:hover{ transform: translateY(-4px); border-color: rgba(216,195,157,0.4); background: rgba(241,231,210,0.05); }
.plan-card.popular{
  border:1.5px solid transparent;
  background: linear-gradient(var(--navy-850), var(--navy-850)) padding-box, var(--grad) border-box;
  box-shadow: 0 30px 70px -30px rgba(216,195,157,0.6);
  transform: translateY(-10px);
}
.plan-card.popular:hover{
  transform: translateY(-14px); border:1.5px solid transparent;
  background: linear-gradient(var(--navy-850), var(--navy-850)) padding-box, var(--grad) border-box;
}
.plan-ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px;
  background: var(--grad); color:#f7eedf;
  font-size:11.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px; white-space:nowrap;
  box-shadow:0 12px 26px -10px rgba(216,195,157,0.75);
}
.plan-head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding-bottom:22px; border-bottom:1px solid var(--line-soft);
}
.plan-name{ font-size:19px; font-weight:800; color:#ddc69e; }
.popular .plan-name{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan-tagline{ font-size:13px; font-weight:700; color: var(--muted); }
.plan-platforms{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:2px; }
.plan-platforms span{
  display:inline-flex; padding:4px 8px; border:1px solid rgba(198,164,109,.24);
  border-radius:999px; color:#d8c7a8; background:rgba(198,164,109,.06);
  font-size:10px; font-weight:700; line-height:1.2;
}
.plan-desc{ font-size:13.5px; line-height:1.6; color: var(--muted); text-align:center; margin-top:16px; min-height:66px; }
.plan-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); }
.plan-meta-item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#eadfc9; }
.plan-meta-item svg{ color:#eadfc9; flex-shrink:0; }
.plan-price{ display:flex; align-items:baseline; justify-content:center; gap:7px; flex-wrap:wrap; margin-top:24px; }
.plan-amount{ font-size: clamp(42px, 5vw, 52px); font-weight:800; line-height:1; letter-spacing:-0.02em; }
.plan-cur{ font-size:19px; font-weight:800; }
.plan-per{ font-size:14px; font-weight:600; color: var(--muted); }
.plan-billing{ min-height:70px; display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:12px; text-align:center; }
.plan-note{ font-size:13.5px; font-weight:600; color: var(--muted); }
.plan-save{
  display:inline-flex; align-items:center; background: rgba(251,191,36,0.14); color:#fbbf24;
  border:1px solid rgba(251,191,36,0.4); border-radius:999px;
  padding:5px 14px; font-size:12px; font-weight:800; letter-spacing:0.05em;
}
.plan-cta{ width:100%; justify-content:center; margin:8px 0 24px; }
.plan-features{ display:flex; flex-direction:column; gap:13px; padding-top:24px; border-top:1px solid var(--line-soft); }
.website-pricing-note{
  display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px;
  max-width:1040px; margin:32px auto 0; padding:20px 22px;
  color:var(--muted); background:rgba(198,164,109,.07);
  border:1px solid rgba(198,164,109,.24); border-radius:14px;
}
.website-pricing-note__mark{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:var(--navy-950); background:var(--grad); font-weight:800; font-family:var(--font-display);
}
.website-pricing-note p{ margin:0; font-size:13.5px; line-height:1.65; }
.website-pricing-note p + p{ margin-top:5px; }
.website-pricing-note strong{ color:var(--cream); }
.aftercare-section{
  position:relative;
  background:linear-gradient(180deg,rgba(198,164,109,.035),transparent 58%);
}
.aftercare-terms{
  max-width:1040px; margin:30px auto 0; padding:18px 22px;
  text-align:center; color:var(--muted); background:rgba(241,231,210,.025);
  border:1px solid var(--line-soft); border-radius:14px;
}
.aftercare-terms p{ margin:0; font-size:13px; line-height:1.65; }
.aftercare-terms p + p{ margin-top:5px; }
.aftercare-terms strong{ color:var(--cream); }
.pricing-foot{ text-align:center; color: var(--muted-2); font-size:13px; margin-top:34px; }

.plan-quote{ text-align:left; }
.plan-quote h3{ font-size:18.5px; margin:16px 0 8px; }
.plan-quote p{ font-size:14.5px; color: var(--muted); }
.quote-price{ font-size:22px; font-weight:800; margin-top:16px; background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quote-sub{ font-size:13px; color: var(--muted); margin-top:3px; }
.quote-cta{ margin-top:18px; }

@media (max-width: 920px){
  .pricing-grid{ grid-template-columns:1fr; align-items:start; max-width:460px; }
  .plan-card.popular{ transform:none; }
  .plan-card.popular:hover{ transform: translateY(-4px); }
  .website-pricing-note{ max-width:460px; }
  .aftercare-terms{ max-width:460px; }
}

@media (max-width: 560px){
  .website-pricing-note{ grid-template-columns:26px minmax(0,1fr); gap:11px; padding:16px; }
  .website-pricing-note__mark{ width:26px; height:26px; font-size:12px; }
  .website-pricing-note p{ font-size:12.5px; }
  .aftercare-terms{ padding:16px; text-align:left; }
  .aftercare-terms p{ font-size:12.5px; }
}

/* ---------- footer ---------- */
footer{ background: var(--navy-950); border-top:1px solid var(--line-soft); padding: 64px 0 max(28px, env(safe-area-inset-bottom)); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:48px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ font-size:14px; color: var(--muted); max-width:280px; }
.footer-col h3{ font-size:14px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:#f7eedf; margin-bottom:18px; }
.footer-col a, .footer-col li{ display:block; font-size:14.5px; color: var(--muted); margin-bottom:12px; }
.footer-col a:hover{ color:#f7eedf; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:11px; background: rgba(241,231,210,0.05); border:1px solid var(--line-soft-2);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background: rgba(241,231,210,0.1); }
.footer-bottom{
  padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:13px; color: var(--muted-2);
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- contact form ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.2fr 0.9fr; gap:44px; align-items:flex-start; }
.contact-grid > *{ min-width:0; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.form-card{
  background: rgba(241,231,210,0.035); border:1px solid var(--line-soft); border-radius:24px; padding:36px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:#f1e7d2; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:12px; background: rgba(241,231,210,0.04);
  border:1px solid var(--line-soft-2); color:#f7eedf; font-family:inherit; font-size:14.5px;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:#d8c39d; background: rgba(241,231,210,0.06); }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-2); }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: #f87171; background: rgba(248,113,113,0.06); }
.field-error{ display:none; font-size:12.5px; font-weight:600; color:#fca5a5; margin-top:7px; }
.field.invalid .field-error{ display:block; }
.form-note{ font-size:12.5px; color: var(--muted-2); margin-top:14px; }
.form-success{
  display:none; align-items:center; gap:12px; background: rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.35);
  border-radius:14px; padding:16px 18px; margin-bottom:20px; font-size:14px; font-weight:600; color:#86efac;
}
.form-success.show{ display:flex; }
button[disabled]{ opacity:0.7; cursor:not-allowed; }

.contact-info-card{
  background: linear-gradient(160deg, rgba(216,195,157,0.12), rgba(216,195,157,0.08));
  border:1px solid var(--line-soft-2); border-radius:24px; padding:32px; margin-bottom:20px;
}
.contact-info-row{ display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-top:1px solid var(--line-soft); }
.contact-info-row:first-child{ border-top:none; padding-top:0; }
.contact-info-row .ic{
  width:46px; height:46px; border-radius:13px; background: rgba(241,231,210,0.07); border:1px solid var(--line-soft-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#eadfc9;
}
.contact-info-row .lbl{ font-size:12.5px; font-weight:700; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px;}
.contact-info-row .val{ font-size:15.5px; font-weight:700; }
.contact-info-row .val a:hover{ color:#e2d0ae; }
@media (max-width:560px){
  .form-card{ padding:26px 20px; border-radius:20px; }
  .contact-info-card{ padding:24px 20px; border-radius:20px; }
  .contact-info-row{ gap:12px; }
  .contact-info-row > div:last-child{ min-width:0; }
  .contact-info-row .val{ overflow-wrap:anywhere; }
}

/* ---------- misc ---------- */
.divider{ height:1px; background: var(--line-soft); margin: 8px 0; }
.center-text{ text-align:center; }
.flex{ display:flex; }
.gap8{ gap:8px; } .gap12{ gap:12px; } .gap16{ gap:16px; } .gap20{ gap:20px; }
/* Content is visible by default; only hidden (for the reveal animation) when JS is active,
   so the page is never blank if JS fails or is disabled. */
.js .reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }

@media (max-width: 700px){
  .hero{ padding:132px 0 72px; }
  .section-pad{ padding:64px 0; }
  .cta-band{ padding:52px 22px; }
}

/* ---------- respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .card:hover, .card-light:hover, .btn-primary:hover{ transform:none; }
  .hero-showcase-shell{ transform:none !important; }
  .hero-home::after{ display:none; }
  .service-cosmos{ --cosmos-tilt-x:0deg; --cosmos-tilt-y:0deg; }
  .service-planet{
    animation:none !important;
    opacity:1 !important;
    filter:none !important;
    transform:translate3d(0,0,0) scale(.92) !important;
  }
  .service-planet--shopify{ left:18%; top:29%; }
  .service-planet--qr-landing-pages{ left:76%; top:28%; }
  .service-planet--saas{ left:77%; top:70%; }
  .service-planet--hr-attendance{ left:18%; top:69%; }
  .cosmos-sun,
  .cosmos-sun__corona,
  .cosmos-sun__ring,
  .cosmos-sun img,
  .cosmos-stars i,
  .cosmos-aurora,
  .service-cosmos::after{ animation:none !important; }
}