/* =========================================================
   Coordly — Full-screen panel scroll site
   Tokens
========================================================= */
:root{
  --primary: #dbfe7a;
  --primary-strong: #c8ef5c;
  --ink: #16392d;
  --ink-80: rgba(22,57,45,.82);
  --ink-70: rgba(22,57,45,.68);
  --ink-50: rgba(22,57,45,.5);
  --ink-30: rgba(22,57,45,.28);
  --ink-14: rgba(22,57,45,.14);
  --ink-08: rgba(22,57,45,.08);
  --white: #ffffff;
  --paper: #f5f4ee;
  --paper-2: #ece9df;

  --font: 'Ubuntu', -apple-system, 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .panel-scroller{ scroll-snap-type: none; }
  .panel{ min-height: auto; }
  .panel-reveal{ opacity:1 !important; transform:none !important; }
}

body{
  margin:0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font); margin:0; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; width:100%; }

/* =========================================================
   Panel scroll architecture
========================================================= */
.panel-scroller{
  height: 100vh; height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper);
}
.panel-scroller::-webkit-scrollbar{ width: 10px; }
.panel-scroller::-webkit-scrollbar-track{ background: var(--paper); }
.panel-scroller::-webkit-scrollbar-thumb{ background: var(--ink); border-radius: 10px; border: 2px solid var(--paper); }
.panel-scroller::-webkit-scrollbar-thumb:hover{ background: var(--primary-strong); }
.panel{
  min-height: 100vh; min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display:flex; flex-direction:column; justify-content:center;
  padding: 130px 0 70px;
  overflow: hidden;
}
@media (max-width: 900px){
  .panel{ padding: 110px 0 56px; }
}

.panel-title{
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.12;
  margin-bottom: 42px;
  font-weight: 700;
}
.panel-title-light{ color: var(--white); }

/* generic reveal — retriggerable each time a panel activates */
.panel-reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.panel.is-active .panel-reveal{ opacity:1; transform: translateY(0); }
.panel-reveal[data-delay="1"]{ transition-delay: .1s; }
.panel-reveal[data-delay="2"]{ transition-delay: .2s; }
.panel-reveal[data-delay="3"]{ transition-delay: .3s; }
.panel-reveal[data-delay="4"]{ transition-delay: .4s; }
.panel-reveal[data-delay="5"]{ transition-delay: .5s; }
.panel-reveal[data-delay="6"]{ transition-delay: .6s; }
.panel-reveal[data-delay="7"]{ transition-delay: .7s; }

.reveal-left{ transform: translateX(-40px); }
.panel.is-active .reveal-left{ transform: translateX(0); }
.reveal-right{ transform: translateX(40px); }
.panel.is-active .reveal-right{ transform: translateX(0); }
.reveal-pop{ transform: scale(.6); transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
.panel.is-active .reveal-pop{ transform: scale(1); }
@media (max-width: 640px){
  .reveal-left{ transform: translateX(-16px); }
  .reveal-right{ transform: translateX(16px); }
}

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn-lg{ padding: 15px 30px; font-size: 16px; }
.btn-primary{ background: var(--primary); color: var(--ink); }
.btn-primary:hover{ background: var(--primary-strong); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(22,57,45,.35); }
.btn-ink{ background: var(--ink); color: var(--primary); }
.btn-ink:hover{ background: #0f2a20; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(22,57,45,.4); }
.btn-ghost-dark{ background: transparent; color: var(--ink); }
.btn-ghost-dark:hover{ background: rgba(22,57,45,.08); }
.btn.full{ width:100%; }

/* =========================================================
   Scroll progress
========================================================= */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width: 0%;
  background: var(--ink);
  z-index: 500; transition: width .15s linear;
}

/* =========================================================
   Nav — transparent, color-adaptive header
========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 400;
  background: transparent;
  padding: 18px 0;
  transition: box-shadow .3s ease, padding .3s ease, background .35s ease, backdrop-filter .35s ease, opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.nav.scrolled{
  padding: 12px 0;
  background: rgba(245,244,238,.55);
  backdrop-filter: blur(10px) saturate(1.4);
}
body.on-dark-panel .nav.scrolled{ background: rgba(13,31,24,.45); }
.nav-inner{
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; color: var(--ink); }
.brand-mark{ color: var(--ink); flex-shrink:0; transition: color .35s ease; }
.brand-mark .mark-back{ animation: markPulseBack 4.4s ease-in-out infinite; transform-origin: 9.5px 15.5px; }
.brand-mark .mark-front{ animation: markPulseFront 4.4s ease-in-out infinite; transform-origin: 20px 10px; }
@keyframes markPulseBack{
  0%,100%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.12) rotate(-6deg); }
}
@keyframes markPulseFront{
  0%,100%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(.92) rotate(5deg); }
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-word{ font-family: var(--font); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--ink); transition: color .35s ease; }

.nav-links{ display:flex; gap: 30px; }
.nav-links a{ position:relative; font-size: 14.5px; font-weight: 500; color: var(--ink-80); transition: color .35s ease; }
.nav-links a span{ position:relative; }
.nav-links a span::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease), background .35s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover span::after{ transform: scaleX(1); }

.nav-cta{ display:flex; align-items:center; gap: 10px; }
.btn-ghost-dark{ transition: background .2s ease, color .35s ease; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-burger span{ width: 22px; height: 2px; background: var(--ink); border-radius:2px; transition: transform .3s ease, opacity .3s ease, background .35s ease; }
.nav-mobile{
  max-height:0; overflow:hidden; background: var(--primary);
  transition: max-height .35s var(--ease);
}
.nav-mobile.open{ max-height: 500px; box-shadow: 0 8px 18px -12px rgba(22,57,45,.3); }
.nav-mobile{ display:flex; flex-direction:column; padding-left: 32px; padding-right: 32px; gap: 4px; }
.nav-mobile a{ padding: 14px 0; font-weight:600; color: var(--ink); border-bottom: 1px solid rgba(22,57,45,.16); }
.nav-mobile .btn{ margin: 16px 0; }

/* Adaptive colors when a dark panel (security / footer) is active */
body.on-dark-panel .nav .brand-mark{ color: var(--primary); }
body.on-dark-panel .nav .brand-word{ color: var(--white); }
body.on-dark-panel .nav-links a{ color: rgba(255,255,255,.78); }
body.on-dark-panel .nav-links a:hover{ color: var(--white); }
body.on-dark-panel .nav-links a span::after{ background: var(--white); }
body.on-dark-panel .nav .btn-ghost-dark{ color: var(--white); }
body.on-dark-panel .nav .btn-ghost-dark:hover{ background: rgba(255,255,255,.12); }
body.on-dark-panel .nav-burger span{ background: var(--white); }

@media (max-width: 900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

/* =========================================================
   Dot navigation
========================================================= */
.panel-dots{
  position: fixed; right: 26px; top:50%; transform: translateY(-50%); z-index: 350;
  display:flex; flex-direction:column; gap: 14px;
}
.panel-dots button{
  width: 10px; height:10px; border-radius:50%; border: 1.5px solid var(--ink-30);
  background: transparent; padding:0; position:relative; transition: border-color .3s ease, transform .3s ease;
}
.panel-dots button span{ display:none; }
.panel-dots button::after{
  content:''; position:absolute; inset:2px; border-radius:50%; background: var(--ink);
  transform: scale(0); transition: transform .3s var(--ease);
}
.panel-dots button.active{ border-color: var(--ink); transform: scale(1.3); }
.panel-dots button.active::after{ transform: scale(1); }
.panel-dots button:hover{ border-color: var(--ink); }
body.on-dark-panel .panel-dots button{ border-color: rgba(255,255,255,.4); }
body.on-dark-panel .panel-dots button::after{ background: var(--primary); }
body.on-dark-panel .panel-dots button.active{ border-color: var(--primary); }

@media (max-width: 760px){ .panel-dots{ display:none; } }

/* =========================================================
   Hero
========================================================= */
.hero{
  background: var(--primary);
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-shape{ position:absolute; color: var(--ink); animation: heroDrift ease-in-out infinite; }
.hero-shape.shape-1{ width:170px; top:6%; left:3%; opacity:.16; animation-duration: 20s; }
.hero-shape.shape-2{ width:90px; top:70%; left:10%; opacity:.22; animation-duration: 15s; animation-delay:-2s; }
.hero-shape.shape-3{ width:210px; top:-6%; right:6%; opacity:.12; animation-duration: 24s; animation-delay:-5s; }
.hero-shape.shape-4{ width:60px; top:34%; right:22%; opacity:.26; animation-duration: 13s; animation-delay:-1s; }
.hero-shape.shape-5{ width:130px; bottom:2%; right:1%; opacity:.14; animation-duration: 21s; animation-delay:-8s; }
.hero-shape.shape-6{ width:50px; top:16%; left:44%; opacity:.2; animation-duration: 14s; animation-delay:-4s; }
.hero-shape.shape-7{ width:100px; bottom:14%; left:26%; opacity:.1; animation-duration: 22s; animation-delay:-6.5s; }
.hero-shape.shape-8{ width:38px; top:52%; right:8%; opacity:.24; animation-duration: 12s; animation-delay:-3.5s; }
.hero-shape.shape-9{ width:220px; top:26%; left:-4%; opacity:.08; animation-duration: 26s; animation-delay:-11s; }
.hero-shape.shape-10{ width:76px; top:4%; left:62%; opacity:.16; animation-duration: 17s; animation-delay:-9s; }
.hero-shape.shape-11{ width:140px; bottom:-3%; left:48%; opacity:.1; animation-duration: 23s; animation-delay:-13s; }
.hero-shape.shape-12{ width:46px; top:80%; right:34%; opacity:.22; animation-duration: 11s; animation-delay:-6s; }
@keyframes heroDrift{
  0%{ transform: translate(0,0) rotate(0deg) scale(1); }
  33%{ transform: translate(10px,-12px) rotate(5deg) scale(1.03); }
  66%{ transform: translate(-7px,7px) rotate(-4deg) scale(.98); }
  100%{ transform: translate(0,0) rotate(0deg) scale(1); }
}

.hero-center{ position: relative; z-index: 1; text-align:center; max-width: 900px; margin: 0 auto; }
.hero-title{
  font-size: clamp(38px, 6.2vw, 80px); line-height: 1.06; font-weight: 700; letter-spacing:-.02em;
  color: var(--ink);
}
.hero-sub{ font-size: 18px; line-height:1.6; color: var(--ink-70); max-width: 52ch; margin: 24px auto 0; }
.hero-actions{ display:flex; align-items:center; justify-content:center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-actions .btn-primary{ background: var(--ink); color: var(--primary); }
.hero-actions .btn-primary:hover{ background: #0f2a20; box-shadow: 0 10px 22px -10px rgba(22,57,45,.45); }
.btn-line-dark{ background: transparent; color: var(--ink); border-color: rgba(22,57,45,.32); }
.btn-line-dark:hover{ border-color: var(--ink); background: rgba(22,57,45,.08); }

.scroll-cue{
  position:absolute; left:50%; bottom: 36px; transform: translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; color: var(--ink-50); cursor:pointer;
  font-size: 11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
}
.scroll-cue svg{ width:18px; height:18px; animation: cueBounce 1.8s ease-in-out infinite; }
.scroll-cue:hover{ color: var(--ink); }
@keyframes cueBounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(7px); }
}

@media (max-width: 640px){
  .hero-shape{ opacity: .7; }
  .scroll-cue{ bottom: 22px; }
}

/* =========================================================
   Problem / Solution
========================================================= */
.problem-solution{ background: var(--white); }
.ps-grid{ display:grid; grid-template-columns: 1fr 74px 1fr; gap: 0 4px; align-items: stretch; }
.ps-card{ border-radius: var(--radius-lg); padding: 38px 34px; }
.ps-before{ background: var(--paper); border: 1px solid var(--ink-08); }
.ps-after{ background: var(--ink); color: var(--white); }
.ps-label{ font-family: var(--font); font-weight:700; font-size: 12.5px; text-transform: uppercase; letter-spacing:.06em; opacity:.6; display:block; margin-bottom: 24px; }
.ps-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom: 18px; font-size: 16px; line-height:1.5; font-weight:500; }
.ps-list li:last-child{ margin-bottom:0; }
.ps-mark{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.ps-mark svg{ width:11px; height:11px; }
.ps-mark-x{ background: rgba(22,57,45,.1); color: var(--ink-50); }
.ps-mark-check{ background: var(--primary); color: var(--ink); }
.ps-arrow{ display:flex; align-items:center; justify-content:center; color: var(--ink-30); }
.ps-arrow svg{ width: 48px; }

@media (max-width: 860px){
  .ps-grid{ grid-template-columns: 1fr; gap: 16px; }
  .ps-arrow{ transform: rotate(90deg); margin: -4px 0; }
}

/* =========================================================
   How it works
========================================================= */
.how-it-works{ background: var(--paper); }
.steps-cool{ display:flex; align-items:stretch; gap: 6px; }
.step-card{
  flex:1; min-width:0; background: var(--white); border: 1.5px solid var(--ink-14); border-radius: var(--radius-lg);
  padding: 30px 24px; transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.step-card:hover{ transform: translateY(-6px); border-color: var(--ink); box-shadow: 0 24px 44px -28px rgba(22,57,45,.3); }
.step-card-num{
  display:inline-flex; align-items:center; justify-content:center;
  width: 48px; height:48px; border-radius: 14px; background: var(--primary);
  color: var(--ink); font-family: var(--font); font-weight:700; font-size: 18px;
  border: 1.5px solid var(--ink); margin-bottom: 20px;
}
.step-card h3{ font-size: 19px; margin-bottom: 8px; }
.step-card p{ font-size: 14px; line-height:1.55; color: var(--ink-70); }
.step-chevron{ display:flex; align-items:center; justify-content:center; width: 30px; flex-shrink:0; color: var(--ink-30); align-self:center; }
.step-chevron svg{ width:18px; height:18px; }

@media (max-width: 900px){
  .steps-cool{ flex-direction:column; gap: 14px; }
  .step-chevron{ display:none; }
}

/* =========================================================
   Showcase — edge-to-edge screenshots with lower third
========================================================= */
.showcase{
  padding:0;
  background:#0d211a;
}
body.on-showcase-panel .nav{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-100%);
}
body.on-showcase-panel .scroll-progress{
  opacity:0;
}
.showcase-stage{
  position:absolute;
  inset:0;
  min-height:0;
  overflow:hidden;
  border-radius:0;
  background:#10271f;
  box-shadow:none;
}
.showcase-stage::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,21,16,.02) 52%, rgba(7,21,16,.42) 100%),
    radial-gradient(72% 46% at 50% 100%, rgba(0,0,0,.18), transparent 74%);
}
.showcase-stage::after{
  content:'';
  position:absolute;
  inset:-20% auto -20% -30%;
  z-index:6;
  width:30%;
  pointer-events:none;
  opacity:0;
  transform:skewX(-12deg);
  background:linear-gradient(90deg, transparent, rgba(219,254,122,.22), transparent);
}
.showcase-stage.is-switching::after{
  animation:showcaseSweep .82s cubic-bezier(.2,.8,.2,1) both;
}

.screenshot-window{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#16392d;
  box-shadow:none;
}
.showcase-screen-stack{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#16392d;
  perspective:1500px;
}
.screen{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.965);
  transform-origin:center;
  will-change:transform, opacity, filter, clip-path;
}
.screen::before{
  content:'';
  position:absolute;
  inset:-54px;
  z-index:0;
  background-image:var(--screen-image);
  background-size:cover;
  background-position:center center;
  filter:blur(34px) saturate(.82) brightness(.82);
  opacity:.94;
  transform:scale(1.12);
}
.screen::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(13,33,26,.12);
}
.screen.active{
  z-index:2;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.screen.enter-next{
  z-index:3;
  visibility:visible;
  animation:showcaseInNext .78s cubic-bezier(.16,.86,.28,1) both;
}
.screen.leave-next{
  z-index:2;
  visibility:visible;
  animation:showcaseOutNext .78s cubic-bezier(.4,0,.2,1) both;
}
.screen.enter-prev{
  z-index:3;
  visibility:visible;
  animation:showcaseInPrev .78s cubic-bezier(.16,.86,.28,1) both;
}
.screen.leave-prev{
  z-index:2;
  visibility:visible;
  animation:showcaseOutPrev .78s cubic-bezier(.4,0,.2,1) both;
}
.showcase-image{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center center;
  background:transparent;
  image-rendering:auto;
  -webkit-font-smoothing:antialiased;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.24));
  transform:none;
}

.showcase-bauchbinde{
  position:absolute;
  z-index:7;
  left:clamp(18px, 3.5vw, 58px);
  right:clamp(18px, 3.5vw, 58px);
  bottom:clamp(20px, 3.2vh, 40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "copy controls"
    "progress progress";
  column-gap:24px;
  row-gap:16px;
  align-items:center;
  padding:22px 24px 17px;
  border:1px solid rgba(22,57,45,.15);
  border-radius:18px;
  background:#dbfe7a;
  color:#16392d;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.55);
  overflow:hidden;
  opacity:.88;
  transition:opacity .28s ease, transform .28s var(--ease), box-shadow .28s ease;
}
.showcase-bauchbinde:hover,
.showcase-bauchbinde:focus-within{
  opacity:1;
  transform:translateY(-2px);
  box-shadow:0 30px 58px -26px rgba(0,0,0,.64);
}
.showcase-bauchbinde::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg, rgba(255,255,255,.22), transparent 34%);
}
.showcase-bauchbinde.is-changing .showcase-copy{
  animation:captionSwitch .56s cubic-bezier(.2,.8,.2,1) both;
}
.showcase-copy{
  grid-area:copy;
  position:relative;
  z-index:1;
  min-width:0;
}
.showcase-copy h2{
  margin:0;
  font-size:clamp(22px,2.25vw,36px);
  line-height:1.04;
  color:#16392d;
}
.showcase-copy p{
  max-width:760px;
  margin-top:7px;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.35;
  color:rgba(22,57,45,.76);
}
.showcase-controls{
  grid-area:controls;
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
}
.showcase-arrow{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:1.5px solid #16392d;
  border-radius:50%;
  background:transparent;
  color:#16392d;
  transition:transform .24s var(--ease), background .2s ease, color .2s ease;
}
.showcase-arrow svg{width:20px;height:20px;}
.showcase-arrow:hover{
  transform:scale(1.08);
  background:#16392d;
  color:#dbfe7a;
}
.showcase-arrow:active{transform:scale(.96);}
.showcase-progress{
  grid-area:progress;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:7px;
  width:100%;
  margin:0;
}
.showcase-tab{
  position:relative;
  height:5px;
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:rgba(22,57,45,.18);
  opacity:1;
  transform:none;
  transition:height .25s var(--ease), background .25s ease, transform .25s var(--ease);
}
.showcase-tab::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:#16392d;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .46s cubic-bezier(.2,.75,.2,1);
}
.showcase-tab:hover{
  height:8px;
  background:rgba(22,57,45,.3);
}
.showcase-tab.active{background:rgba(22,57,45,.24); transform:none;}
.showcase-tab.active::after{transform:scaleX(1);}
.showcase-tab:focus-visible,
.showcase-arrow:focus-visible{outline:3px solid #fff; outline-offset:3px;}

@keyframes showcaseInNext{
  0%{opacity:0; filter:blur(18px) saturate(.72); transform:translate3d(15%,0,0) scale(1.08) rotateY(-7deg); clip-path:inset(0 0 0 100% round 14px);}
  55%{opacity:1; filter:blur(3px) saturate(.95);}
  100%{opacity:1; filter:none; transform:none; clip-path:inset(0 round 0);}
}
@keyframes showcaseOutNext{
  0%{opacity:1; filter:none; transform:none; clip-path:inset(0 round 0);}
  100%{opacity:0; filter:blur(10px) saturate(.7); transform:translate3d(-8%,0,0) scale(.94) rotateY(5deg); clip-path:inset(0 100% 0 0 round 14px);}
}
@keyframes showcaseInPrev{
  0%{opacity:0; filter:blur(18px) saturate(.72); transform:translate3d(-15%,0,0) scale(1.08) rotateY(7deg); clip-path:inset(0 100% 0 0 round 14px);}
  55%{opacity:1; filter:blur(3px) saturate(.95);}
  100%{opacity:1; filter:none; transform:none; clip-path:inset(0 round 0);}
}
@keyframes showcaseOutPrev{
  0%{opacity:1; filter:none; transform:none; clip-path:inset(0 round 0);}
  100%{opacity:0; filter:blur(10px) saturate(.7); transform:translate3d(8%,0,0) scale(.94) rotateY(-5deg); clip-path:inset(0 0 0 100% round 14px);}
}
@keyframes showcaseSweep{
  0%{left:-35%; opacity:0;}
  20%{opacity:1;}
  100%{left:120%; opacity:0;}
}
@keyframes captionSwitch{
  0%{opacity:.2; transform:translateY(12px) scale(.985); filter:blur(5px);}
  100%{opacity:1; transform:none; filter:none;}
}

@media (max-width:900px){
  .showcase-bauchbinde{
    left:14px;
    right:14px;
    bottom:14px;
    column-gap:14px;
    padding:18px 18px 14px;
    border-radius:15px;
  }
  .showcase-copy p{max-width:560px;}
}
@media (max-width:700px){
  .screen::before{
    inset:-40px;
    filter:blur(26px) saturate(.78) brightness(.8);
  }
  .showcase-stage::before{
    background:linear-gradient(180deg, transparent 38%, rgba(7,21,16,.46) 100%);
  }
  .showcase-bauchbinde{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "copy controls"
      "progress progress";
    row-gap:12px;
  }
  .showcase-copy h2{font-size:22px;}
  .showcase-copy p{font-size:13px;}
  .showcase-arrow{width:38px;height:38px;}
}
@media (max-width:430px){
  .showcase-bauchbinde{left:8px;right:8px;bottom:8px;padding:14px 14px 12px;}
  .showcase-copy p{line-height:1.3;}
}

/* =========================================================
   AI page
========================================================= */
.ai-page{
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 60% at 84% 12%, rgba(219,254,122,.16), transparent 64%),
    radial-gradient(70% 80% at 8% 78%, rgba(219,254,122,.08), transparent 60%),
    linear-gradient(145deg, #102a22 0%, var(--ink) 48%, #0f2c23 100%);
  color: rgba(255,255,255,.72);
}
.ai-page::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 72% 44%, #000 0%, transparent 68%);
}
.ai-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ai-shape{ position:absolute; color: var(--primary); animation: heroDrift ease-in-out infinite; }
.ai-shape.ashape-1{ width:140px; top:10%; left:5%; opacity:.12; animation-duration: 21s; }
.ai-shape.ashape-2{ width:70px; top:66%; left:14%; opacity:.2; animation-duration: 15s; animation-delay:-3s; }
.ai-shape.ashape-3{ width:180px; top:-4%; right:4%; opacity:.09; animation-duration: 25s; animation-delay:-8s; }
.ai-shape.ashape-4{ width:52px; bottom:10%; right:16%; opacity:.24; animation-duration: 13s; animation-delay:-5s; }

.ai-inner{ position:relative; z-index:1; }
.ai-slider{ position:relative; min-height: 610px; }
.ai-step{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateX(46px) scale(.985);
  transition: opacity .5s var(--ease), transform .65s var(--ease), visibility 0s linear .65s;
}
.ai-step.active{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition-delay:0s;
}
.ai-layout{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items:center; width:100%; }
.ai-layout-upgraded{ grid-template-columns: minmax(340px,.9fr) minmax(520px,1.1fr); gap: 72px; }
.ai-copy-upgraded{ max-width: 520px; }
.ai-badge{
  display:inline-flex; align-items:center; font-family: var(--font); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.08em; color: var(--ink); background: var(--primary);
  border-radius:20px; padding:7px 16px; margin-bottom:22px;
  box-shadow: 0 12px 34px rgba(219,254,122,.22);
}
.ai-title{ max-width: 11ch; }
.ai-title-upgraded{ max-width: 12ch; margin-bottom: 20px; }
.ai-lead{ font-size: clamp(16px, 1.45vw, 20px); line-height:1.55; color: rgba(255,255,255,.68); max-width: 610px; }

.ai-stage{ position:relative; min-height: 580px; display:flex; align-items:center; justify-content:center; perspective: 1200px; }
.ai-orbit{ position:absolute; border-radius: 999px; border:1px solid rgba(219,254,122,.2); filter: blur(.1px); }
.ai-orbit-one{ width: 560px; height: 560px; transform: rotate(-15deg) scaleY(.72); opacity:.45; }
.ai-orbit-two{ width: 430px; height: 430px; transform: rotate(22deg) scaleY(.76); opacity:.32; }
.ai-assistant-card{
  position:relative; z-index:2; width:min(460px, 100%); padding: 20px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,244,238,.9));
  box-shadow: 0 34px 100px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.8);
  color: var(--ink); transform: rotate(-2deg);
}
.ai-assistant-card::before{
  content:''; position:absolute; inset:-1px; border-radius:31px; padding:1px; pointer-events:none;
  background: linear-gradient(145deg, rgba(219,254,122,.9), rgba(255,255,255,.2), rgba(219,254,122,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ai-card-topline{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ai-card-topline b{ display:block; font-size:16px; line-height:1.1; }
.ai-card-topline small{ display:block; margin-top:4px; color: var(--ink-50); font-size:12px; font-weight:600; }
.ai-status{ margin-left:auto; border-radius: 999px; padding: 7px 12px; background: rgba(219,254,122,.78); color: var(--ink); font-size: 11px; font-weight:700; white-space:nowrap; }
.ai-chat-bubble{ border-radius: 18px; padding: 16px 18px; font-size: 15px; line-height:1.45; font-weight:600; }
.ai-user-bubble{ background: var(--ink); color: var(--white); box-shadow: 0 18px 40px rgba(22,57,45,.18); }
.ai-flow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 18px 2px; }
.ai-flow span{ font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-70); }
.ai-flow i{ flex:1; height:1px; background: linear-gradient(90deg, var(--ink-14), var(--primary), var(--ink-14)); }
.ai-preview-card{ border-radius:24px; background: var(--white); padding: 16px; box-shadow: inset 0 0 0 1px rgba(22,57,45,.08); }
.ai-preview-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 12px; }
.ai-preview-head span{ font-size:15px; font-weight:700; }
.ai-field{ padding: 12px 13px; border-radius:16px; background: var(--paper); border:1px solid rgba(22,57,45,.08); }
.ai-field.active{ background: rgba(219,254,122,.35); border-color: rgba(22,57,45,.12); }
.ai-field span{ display:block; font-size: 11px; text-transform:none; letter-spacing:0; font-weight:700; color: var(--ink-50); margin-bottom:5px; }
.ai-field b{ display:block; font-size: 13.5px; line-height:1.25; }
.ai-field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px; }
.ai-checklist-preview{ display:grid; gap:8px; margin-top: 12px; }
.ai-checklist-preview li{ position:relative; padding-left:24px; font-size: 13px; line-height:1.35; color: var(--ink-80); }
.ai-checklist-preview li::before{ content:'✓'; position:absolute; left:0; top:-1px; width:16px; height:16px; border-radius:50%; background: var(--ink); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size: 10px; font-weight:700; }
.ai-mini-card{
  position:absolute; z-index:3; width: 190px; padding: 16px 17px; border-radius: 20px;
  color: var(--white); background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px); box-shadow: 0 24px 70px rgba(0,0,0,.2);
}
.ai-mini-card strong{ display:block; font-size: 15px; margin-bottom:5px; color: var(--primary); }
.ai-mini-card span{ display:block; font-size: 12.5px; line-height:1.35; color: rgba(255,255,255,.68); }
.ai-mini-a{ top: 34px; left: calc(50% - 407px); transform: rotate(2deg); }
.ai-mini-b{ right: calc(50% - 407px); top: 164px; transform: rotate(-2deg); }
.ai-mini-c{ left: calc(50% - 407px); bottom: 54px; transform: rotate(-2deg); }

.ai-feature-step{ align-items:center; }
.ai-feature-layout{ display:grid; grid-template-columns: minmax(280px,.72fr) minmax(640px,1.28fr); gap:60px; align-items:center; width:100%; }
.ai-feature-intro{ max-width:410px; }
.ai-feature-title{ max-width:10ch; margin-bottom:20px; }
.ai-capability-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; }
.ai-capability-card{
  position:relative; min-height:0; padding:16px 18px 13px 62px; border-radius:20px;
  display:flex; flex-direction:column; justify-content:flex-start;
  background:#dbfe7a; border:1px solid rgba(22,57,45,.13); color:#16392d;
  box-shadow:0 20px 55px rgba(0,0,0,.13);
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.ai-capability-card:hover{ transform:translateY(-3px); box-shadow:0 25px 62px rgba(0,0,0,.18); }
.ai-capability-icon{
  position:absolute; left:17px; top:16px; width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; background:rgba(22,57,45,.10);
  color:#16392d;
}
.ai-capability-icon svg{ width:19px; height:19px; }
.ai-capability-icon svg *{ stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ai-capability-card h3{ color:#16392d; font-size:15.5px; margin-bottom:6px; }
.ai-capability-card p{ color:#16392d; font-size:12.5px; line-height:1.42; opacity:.82; }

.ai-step-control{
  position:absolute; left:32px; bottom:-4px; display:flex; align-items:center; gap:8px; z-index:8;
}
.ai-step-control button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.3);
  transition:width .25s var(--ease), border-radius .25s ease, background .25s ease;
}
.ai-step-control button.active{ width:28px; border-radius:999px; background:var(--primary); }
.ai-step-hint{ margin-left:8px; color:rgba(255,255,255,.5); font-size:12px; font-weight:500; }
.ai-step-control.showing-features .ai-step-hint{ opacity:0; }

@media (max-width: 1350px){
  .ai-mini-b{ right:12px; top:auto; bottom:-42px; }
}
@media (max-width: 1180px){
  .ai-layout-upgraded{ grid-template-columns: minmax(310px,.85fr) minmax(480px,1.15fr); gap:48px; }
  .ai-feature-layout{ grid-template-columns:minmax(250px,.65fr) minmax(560px,1.35fr); gap:36px; }
}
@media (max-width: 980px){
  .ai-slider{ min-height:700px; }
  .ai-layout-upgraded{ grid-template-columns:1fr; gap:24px; }
  .ai-copy-upgraded{ max-width:760px; }
  .ai-title-upgraded{ max-width:15ch; }
  .ai-stage{ min-height:460px; }
  .ai-feature-layout{ grid-template-columns:1fr; gap:24px; }
  .ai-feature-intro{ max-width:760px; }
  .ai-feature-title{ max-width:none; font-size:clamp(30px,5vw,46px); margin-bottom:12px; }
}
@media (max-width: 900px){
  .ai-page{ overflow-y:auto; }
  .ai-slider{ min-height:720px; }
  .ai-title{ max-width:none; }
  .ai-stage{ min-height:440px; padding:12px 0 102px; }
  .ai-assistant-card{ transform:none; width:min(520px,100%); }
  .ai-mini-card{ width:calc(50% - 8px); }
  .ai-mini-a{ left:0; top:auto; bottom:6px; transform:none; }
  .ai-mini-b{ right:0; top:auto; bottom:6px; transform:none; }
  .ai-mini-c{ display:none; }
  .ai-step-control{ left:32px; bottom:-8px; }
  .ai-step-hint{ display:none; }
}
@media (max-width: 700px){
  .ai-slider{ min-height:900px; }
  .ai-feature-intro .ai-lead{ font-size:15px; }
  .ai-step-hint{ display:none; }
}
@media (max-width: 640px){
  .ai-slider{ min-height:920px; }
  .ai-stage{ padding-bottom:148px; }
  .ai-field-grid{ grid-template-columns:1fr; }
  .ai-mini-card{ width:100%; }
  .ai-mini-a{ bottom:72px; }
  .ai-mini-b{ bottom:0; }
  .ai-status{ display:inline-flex; }
  .ai-capability-card{ padding-left:62px; }
  .ai-capability-card p{ font-size:12px; }
  .ai-step-control{ left:24px; }
}
@media (max-width: 560px){
  .ai-slider{ min-height:1010px; }
  .ai-capability-grid{ grid-template-columns:1fr; gap:8px; }
  .ai-capability-card{ min-height:auto; padding-top:14px; padding-bottom:13px; }
  .ai-capability-icon{ top:14px; }
}

/* =========================================================
   Feature grid
========================================================= */
.feature-grid-section{ background: var(--paper); }
.fgrid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--ink-14); border-radius: var(--radius-lg); overflow:hidden; }
.fcard{ background: var(--white); padding: 22px 20px; transition: background .25s ease, transform .3s var(--ease); }
.fcard:hover{ background: var(--paper); transform: translateY(-4px); }
.fcard svg{ width: 21px; height:21px; color: var(--ink); margin-bottom: 12px; transform: scale(.5) rotate(-8deg); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; }
.panel.is-active .fcard svg{ transform: scale(1) rotate(0deg); opacity: 1; }
.fcard:hover svg{ transform: scale(1.1) rotate(-4deg); }
.fcard h3{ font-size: 14.5px; margin-bottom: 6px; }
.fcard p{ font-size: 12.5px; line-height:1.5; color: var(--ink-70); }

@media (max-width: 980px){ .fgrid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .fgrid{ grid-template-columns: 1fr; } }

/* =========================================================
   Security
========================================================= */
.security{ background: var(--ink); color: var(--white); }
.security-inner{ text-align:center; }
.security-copy{ max-width: 900px; margin: 0 auto; }
.security-copy .panel-title{ max-width: none; }
.security-list{
  margin-top: 10px; display:grid; grid-template-columns: repeat(2,1fr); gap: 0 40px;
  text-align:left;
}
.security-list li{ display:flex; gap: 16px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
.security-list li:nth-last-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,.12); }
.sicon{ flex-shrink:0; width: 38px; height:38px; border-radius: 10px; background: rgba(219,254,122,.14); display:flex; align-items:center; justify-content:center; color: var(--primary); }
.sicon svg{ width:18px; height:18px; }
.security-list b{ display:block; font-size:15px; margin-bottom:5px; font-weight:700; }
.security-list p{ font-size: 13.5px; line-height:1.55; color: rgba(255,255,255,.55); }

@media (max-width: 700px){
  .security-list{ grid-template-columns: 1fr; }
  .security-list li{ border-bottom: none; }
  .security-list li:last-child{ border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* =========================================================
   Audiences
========================================================= */
.audiences{ background: var(--white); }
.audience-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.acard{
  border: 1px solid var(--ink-14); border-radius: var(--radius-md); padding: 26px 22px;
  transition: border-color .25s ease, background .25s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.acard:hover{ border-color: var(--ink); background: var(--paper); transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 20px 34px -24px rgba(22,57,45,.3); }
.acard-icon{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius: 12px; background: var(--paper); color: var(--ink); margin-bottom: 16px;
  transition: background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.acard-icon svg{ width:20px; height:20px; }
.acard:hover .acard-icon{ background: var(--primary); transform: scale(1.1) rotate(-6deg); }
.acard h3{ font-size: 15.5px; margin: 10px 0 8px; }
.acard p{ font-size: 12.5px; line-height:1.55; color: var(--ink-70); }

@media (max-width: 980px){ .audience-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .audience-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Comparison
========================================================= */
.comparison{ background: var(--white); }
.comparison .container{ max-width:1360px; text-align:center; }
.comparison .panel-title{ max-width:none; }
.compare-table{
  width:100%; max-width:1080px; margin:0 auto; text-align:left;
  border:1px solid var(--ink-14); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 54px -36px rgba(22,57,45,.25);
}
.compare-row{ display:grid; grid-template-columns:minmax(360px,1.55fr) minmax(190px,.72fr) minmax(220px,.82fr); align-items:stretch; }
.compare-row:not(.compare-head){ border-top:1px solid var(--ink-08); }
.compare-head{ background:var(--paper); }
.compare-col-label{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  text-align:center; color:var(--ink-50); padding:20px 22px;
}
.compare-col-label strong{ font-size:13px; line-height:1.25; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.compare-col-label small{ max-width:170px; font-size:12px; line-height:1.35; font-weight:500; color:var(--ink-50); }
.compare-col-featured{ color:var(--ink); background:rgba(219,254,122,.35); border-radius:0 var(--radius-lg) 0 0; }
.compare-col-featured small{ color:var(--ink-70); }
.compare-feature{ display:flex; align-items:center; padding:18px 28px; font-size:14px; line-height:1.45; font-weight:600; color:var(--ink); }
.compare-mark{ display:flex; align-items:center; justify-content:center; padding:18px 16px; min-height:64px; }
.compare-badge{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.compare-badge svg{ width:13px; height:13px; }
.compare-no .compare-badge{ background:var(--ink-08); color:var(--ink-30); }
.compare-yes{ background:rgba(219,254,122,.18); }
.compare-yes .compare-badge{ background:var(--ink); color:var(--primary); }
.compare-row:last-child .compare-yes{ border-radius:0 0 var(--radius-lg) 0; }

@media (max-width:960px){
  .comparison .container{ padding-left:24px; padding-right:24px; }
  .compare-row{ grid-template-columns:minmax(280px,1.45fr) minmax(150px,.75fr) minmax(170px,.85fr); }
  .compare-feature{ padding:17px 22px; }
  .compare-col-label{ padding:18px 14px; }
}

@media (max-width:700px){
  .comparison .container{ padding-left:16px; padding-right:16px; }
  .comparison .panel-title{ margin-bottom:28px; }
  .compare-table{ border-radius:18px; }
  .compare-row{ grid-template-columns:minmax(0,1fr) 92px 104px; }
  .compare-feature{ padding:15px 14px; font-size:12.5px; line-height:1.4; hyphens:auto; }
  .compare-mark{ padding:15px 8px; min-height:58px; }
  .compare-col-label{ padding:14px 7px; gap:3px; }
  .compare-col-label strong{ font-size:10px; line-height:1.2; letter-spacing:.02em; }
  .compare-col-label small{ font-size:9.5px; line-height:1.25; }
  .compare-badge{ width:27px; height:27px; }
}

@media (max-width:430px){
  .compare-row{ grid-template-columns:minmax(0,1fr) 72px 82px; }
  .compare-feature{ padding:13px 11px; font-size:11.5px; }
  .compare-mark{ padding:13px 5px; }
  .compare-col-label{ padding:12px 4px; }
  .compare-col-label strong{ font-size:9px; }
  .compare-col-label small{ display:none; }
}

/* =========================================================
   Pricing
========================================================= */
.pricing{ background: var(--paper); }
.pricing .container{ text-align:center; }
.pricing .panel-title{ max-width: none; }
.pricing-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; max-width: 820px; margin: 0 auto; }
.price-card{
  position:relative; background: var(--white); border: 1.5px solid var(--ink-14); border-radius: var(--radius-lg);
  padding: 34px 30px; display:flex; flex-direction:column; text-align:center;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.price-card:hover{ transform: translateY(-4px); }
.price-card-featured{ background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 0 30px 54px -30px rgba(22,57,45,.4); }
.price-badge{
  position:absolute; top:-13px; left:50%; transform: translateX(-50%); background: var(--primary); color: var(--ink);
  font-size: 11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding: 5px 14px; border-radius: 20px; white-space:nowrap;
}
.price-name{ font-size: 13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-50); }
.price-card-featured .price-name{ color: rgba(255,255,255,.5); }
.price-amount{ display:flex; flex-direction:column; align-items:center; gap:2px; margin: 12px 0 6px; }
.price-num{ font-family: var(--font); font-size: 46px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.price-period{ font-size: 12.5px; color: var(--ink-50); }
.price-card-featured .price-period{ color: rgba(255,255,255,.5); }
.price-users{ display:block; font-size: 13px; font-weight:600; color: var(--ink-70); margin-bottom: 26px; }
.price-card-featured .price-users{ color: rgba(255,255,255,.7); }
.price-features{ display:flex; flex-direction:column; gap: 13px; margin-bottom: 28px; flex:1; text-align:left; }
.price-features li{
  display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; column-gap:10px;
  font-size:14px; line-height:1.45; font-weight:500;
}
.price-features .ps-mark{ margin-top:0; align-self:center; }
.price-card-featured .ps-mark-check{ background: var(--primary); color: var(--ink); }

@media (max-width: 760px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   CTA band
========================================================= */
.cta-band{ background: var(--primary); }
.cta-inner{ text-align:center; }
.cta-mark{ display:inline-flex; color: var(--ink); margin-bottom: 20px; animation: ctaBob 3.2s ease-in-out infinite; }
@keyframes ctaBob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-7px) rotate(-6deg); }
}
.cta-inner h2{ font-size: clamp(28px,4.6vw,48px); color: var(--ink); line-height:1.12; margin-bottom: 14px; font-weight:700; }
.cta-inner p{ font-size: 16.5px; color: var(--ink-70); margin-bottom: 30px; }

/* =========================================================
   Contact
========================================================= */
.contact{ background: var(--white); position:relative; overflow:hidden; }
.contact-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.contact-shape{ position:absolute; color: var(--ink); animation: heroDrift ease-in-out infinite; }
.contact-shape.cshape-1{ width:90px; top:10%; left:4%; opacity:.05; animation-duration: 20s; }
.contact-shape.cshape-2{ width:60px; bottom:12%; right:8%; opacity:.06; animation-duration: 16s; animation-delay:-5s; }
.contact-shape.cshape-3{ width:130px; top:60%; left:48%; opacity:.04; animation-duration: 24s; animation-delay:-9s; }

.contact-inner{ position:relative; z-index:1; display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.contact-copy p{ font-size: 15.5px; line-height:1.65; color: var(--ink-70); margin-top: 14px; max-width: 42ch; }
.contact-copy p:first-of-type{ margin-top: 4px; }
.contact-info{ margin-top: 26px; display:flex; flex-direction:column; gap:6px; }
.contact-info a{ font-family: var(--font); font-size: 20px; font-weight:700; }
.contact-info a:hover{ color: var(--ink-70); }
.contact-info span{ font-size: 12.5px; color: var(--ink-50); }

.contact-form{
  position:relative; background: var(--paper); border-radius: var(--radius-lg); padding: 30px;
  border: 1px solid var(--ink-08); box-shadow: 0 34px 60px -38px rgba(22,57,45,.28);
}
.contact-form::before{
  content:''; position:absolute; top:0; left:30px; right:30px; height:3px;
  background: var(--primary); border-radius:0 0 4px 4px;
}
.hubspot-form{ min-width:0; }
.hubspot-form .hs-form-frame{ width:100%; min-height:420px; }
.hubspot-form iframe{ width:100% !important; max-width:100% !important; border:0 !important; }

@media (max-width: 900px){
  .contact-inner{ grid-template-columns: 1fr; gap: 30px; }
  .contact-form{ padding:22px; }
  .contact-form::before{ left:22px; right:22px; }
}

/* =========================================================
   Footer — full panel finale
========================================================= */
.footer{
  position: relative; overflow: hidden; justify-content:center; align-items:center;
  background:
    radial-gradient(55% 60% at 85% 10%, rgba(219,254,122,.08), transparent 65%),
    radial-gradient(120% 100% at 50% 100%, #1c4234 0%, var(--ink) 60%);
  color: rgba(255,255,255,.7);
  text-align:center;
}
.footer-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.footer-shape{ position:absolute; color: var(--primary); animation: heroDrift ease-in-out infinite; }
.footer-shape.fshape-1{ width:150px; top:8%; left:4%; opacity:.16; animation-duration: 22s; }
.footer-shape.fshape-2{ width:70px; top:60%; left:18%; opacity:.26; animation-duration: 16s; animation-delay:-4s; }
.footer-shape.fshape-3{ width:190px; top:0%; right:6%; opacity:.12; animation-duration: 26s; animation-delay:-9s; }
.footer-shape.fshape-4{ width:54px; bottom:24%; right:22%; opacity:.3; animation-duration: 14s; animation-delay:-2s; }
.footer-shape.fshape-5{ width:110px; bottom:6%; left:46%; opacity:.14; animation-duration: 20s; animation-delay:-12s; }

.footer-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer-logo{ color: var(--primary); margin-bottom: 6px; }
.footer-logo .mark-back{ animation: markPulseBack 4.4s ease-in-out infinite; transform-origin: 9.5px 15.5px; }
.footer-logo .mark-front{ animation: markPulseFront 4.4s ease-in-out infinite; transform-origin: 20px 10px; }
.footer-word{ font-size: clamp(44px, 7vw, 84px); color: var(--white); font-weight:700; letter-spacing:-.02em; margin-bottom: 30px; }

.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap: 26px; margin-bottom: 44px; }
.footer-links a{ font-size: 14.5px; font-weight:500; color: rgba(255,255,255,.72); transition: color .2s ease; }
.footer-links a:hover{ color: var(--primary); }

.footer-bottom{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; color: rgba(255,255,255,.4); font-weight:500;
  width:100%; max-width: 480px;
}
.footer-legal{ display:flex; gap:16px; }
.footer-legal a{ color: rgba(255,255,255,.4); transition: color .2s ease; }
.footer-legal a:hover{ color: var(--primary); }

@media (max-width: 480px){
  .footer-links{ gap: 16px 22px; }
}

/* Showcase control states */
.showcase-arrow:disabled{
  opacity:.34;
  cursor:not-allowed;
  transform:none;
  background:transparent;
  color:#16392d;
}