/* ============================================
   peopleHub — Design tokens
   ============================================ */
:root{
  --navy: #222c61;
  --navy-deep: #171b40;
  --navy-soft: #4a5080;
  --orange: #f6883c;
  --orange-dark: #ef7623;
  --blue: #1154a0;
  --gold: #efb746;
  --bg-tint: #eef3f8;
  --bg-tint-2: #f5f8fb;
  --text-body: #5a6180;
  --text-body-light: #7d84a3;
  --white: #ffffff;
  --line: #e3e8f2;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 12px 30px -14px rgba(38,43,94,0.18);
  --shadow-soft: 0 4px 16px -6px rgba(38,43,94,0.12);

  --container: 1320px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1,h2,h3,h4{
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--navy);
  margin: 0 0 .5em 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em 0; color: var(--text-body); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.eyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 14px;
  display:block;
}

.accent{ color: var(--blue); }

/* ============ Buttons ============ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: linear-gradient(135deg, var(--navy) 0%, #363c7d 100%);
  color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(38,43,94,0.45);
}
.btn-primary:hover{ box-shadow: 0 14px 28px -8px rgba(38,43,94,0.55); }
.btn-secondary{
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn-secondary:hover{ border-color: var(--navy); }
.btn-store{
  background: var(--navy-deep);
  color: var(--white);
}
.btn-store svg{ flex-shrink:0; }
.btn-store .store-text{ text-align:left; line-height:1.2; }
.btn-store .store-text small{ display:block; font-size:11px; font-weight:400; opacity:.75; }
.btn-store .store-text strong{ display:block; font-size:15px; }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding: 11px 20px; font-size: 14px; }

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  height: 84px;
}
.logo{ flex-shrink:0; }
.logo img{ height: 32px; width:auto; }
.main-nav ul{ display:flex; gap: 36px; }
.main-nav a{
  font-size: 15px; font-weight: 500; color: var(--navy);
  position: relative; padding: 4px 0;
}
.main-nav a.is-active{ color: var(--blue); }
.main-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--blue); border-radius: 2px;
}
.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; background:none; border:none; width:40px; height:40px;
  flex-direction: column; align-items:center; justify-content:center;
  flex-shrink: 0; padding:0; gap: 5px;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; display:block; width:22px; height:2px; background:var(--navy);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-active::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active::after{ transform: translateY(-7px) rotate(-45deg); }
.nav-toggle.is-active span{ opacity:0; }

/* ============ Hero ============ */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--bg-tint-2);
  padding: 72px 0 96px;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
  position:relative; z-index:1;
}
.hero h1{ font-size: 46px; font-weight: 700; }
.hero .lead{ font-size: 17px; max-width: 480px; margin-bottom: 30px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 44px; }
.trust-row{ display:flex; gap: 28px; flex-wrap: wrap; }
.trust-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color: var(--text-body); max-width:170px; }
.trust-item svg{ flex-shrink:0; color: var(--orange); }

.hero-visual{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height: 560px; }
.wave-decor{ position:absolute; top:-30px; left:-70px; width:520px; height:auto; z-index:0; opacity:.95; pointer-events:none; }
.blob{
  position:absolute; inset: -40px -10px auto auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 35% 30%, rgba(17,84,160,0.14), rgba(34,44,97,0.04) 70%);
  border-radius: 50%;
  z-index:0;
}
.photo-frame{
  position:relative; z-index:1;
  width: 300px;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow-card), 0 30px 50px -20px rgba(34,44,97,0.28);
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4/5; }
.dot-accent{
  position:absolute; border-radius:50%; z-index:0;
}
.dot-1{ width:16px; height:16px; background:var(--orange); top:10%; left:4%; }
.dot-2{ width:10px; height:10px; background:var(--blue); top:58%; left:-2%; }
.dot-3{ width:13px; height:13px; background:var(--gold); bottom:5%; right:2%; opacity:.85; }
.dot-4{ width:8px; height:8px; background:var(--navy); top:6%; right:12%; opacity:.4; }

.notif-card{
  position:absolute; top: 4%; right: -8%;
  z-index: 4;
  width: 230px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  display:flex; gap:12px; align-items:flex-start;
}
.notif-card .notif-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  display:flex; align-items:center; justify-content:center;
}
.notif-card strong{ display:block; font-size:13.5px; color:var(--navy); margin-bottom:3px; }
.notif-card span{ font-size: 12px; color: var(--text-body-light); line-height:1.4; }

.phone-mock{
  position:relative; z-index:3;
  width: 250px;
  margin-left: -60px;
  margin-bottom: -10px;
  background: var(--navy-deep);
  border-radius: 42px;
  padding: 12px;
  box-shadow: var(--shadow-card), 0 30px 60px -20px rgba(23,27,64,0.4);
}
.phone-mock .screen{
  background: var(--white);
  border-radius: 32px;
  overflow:hidden;
  padding: 16px 18px 10px;
  display:flex; flex-direction:column;
  min-height: 460px;
}
.status-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:0 2px; }
.status-bar .time{ font-size:12px; font-weight:700; color:var(--navy); }
.status-bar .icons{ display:flex; align-items:center; gap:5px; }
.phone-mock .screen-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.phone-mock .screen-head img{ height:18px; }
.phone-mock .bell{ width:30px;height:30px;border-radius:50%; background: var(--bg-tint); display:flex;align-items:center;justify-content:center; }
.phone-mock h4{ font-size: 17px; margin-bottom:2px; }
.phone-mock .sub{ font-size: 12.5px; color: var(--text-body-light); margin-bottom:20px; }
.mini-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.mini-card{
  background: var(--bg-tint); border-radius: 14px; padding: 12px 10px;
  display:flex; flex-direction:column; gap:8px;
}
.mini-card .ico{ width:30px;height:30px;border-radius:9px; display:flex;align-items:center;justify-content:center; }
.mini-card .ico img{ width:17px; height:17px; }
.mini-card span{ font-size: 12px; font-weight:600; color: var(--navy); }

.screen-spacer{ flex:1; }

.bottom-nav{
  display:flex; justify-content:space-around; align-items:center;
  padding-top: 14px; margin-top:14px;
  border-top: 1px solid var(--line);
}
.bottom-nav .nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.bottom-nav .nav-item span{ font-size:9.5px; color: var(--text-body-light); font-weight:600; }
.bottom-nav .nav-item.is-active span{ color: var(--navy); }
.bottom-nav .nav-item.is-active svg{ stroke: var(--navy); }
.bottom-nav .nav-item svg{ stroke: #b7bdd3; }

.home-indicator{
  width:110px; height:4px; border-radius:3px;
  background: rgba(255,255,255,0.25);
  margin: 10px auto 2px;
}

.notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width: 90px; height: 22px; background: var(--navy-deep); border-radius: 14px;
  z-index:1;
}

/* ============ Page spine (continuous flowing line) ============ */
.section-wave{
  position:absolute; z-index:0; pointer-events:none; height:auto;
}

/* ============ Section decoration (color life for plain sections) ============ */
.section{ position:relative; overflow:hidden; scroll-margin-top: 90px; }
.section > .container{ position:relative; z-index:1; }
.section-blob{
  position:absolute; border-radius:50%;
  filter: blur(70px);
  z-index:0; pointer-events:none;
}
.blob-a{ width:420px; height:420px; background: rgba(17,84,160,0.10); top:-120px; right:-100px; }
.blob-b{ width:380px; height:380px; background: rgba(246,136,60,0.10); bottom:-140px; left:-80px; }
.blob-c{ width:300px; height:300px; background: rgba(239,183,70,0.14); top:20%; right:8%; }

/* ============ Motion: floating hero accents (idle, starts after entrance) ============ */
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
@keyframes floatYsmall{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}
@keyframes pulseDot{
  0%, 100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.3); opacity:.5; }
}
.notif-card{ animation: floatY 5s ease-in-out infinite; animation-delay: 2.1s; }
.dot-1{ animation: pulseDot 3.2s ease-in-out infinite; animation-delay: 2.1s; }
.dot-2{ animation: pulseDot 4s ease-in-out infinite; animation-delay: 2.7s; }
.dot-3{ animation: pulseDot 3.6s ease-in-out infinite; animation-delay: 3.2s; }
.wave-decor{ animation: floatYsmall 7s ease-in-out infinite; animation-delay: 2.1s; }

@media (prefers-reduced-motion: reduce){
  .notif-card, .dot-1, .dot-2, .dot-3, .wave-decor{ animation: none; }
}

/* ============ Motion: hero entrance (WAAPI-driven, see script.js) ============
   Pre-state: hidden until JS runs a choreographed timeline. If JS/WAAPI is
   unavailable or the visitor prefers reduced motion, html never gets .pre
   and everything below simply renders in its finished state. */
html.pre .hero .eyebrow,
html.pre .hero .lead,
html.pre .hero-ctas,
html.pre .trust-row,
html.pre .hero .play,
html.pre .hero .tag,
html.pre .photo-frame,
html.pre .notif-card,
html.pre .phone-mock{ opacity:0; }

html.pre .rise-line{ clip-path: inset(100% 0 -20% 0); display:inline-block; }
.rise-line{ display:inline-block; }

html.pre .dot-accent{ transform: scale(0); }
html.pre .wave-decor{ opacity:0; }

/* ============ Motion: scroll reveal ============ */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: translateY(0); }
}
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible .stagger-item{
  animation: fadeUp .6s ease both;
}
.reveal-stagger .stagger-item:nth-child(1){ animation-delay: .05s; }
.reveal-stagger .stagger-item:nth-child(2){ animation-delay: .1s; }
.reveal-stagger .stagger-item:nth-child(3){ animation-delay: .15s; }
.reveal-stagger .stagger-item:nth-child(4){ animation-delay: .2s; }
.reveal-stagger .stagger-item:nth-child(5){ animation-delay: .25s; }
.reveal-stagger .stagger-item:nth-child(6){ animation-delay: .3s; }
.reveal-stagger .stagger-item:nth-child(7){ animation-delay: .35s; }
.reveal-stagger .stagger-item:nth-child(8){ animation-delay: .4s; }
.reveal-stagger .stagger-item:nth-child(9){ animation-delay: .45s; }
.reveal-stagger .stagger-item:nth-child(10){ animation-delay: .5s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{ opacity:1; transform:none; transition:none; }
  .reveal-stagger .stagger-item{ animation:none; }
  html.pre *{ opacity:1 !important; clip-path:none !important; transform:none !important; }
}

/* ============ Features ============ */
.section{ padding: 96px 0; }
.section-tint{ background: var(--bg-tint-2); }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head h2{ font-size: 34px; }
.section-head p{ font-size: 16px; }
.section-split{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:52px; }
.section-split .section-head{ margin-bottom:0; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.feature-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.feature-icon{
  width: 54px; height: 54px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  transition: transform .2s ease;
}
.feature-icon img{ width: 28px; height:28px; }
.feature-card:hover .feature-icon{ transform: scale(1.08) rotate(-4deg); }
.feature-card h3{ font-size: 16px; margin-bottom:6px; }
.feature-card p{ font-size: 13.5px; margin:0; }

.tint-blue{ background: #dce9f7; }
.tint-orange{ background: #fde3ce; }
.tint-gold{ background: #fbecc4; }
.tint-navy{ background: #dbdeed; }

/* ============ Org / integrations ============ */
.org-section .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-tint-2);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.org-copy{ padding: 60px; }
.org-copy h2{ font-size: 30px; }
.org-checklist{ margin-top: 24px; display:flex; flex-direction:column; gap:14px; }
.org-checklist li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color: var(--navy); font-weight:500; }
.check-dot{
  width:22px;height:22px;border-radius:50%;
  background: #e6f7ee; color:#10b981;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.org-panel{
  background: var(--navy);
  color: var(--white);
  padding: 56px 50px;
}
.org-panel .eyebrow{ color: var(--orange); }
.org-panel h3{ color: var(--white); font-size: 20px; margin-bottom: 26px; }
.integration-list{ display:flex; flex-direction:column; gap: 20px; }
.integration-list li{ display:flex; align-items:center; gap:14px; font-size:15px; }
.integration-list .ico{
  width: 38px; height:38px; border-radius:10px;
  background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--orange);
  flex-shrink:0;
}

/* ============ Growth banner (photo/pattern + stats) ============ */
.growth-banner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-card);
}
.growth-visual{
  position:relative;
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #3a4292 100%);
  padding: 48px 44px;
  color: var(--white);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  min-height: 300px;
}
.growth-visual .eyebrow{ color: var(--orange); }
.growth-visual h3{ color:var(--white); font-size: 26px; max-width: 320px; }
.growth-visual p{ color: rgba(255,255,255,0.72); font-size:14px; max-width:300px; }
.growth-visual .btn-secondary{ color:var(--white); border-color: rgba(255,255,255,0.3); align-self:flex-start; margin-top:8px; }
.growth-visual .btn-secondary:hover{ border-color: var(--white); }
.growth-wave{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; z-index:0; }
.growth-visual > *{ position:relative; z-index:1; }
.growth-dots{ position:absolute; z-index:0; }

.growth-stats{
  background: var(--bg-tint);
  display:grid; grid-template-columns: repeat(2,1fr);
}
.growth-stat{
  padding: 40px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.growth-stat:nth-child(2n){ border-right:none; }
.growth-stat:nth-last-child(-n+2){ border-bottom:none; }
.growth-stat strong{ display:block; font-family:'Sora',sans-serif; font-size: 30px; color:var(--navy); margin-bottom:6px; }
.growth-stat span{ font-size: 13px; color: var(--text-body); }

/* ============ Stats ============ */
.stats-banner{
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, #3a4292 100%);
  border-radius: var(--radius-lg);
  color: var(--white);
  padding: 8px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.stat-box{
  padding: 34px 22px;
  text-align:center;
  border-radius: 18px;
}
.stat-box strong{ display:block; font-size: 30px; font-family:'Sora',sans-serif; margin-bottom:6px; }
.stat-box span{ font-size: 13px; color: rgba(255,255,255,0.75); }

/* ============ Download CTA ============ */
.download-cta{
  background: linear-gradient(135deg, var(--navy) 0%, #363c7d 55%, var(--orange-dark) 130%);
  border-radius: var(--radius-lg);
  padding: 64px;
  color: var(--white);
  display:flex; align-items:center; justify-content:space-between; gap: 40px;
  flex-wrap:wrap;
}
.download-cta h2{ color:var(--white); font-size: 30px; max-width: 480px; }
.download-cta p{ color: rgba(255,255,255,0.8); max-width: 440px; }
.store-buttons{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============ About ============ */
.about-wrap{ max-width: 720px; margin: 0 auto; text-align:center; }
.about-wrap .eyebrow{ justify-content:center; display:flex; }
.about-wrap h2{ font-size: 32px; }
.about-lead{ font-size: 16px; margin-bottom: 40px; }
.about-values{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  text-align:left;
}
.about-value{ display:flex; gap:14px; align-items:flex-start; }
.about-value-ico{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.about-value strong{ display:block; font-size:14.5px; color:var(--navy); margin-bottom:4px; }
.about-value span{ font-size:13px; color:var(--text-body); line-height:1.5; }

/* ============ Contact ============ */
.contact-wrap{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px;
}
.contact-info h2{ font-size: 30px; }
.contact-detail{ display:flex; gap:14px; align-items:flex-start; margin-bottom: 22px; }
.contact-detail .ico{
  width:42px;height:42px;border-radius:12px; background: var(--bg-tint);
  display:flex;align-items:center;justify-content:center; color: var(--blue); flex-shrink:0;
}
.contact-detail strong{ display:block; font-size:14.5px; color:var(--navy); margin-bottom:2px; }
.contact-detail span{ font-size: 13.5px; color: var(--text-body); }
.contact-detail span a{ color: var(--text-body); text-decoration:none; }
.contact-detail span a:hover{ color: var(--blue); text-decoration: underline; }

.contact-form{
  background: var(--bg-tint-2);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--line);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size: 13px; font-weight:600; color: var(--navy); margin-bottom: 7px; }
.field input, .field textarea{
  width:100%; padding: 13px 15px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--white);
  font-family: inherit; font-size: 14.5px; color: var(--navy);
  transition: border-color .15s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--blue); }
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: 12.5px; color: var(--text-body-light); margin-top: 12px; }
.form-status{ font-size: 13.5px; margin-top: 12px; display:none; }
.form-status.ok{ color: #10b981; display:block; }
.form-status.err{ color: #f43f5e; display:block; }

/* ============ Footer ============ */
.site-footer{
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 28px;
}
.footer-top{
  display:grid; grid-template-columns: 1.3fr 0.7fr 0.7fr 0.7fr; gap: 40px;
  padding-bottom: 44px; margin-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img{ height: 26px; margin-bottom: 16px; }
.footer-brand p{ color: rgba(255,255,255,0.55); font-size: 13.5px; max-width: 260px; }
.footer-email{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:18px; font-size:14px; font-weight:600;
  color: rgba(255,255,255,0.85);
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  transition: background .15s ease, color .15s ease;
}
.footer-email:hover{ background: var(--orange); color: var(--white); }
.footer-col h4{ color:var(--white); font-size: 14px; margin-bottom: 16px; }
.footer-col ul{ display:flex; flex-direction:column; gap: 11px; }
.footer-col a{ font-size: 13.5px; color: rgba(255,255,255,0.6); }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.footer-bottom .legal-links{ display:flex; gap: 20px; }
.footer-bottom a:hover{ color: var(--white); }

/* ============ Privacy page ============ */
.legal-hero{
  background: var(--bg-tint-2);
  padding: 56px 0 44px;
  text-align:center;
}
.legal-hero .eyebrow{ justify-content:center; display:flex; }
.legal-hero h1{ font-size: 34px; }
.legal-hero p{ color: var(--text-body-light); font-size: 13.5px; }
.legal-body{
  max-width: 780px; margin: 0 auto; padding: 64px 24px 100px;
}
.legal-body h2{ font-size: 21px; margin-top: 44px; scroll-margin-top: 100px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size: 16.5px; margin-top:28px; margin-bottom:10px; color:var(--navy); }
.legal-body h4{ font-size: 14.5px; margin-top:18px; margin-bottom:6px; color:var(--navy); font-weight:700; }
.legal-body p, .legal-body li{ font-size: 15px; color: var(--text-body); line-height:1.7; }
.legal-body ul{ margin: 0 0 18px 0; padding-left: 20px; list-style: disc; }
.legal-body li{ margin-bottom: 8px; }
.legal-body strong{ color: var(--navy); }
.legal-body a{ color: var(--blue); text-decoration: underline; }
.legal-note{
  background: var(--bg-tint-2);
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 18px 0;
}
.legal-note p{ margin:0; font-size:14.5px; }
.legal-meta{
  display:flex; flex-wrap:wrap; gap: 8px 22px;
  font-size: 13px; color: var(--text-body-light);
  margin-bottom: 6px;
}
.legal-table-wrap{ overflow-x:auto; margin: 8px 0 22px; border:1px solid var(--line); border-radius: 12px; }
.legal-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.legal-table th{
  background: var(--bg-tint); color: var(--navy); text-align:left;
  padding: 11px 14px; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;
  border-bottom: 1px solid var(--line);
}
.legal-table td{ padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text-body); vertical-align: top; }
.legal-table tr:last-child td{ border-bottom:none; }
.legal-toc{
  background: var(--bg-tint-2); border-radius: var(--radius-md);
  padding: 26px 28px; margin-bottom: 12px;
}
.legal-toc strong{ display:block; margin-bottom:12px; font-size:14px; color:var(--navy); }
.legal-toc ol{ list-style: decimal; padding-left: 20px; display:flex; flex-direction:column; gap:8px; }
.legal-toc a{ font-size: 14px; color: var(--blue); }

/* ============ Responsive ============ */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; margin-bottom: 8px; min-height: 460px; }
  .feature-grid{ grid-template-columns: repeat(3,1fr); }
  .org-section .container{ grid-template-columns: 1fr; }
  .growth-banner{ grid-template-columns: 1fr; }
  .growth-stats{ grid-template-columns: repeat(2,1fr); }
  .contact-wrap{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

/* Header switches to the hamburger menu earlier than the rest of the mobile
   layout, because the full nav + EN/HR switch + both buttons need ~1150px
   to fit on one line — without this, tablets (iPad etc., 768–1024px) show
   a broken, wrapping header. */
@media (max-width: 1160px){
  .main-nav{ display:none; }
  .header-cta .btn-secondary{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header .container{ height: 68px; gap: 8px; }
  .section{ scroll-margin-top: 68px; }
  .logo img{ height: 20px; }
  .nav-toggle{ width: 34px; height: 34px; flex-shrink: 0; }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{ width: 18px; }

  .main-nav.is-open{
    display:block;
    position:absolute; top:68px; left:0; right:0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    padding: 8px 24px 20px;
    z-index: 90;
  }
  .main-nav.is-open ul{ flex-direction:column; gap: 0; }
  .main-nav.is-open li{ border-bottom: 1px solid var(--line); }
  .main-nav.is-open a{ display:block; padding: 14px 4px; font-size: 15.5px; }
  .main-nav.is-open a.is-active::after{ display:none; }

  .header-cta{ min-width: 0; gap: 8px; }
  .header-cta .btn-primary{ padding: 9px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 720px){
  .hero{ padding: 36px 0 56px; overflow:hidden; }
  .hero-visual{ min-height: 480px; }
  .hero h1{ font-size: 30px; }
  .hero .lead{ font-size: 15.5px; }
  .hero-ctas{ margin-bottom: 32px; }
  .hero-ctas .btn{ flex: 1 1 auto; justify-content:center; }
  .trust-row{ gap: 18px 22px; }
  .trust-item{ max-width: 140px; font-size:12.5px; }

  .blob{
    width: 300px; height: 300px;
    inset: -30px -30px auto auto;
    opacity: .16;
  }
  .wave-decor{ width: 340px; top:-10px; left:-30px; }
  .photo-frame{ width: 165px; border-radius: 20px; }
  .notif-card{ width: 138px; padding: 10px 12px; top:0; right:0; gap:8px; }
  .notif-card .notif-icon{ width:24px; height:24px; border-radius:7px; }
  .notif-card strong{ font-size:11px; }
  .notif-card span{ font-size:10px; line-height:1.35; }
  .dot-accent{ display:none; }
  .phone-mock{ width: min(56vw, 196px); margin-left: -34px; margin-top: 60px; padding: 9px; }
  .notch{ width: 60px; height:16px; top:9px; }
  .phone-mock .screen{ padding: 12px 12px 8px; border-radius: 24px; min-height: 340px; }
  .status-bar{ margin-bottom:14px; }
  .status-bar .time{ font-size:10px; }
  .phone-mock .screen-head{ margin-bottom:14px; }
  .phone-mock h4{ font-size: 13px; }
  .phone-mock .sub{ font-size: 10px; margin-bottom:14px; }
  .mini-card{ padding: 9px 8px; }
  .mini-card span{ font-size: 10.5px; }
  .bottom-nav{ padding-top:10px; margin-top:10px; }
  .bottom-nav svg{ width:15px; height:15px; }
  .bottom-nav .nav-item span{ font-size:8px; }
  .home-indicator{ width:80px; margin:7px auto 1px; }

  .section{ padding: 56px 0; }
  .section-head h2{ font-size: 26px; }
  .section-split{ margin-bottom: 36px; gap: 20px; }
  .feature-grid{ grid-template-columns: repeat(2,1fr); gap: 14px; }
  .feature-card{ padding: 20px 16px; }
  .feature-icon{ width:42px; height:42px; margin-bottom:14px; }

  .download-cta{ padding: 36px 24px; flex-direction:column; align-items:flex-start; border-radius: var(--radius-md); }
  .download-cta h2{ font-size: 24px; }
  .store-buttons .btn{ width:100%; justify-content:center; }

  .org-copy, .org-panel{ padding: 32px 24px; }
  .org-section .container{ border-radius: var(--radius-md); }
  .org-copy h2{ font-size: 26px; }

  .growth-banner{ border-radius: var(--radius-md); }
  .growth-visual{ padding: 32px 24px; }
  .growth-visual h3{ font-size: 22px; }
  .growth-stats{ grid-template-columns: repeat(2,1fr); }
  .growth-stat{ padding: 22px 16px; }
  .growth-stat strong{ font-size: 22px; }

  .about-wrap h2{ font-size:24px; }
  .about-values{ grid-template-columns: 1fr; gap:20px; }

  .contact-form{ padding: 26px 22px; border-radius: var(--radius-md); }
  .contact-info h2{ font-size: 24px; }
  .form-row{ grid-template-columns: 1fr; }

  .footer-top{ grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }

  .legal-hero h1{ font-size: 27px; }
  .legal-body{ padding: 40px 20px 64px; }
}

@media (max-width: 400px){
  .feature-grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 27px; }

  .logo img{ height: 18px; }
  .lang-switch{ width: 30px; height: 30px; font-size: 11px; }
  .header-cta .btn-primary .cta-full{ display:none; }
  .header-cta .btn-primary .cta-short{ display:inline; }
  .header-cta .btn-primary{ padding: 9px 16px; }
}

/* ============ Cookie consent banner ============ */
.cookie-banner{
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px -18px rgba(23,27,64,0.35);
  padding: 22px 26px;
  max-width: 920px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.cookie-banner.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cookie-banner-text strong{
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
}
.cookie-banner-text p{
  margin: 0;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.5;
}
.cookie-banner-text a{ color: var(--blue); text-decoration: underline; }
.cookie-banner-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 720px){
  .cookie-banner{ left: 12px; right: 12px; bottom: 12px; padding: 20px; }
  .cookie-banner-inner{ flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner-actions{ width: 100%; }
  .cookie-banner-actions .btn{ flex: 1 1 auto; justify-content:center; }
}

/* ============ Store button: coming soon state ============ */
.btn-store-soon{
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.btn-store-soon:hover{ transform: none; }

/* ============ Language switch ============ */
.lang-switch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  transition: border-color .15s ease, color .15s ease;
}
.lang-switch:hover{ border-color: var(--navy); color: var(--navy); }

.cta-short{ display:none; }

@media (max-width: 980px){
  .lang-switch{ width: 34px; height: 34px; font-size: 12px; }
}