@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#dbeafe;
  --bg-alt:#eff6ff;
  --surface:rgba(255,255,255,.82);
  --surface-strong:#ffffff;
  --ink:#0f172a;
  --ink-soft:#334155;
  --muted:#64748b;
  --line:rgba(37,99,235,.12);
  --line-strong:rgba(37,99,235,.22);
  --teal:#2563eb;
  --teal-strong:#1d4ed8;
  --teal-soft:rgba(37,99,235,.12);
  --orange:#0ea5e9;
  --orange-soft:rgba(14,165,233,.14);
  --gold:#60a5fa;
  --navy:#0f172a;
  --shadow:0 28px 70px rgba(15,23,42,.12),0 8px 24px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-soft:0 16px 40px rgba(37,99,235,.1),0 6px 18px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.92);
  --radius:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --content:1180px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.public-body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:'Prompt','Segoe UI',sans-serif;
  background:
    radial-gradient(ellipse 92% 62% at -5% -5%, rgba(37,99,235,.18) 0%, transparent 55%),
    radial-gradient(ellipse 76% 56% at 108% 2%, rgba(14,165,233,.14) 0%, transparent 52%),
    radial-gradient(ellipse 60% 48% at 54% 52%, rgba(245,158,11,.06) 0%, transparent 72%),
    linear-gradient(160deg,#f8fbff 0%,#e7f0ff 42%,#edf8ff 100%);
  background-attachment:fixed;
  line-height:1.65;
}

body.public-body.public-body--home{
  background:
    radial-gradient(ellipse 82% 56% at 10% -8%, rgba(37,99,235,.22) 0%, transparent 54%),
    radial-gradient(ellipse 72% 54% at 100% 10%, rgba(14,165,233,.18) 0%, transparent 50%),
    radial-gradient(ellipse 46% 34% at 48% 34%, rgba(251,191,36,.08) 0%, transparent 62%),
    linear-gradient(180deg,#fbfdff 0%,#edf5ff 36%,#eef8ff 100%);
}

body.public-body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.3),transparent 75%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
ul,ol{margin:0;padding-left:1.15rem}
li+li{margin-top:.5rem}

.page-shell{
  position:relative;
  z-index:1;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  padding:18px 20px 0;
}

.site-nav{
  max-width:var(--content);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-mark{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
  background:center/100% 100% no-repeat url('/favicon.svg');
  box-shadow:0 16px 34px rgba(37,99,235,.28);
}

.brand-copy{
  min-width:0;
  display:grid;
  gap:2px;
  align-content:center;
}

.brand-copy strong{
  display:block;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  letter-spacing:-.02em;
  line-height:1.08;
}

.brand-copy span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:52px;
  min-height:52px;
  padding:0 16px;
  border:1px solid rgba(15,23,42,.09);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:var(--navy);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.nav-toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.92);
}

.nav-toggle:focus-visible{
  outline:2px solid rgba(37,99,235,.28);
  outline-offset:3px;
}

.nav-toggle__label{
  font-weight:600;
  font-size:.92rem;
}

.nav-toggle__icon{
  position:relative;
  width:18px;
  height:14px;
}

.nav-toggle__icon span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}

.nav-toggle__icon span:nth-child(1){top:0}
.nav-toggle__icon span:nth-child(2){top:6px}
.nav-toggle__icon span:nth-child(3){top:12px}

.site-nav.is-menu-open .nav-toggle{
  background:linear-gradient(135deg,#2563eb 0%, #3b82f6 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 36px rgba(37,99,235,.22);
}

.site-nav.is-menu-open .nav-toggle__icon span:nth-child(1){
  top:6px;
  transform:rotate(45deg);
}

.site-nav.is-menu-open .nav-toggle__icon span:nth-child(2){
  opacity:0;
}

.site-nav.is-menu-open .nav-toggle__icon span:nth-child(3){
  top:6px;
  transform:rotate(-45deg);
}

.nav-links a{
  padding:9px 14px;
  border-radius:999px;
  font-size:.92rem;
  color:var(--ink-soft);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.nav-links a:hover,
.nav-links a.is-current{
  color:var(--navy);
  background:rgba(15,118,110,.1);
  transform:translateY(-1px);
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
  font-size:.95rem;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}

.button:hover{
  transform:translateY(-2px);
}

.button--primary{
  color:#fff;
  background:linear-gradient(135deg,#2563eb 0%, #3b82f6 100%);
  box-shadow:0 16px 32px rgba(37,99,235,.25);
}

.button--accent{
  color:#fff;
  background:linear-gradient(135deg,#1d4ed8 0%, #0ea5e9 100%);
  box-shadow:0 16px 32px rgba(14,165,233,.2);
}

.button--ghost{
  background:rgba(255,255,255,.7);
  border-color:rgba(15,23,42,.09);
  color:var(--navy);
}

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero{
  padding:38px 20px 34px;
}

.hero--compact{
  padding-top:80px;
  min-height:calc(100vh - 120px);
  display:grid;
  align-items:center;
}

.hero-panel{
  max-width:var(--content);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:28px;
  align-items:stretch;
}

.hero-panel--center{
  grid-template-columns:minmax(0,800px);
  justify-content:center;
  text-align:center;
}

.hero--home{
  padding-top:48px;
  padding-bottom:20px;
}

.hero-panel--home{
  grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);
  gap:24px;
  align-items:stretch;
}

.hero-copy,
.hero-aside,
.surface-card,
.cta-banner,
.footer-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.74));
  backdrop-filter:blur(18px) saturate(165%);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  box-shadow:var(--shadow);
}

.hero-copy,
.hero-aside{
  border-radius:var(--radius);
  padding:32px;
}

.hero-copy--home{
  padding:40px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.76)),
    radial-gradient(circle at top left, rgba(37,99,235,.1), transparent 42%);
}

.hero-copy::after,
.hero-aside::after,
.surface-card::after,
.cta-banner::after,
.footer-panel::after{
  content:'';
  position:absolute;
  inset:auto -10% -20% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.16), transparent 68%);
  pointer-events:none;
}

.eyebrow,
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
}

.eyebrow{
  background:rgba(37,99,235,.12);
  color:var(--teal-strong);
}

.pill{
  background:rgba(15,23,42,.06);
  color:var(--ink-soft);
}

.pill--accent{
  background:var(--orange-soft);
  color:var(--orange);
}

.pill--teal{
  background:var(--teal-soft);
  color:var(--teal-strong);
}

.stack{
  display:grid;
  gap:18px;
}

.stack--sm{gap:10px}
.stack--lg{gap:24px}

.hero-badge-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.hero-inline-proof{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  color:var(--ink-soft);
  font-size:.85rem;
  font-weight:600;
  border:1px solid rgba(15,23,42,.06);
}

h1,h2,h3,h4{
  margin:0;
  font-family:'Space Grotesk','Prompt',sans-serif;
  letter-spacing:-.03em;
  line-height:1.05;
}

h1{
  font-size:clamp(2.35rem,4.8vw,4.8rem);
}

h2{
  font-size:clamp(1.7rem,3vw,3rem);
}

h3{
  font-size:clamp(1.15rem,2.1vw,1.5rem);
}

.lede{
  font-size:1.05rem;
  color:var(--muted);
  max-width:60ch;
}

.hero-copy .lede{
  font-size:1.12rem;
}

.hero-points--dense{
  gap:10px 16px;
}

.hero-proof-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.hero-proof{
  display:grid;
  gap:8px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,247,255,.72));
  border:1px solid rgba(37,99,235,.1);
  box-shadow:var(--shadow-soft);
}

.hero-proof strong{
  display:block;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  line-height:1;
}

.hero-proof span{
  color:var(--muted);
  font-size:.9rem;
}

.hero-points,
.icon-list,
.simple-list{
  display:grid;
  gap:12px;
}

.hero-points{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.hero-points span,
.icon-list li,
.simple-list li{
  position:relative;
  list-style:none;
  padding-left:28px;
  color:var(--ink-soft);
}

.hero-points span::before,
.icon-list li::before,
.simple-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.45rem;
  width:16px;
  height:16px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 28%, transparent 30%),
    linear-gradient(135deg,#2563eb,#60a5fa);
  box-shadow:0 8px 20px rgba(37,99,235,.22);
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.stat-card,
.mini-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.stat-card strong{
  display:block;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1.85rem;
  line-height:1;
  margin-bottom:8px;
}

.stat-card span{
  color:var(--muted);
  font-size:.92rem;
}

.hero-aside{
  display:grid;
  gap:18px;
  align-content:start;
}

.hero-stage{
  display:grid;
  gap:18px;
  padding:22px;
  border-radius:34px;
  align-content:start;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,255,.82)),
    radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 38%);
}

.hero-stage-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.hero-stage-head h2{
  font-size:clamp(1.35rem,2.3vw,2rem);
}

.hero-stage-meta{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  color:var(--muted);
  font-size:.78rem;
  font-weight:600;
  border:1px solid rgba(15,23,42,.06);
}

.hero-stage-main{
  position:relative;
  padding:16px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(233,244,255,.8));
  border:1px solid rgba(37,99,235,.12);
  box-shadow:var(--shadow-soft);
}

.hero-stage-main img{
  width:100%;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 24px 56px rgba(15,23,42,.14);
}

.hero-float-card{
  position:absolute;
  display:grid;
  gap:6px;
  max-width:220px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(7,17,31,.82);
  color:#fff;
  box-shadow:0 24px 48px rgba(15,23,42,.24);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

.hero-float-card strong{
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:.95rem;
  line-height:1;
}

.hero-float-card span{
  color:rgba(255,255,255,.82);
  font-size:.83rem;
  line-height:1.5;
}

.hero-float-card--top{
  top:18px;
  right:18px;
}

.hero-float-card--bottom{
  left:18px;
  bottom:18px;
}

.hero-stage-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:14px;
}

.hero-stage-card{
  display:grid;
  grid-template-columns:138px 1fr;
  gap:12px;
  align-items:center;
  min-height:100%;
  padding:14px;
  border-radius:24px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(37,99,235,.1);
  box-shadow:var(--shadow-soft);
}

.hero-stage-card img{
  width:100%;
  height:110px;
  object-fit:cover;
  object-position:top;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 16px 34px rgba(15,23,42,.12);
}

.hero-stage-card strong{
  display:block;
  margin-bottom:6px;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  line-height:1.1;
}

.hero-stage-card span{
  color:var(--muted);
  font-size:.88rem;
}

.hero-stage-card--signal{
  grid-template-columns:1fr;
  align-content:start;
}

.signal-list{
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}

.signal-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ink-soft);
  font-size:.92rem;
}

.signal-dot{
  flex:none;
  width:10px;
  height:10px;
  margin-top:.45rem;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.hero-metric{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.9));
  border:1px solid rgba(15,23,42,.07);
}

.hero-metric strong{
  display:block;
  font-size:1.06rem;
  font-family:'Space Grotesk','Prompt',sans-serif;
}

.hero-metric span{
  color:var(--muted);
  font-size:.9rem;
}

.metric-badge{
  min-width:76px;
  padding:7px 11px;
  border-radius:999px;
  text-align:center;
  font-weight:700;
  font-size:.86rem;
  color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
}

.section{
  padding:28px 20px;
}

.section--flush-top{
  padding-top:6px;
}

.section-shell{
  max-width:var(--content);
  margin:0 auto;
}

.section-head{
  display:grid;
  gap:14px;
  margin-bottom:22px;
}

.section-head p{
  max-width:68ch;
  color:var(--muted);
}

.section-grid{
  display:grid;
  gap:18px;
}

.section-grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.section-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.section-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.surface-card{
  border-radius:26px;
  padding:24px;
}

.trust-strip{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:20px;
  align-items:center;
  padding:28px;
}

.trust-strip__copy{
  display:grid;
  gap:12px;
}

.trust-strip__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.trust-chip{
  display:grid;
  gap:8px;
  min-height:100%;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,247,255,.8));
  border:1px solid rgba(37,99,235,.1);
  box-shadow:var(--shadow-soft);
}

.trust-chip strong{
  display:block;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  line-height:1.1;
}

.trust-chip span{
  color:var(--muted);
  font-size:.9rem;
}

.surface-card h3,
.surface-card h4{
  margin-bottom:10px;
}

.surface-card p:last-child{
  margin-bottom:0;
}

.card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-weight:600;
  color:var(--teal-strong);
}

.tag-rail{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:500;
}

.screen-showcase{
  display:grid;
  gap:18px;
}

.screen-feature{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:22px;
  align-items:center;
}

.screen-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.screen-copy,
.screen-card-head{
  display:grid;
  gap:14px;
}

.screen-card{
  display:grid;
  gap:18px;
  align-content:start;
}

.screen-media{
  position:relative;
  padding:14px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,246,255,.86));
  border:1px solid rgba(191,219,254,.76);
  box-shadow:var(--shadow-soft);
}

.screen-media img{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 20px 40px rgba(15,23,42,.12);
  transition:transform .24s ease, box-shadow .24s ease;
}

.screen-teaser-image{
  max-height:460px;
  object-fit:cover;
  object-position:top;
}

.screen-media img[data-previewable]{
  cursor:zoom-in;
}

.screen-media img[data-previewable]:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:4px;
}

.screen-media::before{
  content:'คลิกเพื่อขยาย';
  position:absolute;
  top:24px;
  right:24px;
  z-index:1;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.01em;
  pointer-events:none;
  box-shadow:0 12px 24px rgba(15,23,42,.2);
}

.screen-feature:hover .screen-media img,
.screen-card:hover .screen-media img{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 28px 54px rgba(15,23,42,.16);
}

.screen-note{
  margin:2px 6px 0;
  color:var(--muted);
  font-size:.92rem;
}

.visitor-stats-panel{
  display:grid;
  gap:24px;
}

.visitor-stats-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:18px;
  align-items:start;
}

.visitor-stats-head{
  margin-bottom:0;
}

.visitor-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.visitor-stat-card{
  display:grid;
  gap:10px;
  min-height:100%;
  padding:22px 20px;
}

.visitor-stat-label{
  color:var(--teal-strong);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.visitor-stat-card strong{
  display:block;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:clamp(1.9rem, 3vw, 2.5rem);
  line-height:1;
}

.visitor-stat-note{
  color:var(--muted);
  font-size:.9rem;
}

.visitor-top-pages{
  display:grid;
  gap:14px;
  padding:20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(37,99,235,.12), rgba(255,255,255,.94));
  border:1px solid rgba(37,99,235,.16);
  box-shadow:var(--shadow-soft);
}

.visitor-top-pages strong{
  font-family:'Space Grotesk','Prompt',sans-serif;
}

.visitor-top-pages-list{
  display:grid;
  gap:10px;
}

.visitor-top-page{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(191,219,254,.88);
  box-shadow:var(--shadow-soft);
}

.visitor-top-page__copy{
  display:grid;
  gap:4px;
}

.visitor-top-page__copy strong{
  font-size:1rem;
  line-height:1.2;
}

.visitor-top-page__copy span:last-child{
  color:var(--muted);
  font-size:.86rem;
}

.visitor-top-page__rank{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  color:var(--teal-strong);
  font-size:.76rem;
  font-weight:700;
}

.visitor-top-page__metric{
  display:grid;
  justify-items:end;
  gap:2px;
  text-align:right;
}

.visitor-top-page__metric strong{
  font-size:1.2rem;
  line-height:1;
}

.visitor-top-page__metric span{
  color:var(--muted);
  font-size:.8rem;
}

.visitor-top-pages-empty{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.visitor-stats-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.92rem;
}

.visitor-stats-note{
  max-width:48ch;
}

body.public-body.preview-open{
  overflow:hidden;
}

.image-preview-modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:24px;
}

.image-preview-modal[hidden]{
  display:none;
}

.image-preview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.76);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.image-preview-panel{
  position:relative;
  z-index:1;
  width:min(1200px,100%);
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  box-shadow:0 28px 70px rgba(15,23,42,.32);
}

.image-preview-close{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font:600 .92rem 'Prompt','Segoe UI',sans-serif;
  cursor:pointer;
}

.image-preview-close:hover{
  background:rgba(255,255,255,.2);
}

.image-preview-figure{
  margin:0;
  display:grid;
  gap:12px;
}

.image-preview-figure img{
  width:100%;
  max-height:calc(100vh - 180px);
  object-fit:contain;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(255,255,255,.24);
}

.image-preview-figure figcaption{
  color:#e2e8f0;
  font-size:.92rem;
  text-align:center;
}

.proof-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.proof-card{
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(37,99,235,.1);
  box-shadow:var(--shadow-soft);
}

.proof-card strong{
  display:block;
  margin-bottom:10px;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1.35rem;
  line-height:1.1;
}

.proof-card span{
  color:var(--muted);
  font-size:.92rem;
}

.quote-card{
  padding:24px 26px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.08));
  border:1px solid rgba(37,99,235,.16);
  box-shadow:var(--shadow-soft);
}

.quote-card p{
  margin:0;
  font-size:1.04rem;
  color:var(--ink-soft);
}

.quote-card strong{
  display:block;
  margin-top:14px;
  color:var(--teal-strong);
  font-family:'Space Grotesk','Prompt',sans-serif;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.detail-card{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(37,99,235,.1);
  box-shadow:var(--shadow-soft);
}

.detail-card h3{
  margin-bottom:10px;
}

.detail-card p:last-child{
  margin-bottom:0;
}

.story-panel{
  display:grid;
  gap:18px;
}

.journey-list{
  display:grid;
  gap:14px;
}

.journey-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(37,99,235,.08);
  box-shadow:var(--shadow-soft);
}

.journey-index{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  font-weight:700;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:0 18px 36px rgba(37,99,235,.2);
}

.journey-step h3{
  margin-bottom:6px;
}

.journey-step p:last-child{
  margin-bottom:0;
}

.feature-stack{
  display:grid;
  gap:14px;
}

.feature-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(37,99,235,.08);
  box-shadow:var(--shadow-soft);
}

.feature-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  font-weight:700;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.feature-row h3{
  margin-bottom:6px;
}

.check-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.check-column{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(37,99,235,.1);
  box-shadow:var(--shadow-soft);
}

.check-column h3{
  margin-bottom:10px;
}

.list-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.92rem;
}

.split-panel{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:18px;
}

.callout{
  padding:18px 20px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(37,99,235,.1), rgba(14,165,233,.11));
  border:1px solid rgba(37,99,235,.16);
}

.callout strong{
  font-family:'Space Grotesk','Prompt',sans-serif;
  display:block;
  margin-bottom:8px;
}

.process-grid{
  display:grid;
  gap:14px;
}

.process-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
}

.process-index{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.kpi-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.kpi-strip .mini-card strong{
  display:block;
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1.3rem;
  margin-bottom:8px;
}

.kpi-strip .mini-card span{
  color:var(--muted);
  font-size:.9rem;
}

.compare-table-wrap{
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.compare-table{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  background:rgba(255,255,255,.88);
}

.compare-table th,
.compare-table td{
  padding:16px 18px;
  text-align:left;
  border-bottom:1px solid rgba(15,23,42,.08);
  vertical-align:top;
}

.compare-table th{
  font-family:'Space Grotesk','Prompt',sans-serif;
  background:rgba(37,99,235,.08);
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.price-card{
  position:relative;
  display:grid;
  gap:16px;
  padding:26px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.price-card--featured{
  background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,.94));
  border-color:rgba(37,99,235,.18);
  transform:translateY(-8px);
}

.price-card .price-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.price-card .price-value{
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:2.1rem;
  line-height:1;
}

.price-note{
  color:var(--muted);
  font-size:.9rem;
}

.faq-list{
  display:grid;
  gap:14px;
}

.faq-item{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.faq-item h3{
  margin-bottom:10px;
  font-size:1.1rem;
}

.cta-banner{
  max-width:var(--content);
  margin:0 auto;
  border-radius:32px;
  padding:28px;
  display:grid;
  gap:18px;
}

.cta-banner--split{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

.site-footer{
  padding:12px 20px 40px;
}

.footer-panel{
  max-width:var(--content);
  margin:0 auto;
  border-radius:32px;
  padding:26px;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);
  gap:28px 36px;
  align-items:start;
}

.footer-links{
  display:grid;
  gap:10px;
}

.footer-links a{
  color:var(--ink-soft);
}

.footer-brand-block{
  max-width:460px;
}

.footer-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
  align-content:start;
}

.footer-nav a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:12px 16px;
  border-radius:18px;
  color:var(--ink-soft);
  background:rgba(255,255,255,.58);
  border:1px solid rgba(37,99,235,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}

.footer-nav a:hover{
  transform:translateY(-1px);
  color:var(--navy);
  background:rgba(255,255,255,.82);
  border-color:rgba(37,99,235,.16);
}

.footer-meta{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(15,23,42,.08);
  color:var(--muted);
  font-size:.9rem;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:16px;
  color:var(--muted);
  font-size:.9rem;
}

.breadcrumb span{
  opacity:.55;
}

.content-shell{
  max-width:var(--content);
  margin:0 auto;
}

.article-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
}

.article-main,
.article-side{
  display:grid;
  gap:18px;
}

.article-card{
  padding:26px;
  border-radius:30px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.article-card h1{
  font-size:clamp(2rem,4vw,3.7rem);
}

.article-card h2{
  margin:1.8rem 0 1rem;
  font-size:1.65rem;
}

.article-card h3{
  margin:1.3rem 0 .8rem;
  font-size:1.2rem;
}

.article-card p,
.article-card li{
  color:var(--ink-soft);
}

.article-card blockquote{
  margin:1.4rem 0;
  padding:18px 20px;
  border-left:4px solid #3b82f6;
  border-radius:0 18px 18px 0;
  background:rgba(37,99,235,.08);
  color:var(--ink-soft);
}

.article-card blockquote p:last-child{
  margin-bottom:0;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:.9rem;
}

.aside-box{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.article-callout{
  margin:1.6rem 0;
  padding:20px 22px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(37,99,235,.1), rgba(14,165,233,.08));
  border:1px solid rgba(37,99,235,.15);
}

.article-callout strong{
  display:block;
  margin-bottom:8px;
  font-family:'Space Grotesk','Prompt',sans-serif;
}

.aside-box + .aside-box{
  margin-top:18px;
}

.toc-list{
  display:grid;
  gap:10px;
}

.toc-list a{
  color:var(--ink-soft);
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.blog-card{
  display:grid;
  gap:16px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow-soft);
}

.blog-card h3{
  font-size:1.22rem;
}

.muted{
  color:var(--muted);
}

.content-width{
  max-width:760px;
}

.site-note{
  color:var(--muted);
  font-size:.88rem;
}

.divider{
  height:1px;
  background:linear-gradient(90deg, rgba(37,99,235,.18), transparent);
  margin:18px 0;
}

[hidden]{display:none!important}

body.public-body::after{
  content:'';
  position:fixed;
  inset:-12% auto auto -8%;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.16) 0%, rgba(96,165,250,.08) 36%, transparent 70%);
  filter:blur(8px);
  pointer-events:none;
  animation:orb-drift 14s ease-in-out infinite;
}

.page-shell::before,
.page-shell::after{
  content:'';
  position:fixed;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  filter:blur(12px);
  opacity:.6;
}

.page-shell::before{
  inset:18% -120px auto auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(14,165,233,.18), transparent 68%);
  animation:orb-float 18s ease-in-out infinite;
}

.page-shell::after{
  inset:auto auto 8% 4%;
  width:160px;
  height:160px;
  background:radial-gradient(circle, rgba(59,130,246,.16), transparent 70%);
  animation:orb-float 12s ease-in-out infinite reverse;
}

@keyframes orb-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(24px,18px,0) scale(1.08)}
}

@keyframes orb-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-18px,0)}
}

.hero-copy,
.hero-aside,
.surface-card,
.price-card,
.blog-card,
.faq-item,
.proof-card,
.detail-card,
.quote-card,
.cta-banner,
.article-card,
.aside-box,
.mini-card,
.hero-proof,
.trust-chip,
.journey-step,
.hero-stage-card{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  will-change:transform;
}

.surface-card:hover,
.blog-card:hover,
.faq-item:hover,
.proof-card:hover,
.detail-card:hover,
.mini-card:hover,
.hero-proof:hover,
.trust-chip:hover,
.journey-step:hover,
.hero-stage-card:hover{
  transform:translateY(-4px);
  border-color:rgba(37,99,235,.18);
  box-shadow:0 24px 52px rgba(37,99,235,.14),0 10px 22px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.96);
}

.hero-copy::before,
.hero-aside::before,
.surface-card::before,
.price-card::before,
.blog-card::before,
.cta-banner::before,
.footer-panel::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.84), rgba(96,165,250,.46), transparent 78%);
  pointer-events:none;
}

.button{
  position:relative;
  overflow:hidden;
}

.button::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(118deg, transparent 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.04) 62%, transparent 100%);
  transform:translateX(-135%) skewX(-18deg);
  transition:transform .72s ease;
  pointer-events:none;
}

.button:hover::after{
  transform:translateX(135%) skewX(-18deg);
}

.button > *{
  position:relative;
  z-index:1;
}

body.effect-ready [data-reveal]{
  opacity:0;
  transform:translateY(28px) scale(.985);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}

body.effect-ready [data-reveal].is-visible{
  opacity:1;
  transform:none;
}

.tilt-card{
  transform-style:preserve-3d;
}

.form-shell{
  display:grid;
  gap:18px;
}

.form-grid-public{
  display:grid;
  gap:16px;
}

.form-grid-public label{
  display:grid;
  gap:8px;
  font-weight:600;
  color:var(--ink-soft);
}

.form-grid-public input,
.form-grid-public textarea,
.form-grid-public select{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border-radius:18px;
  border:1.5px solid rgba(191,219,254,.9);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  color:var(--ink);
  font:inherit;
  box-shadow:0 14px 28px rgba(37,99,235,.07), inset 0 1px 0 rgba(255,255,255,.96);
  transition:border-color .2s ease, box-shadow .2s ease, transform .18s ease, background .2s ease;
}

.form-grid-public textarea{
  min-height:144px;
  resize:vertical;
}

.form-grid-public input:hover,
.form-grid-public textarea:hover,
.form-grid-public select:hover{
  border-color:rgba(96,165,250,.76);
  transform:translateY(-1px);
}

.form-grid-public input:focus,
.form-grid-public textarea:focus,
.form-grid-public select:focus{
  outline:none;
  background:#fff;
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(59,130,246,.12),0 18px 34px rgba(37,99,235,.1), inset 0 1px 0 rgba(255,255,255,.98);
}

.inline-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.field-hint{
  color:var(--muted);
  font-size:.88rem;
  font-weight:400;
}

.form-feedback{
  padding:14px 16px;
  border-radius:18px;
  font-weight:500;
  line-height:1.55;
}

.form-feedback--success{
  color:#166534;
  background:rgba(22,163,74,.12);
  border:1px solid rgba(34,197,94,.18);
}

.form-feedback--error{
  color:#b91c1c;
  background:rgba(220,38,38,.1);
  border:1px solid rgba(239,68,68,.16);
}

.payment-summary-card{
  display:grid;
  gap:18px;
  align-content:start;
  position:sticky;
  top:110px;
}

.summary-inline-card{
  display:grid;
  gap:6px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,.92));
  border:1px solid rgba(96,165,250,.22);
  box-shadow:var(--shadow-soft);
}

.summary-inline-card strong{
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1.7rem;
  line-height:1;
}

.summary-inline-label{
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.radio-card-group{
  border:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.radio-card-group legend{
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:2px;
}

.radio-card-grid{
  display:grid;
  gap:12px;
}

.radio-card{
  position:relative;
  display:block;
  cursor:pointer;
}

.radio-card input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.radio-card__content{
  display:grid;
  gap:8px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:1.5px solid rgba(191,219,254,.84);
  box-shadow:var(--shadow-soft);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.radio-card:hover .radio-card__content{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.68);
}

.radio-card__content strong{
  font-size:1rem;
}

.radio-card input:checked + .radio-card__content{
  border-color:rgba(37,99,235,.52);
  background:linear-gradient(180deg, rgba(37,99,235,.1), rgba(255,255,255,.94));
  box-shadow:0 18px 36px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.98);
}

.upload-file-note{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  color:var(--ink-soft);
  font-size:.84rem;
  font-weight:500;
}

.payment-summary-stack{
  display:grid;
  gap:12px;
}

.summary-metric{
  display:grid;
  gap:6px;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(191,219,254,.7);
  box-shadow:var(--shadow-soft);
}

.summary-metric span{
  color:var(--muted);
  font-size:.84rem;
}

.summary-metric strong{
  font-family:'Space Grotesk','Prompt',sans-serif;
  font-size:1.2rem;
  line-height:1.15;
}

.summary-metric--highlight{
  background:linear-gradient(180deg, rgba(37,99,235,.12), rgba(255,255,255,.94));
  border-color:rgba(37,99,235,.22);
}

.contact-panel-highlight .callout,
.payment-summary-card .callout{
  box-shadow:var(--shadow-soft);
}

@media (max-width: 1024px){
  .hero-panel,
  .hero-panel--home,
  .split-panel,
  .article-shell,
  .pricing-grid,
  .section-grid--3,
  .visitor-stats-layout,
  .footer-grid,
  .trust-strip{
    grid-template-columns:1fr;
  }

  .hero-proof-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .price-card--featured{
    transform:none;
  }

  .payment-summary-card{
    position:static;
    top:auto;
  }

  .proof-grid,
  .related-grid,
  .detail-grid,
  .check-columns,
  .inline-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .blog-grid,
  .section-grid--2,
  .section-grid--4,
  .hero-stats,
  .visitor-stats-grid,
  .kpi-strip,
  .screen-grid,
  .hero-stage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .screen-feature{
    grid-template-columns:1fr;
  }

  .hero-stage-card{
    grid-template-columns:1fr;
    align-items:start;
  }

  .footer-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .site-header{
    padding-inline:12px;
  }

  .site-nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    justify-content:stretch;
    border-radius:24px;
    padding:16px;
    gap:12px;
  }

  .brand{
    min-width:0;
    align-items:flex-start;
  }

  .brand-copy{
    min-width:0;
  }

  .brand-copy strong,
  .brand-copy span{
    overflow-wrap:anywhere;
  }

  .nav-links{
    justify-content:flex-start;
  }

  .hero,
  .section,
  .site-footer{
    padding-inline:12px;
  }

  .hero-copy,
  .hero-aside,
  .surface-card,
  .cta-banner,
  .footer-panel,
  .article-card,
  .aside-box,
  .faq-item,
  .price-card,
  .blog-card{
    padding:22px 18px;
    border-radius:24px;
  }

  .hero-points,
  .hero-stats,
  .blog-grid,
  .visitor-stats-grid,
  .proof-grid,
  .detail-grid,
  .related-grid,
  .check-columns,
  .inline-grid,
  .section-grid--2,
  .section-grid--3,
  .section-grid--4,
  .kpi-strip,
  .screen-grid,
  .hero-proof-strip,
  .trust-strip__grid,
  .hero-stage-grid{
    grid-template-columns:1fr;
  }

  .cta-banner--split{
    grid-template-columns:1fr;
  }

  .hero--home{
    padding-top:32px;
  }

  .hero-copy--home,
  .hero-stage,
  .trust-strip{
    padding:22px 18px;
  }

  .hero-badge-row,
  .hero-stage-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-inline-proof{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hero-stage-main{
    display:grid;
    gap:12px;
    padding:10px;
  }

  .hero-float-card{
    position:static;
    max-width:none;
  }

  .hero-stage-card{
    grid-template-columns:1fr;
    align-items:start;
  }

  .hero-stage-card img{
    height:auto;
  }

  .trust-strip{
    gap:18px;
  }

  .journey-step{
    grid-template-columns:1fr;
  }

  .journey-index{
    width:48px;
    height:48px;
    border-radius:16px;
  }

  .footer-nav{
    grid-template-columns:1fr;
  }

  .screen-media{
    padding:10px;
    border-radius:20px;
  }

  .screen-media img{
    border-radius:14px;
  }

  .screen-teaser-image{
    max-height:320px;
  }

  .screen-media::before{
    top:18px;
    right:18px;
    font-size:.72rem;
  }

  .visitor-top-page{
    align-items:flex-start;
    flex-direction:column;
  }

  .visitor-top-page__metric{
    justify-items:start;
    text-align:left;
  }

  .image-preview-modal{
    padding:12px;
  }

  .image-preview-panel{
    padding:12px;
    border-radius:20px;
  }
}

@media (max-width: 1100px){
  .site-nav{
    position:relative;
    align-items:center;
    gap:14px;
  }

  .nav-toggle{
    display:inline-flex;
    margin-left:auto;
  }

  .nav-toggle__label{
    display:none;
  }

  .nav-links{
    position:absolute;
    top:calc(100% + 14px);
    left:0;
    right:0;
    z-index:5;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:28px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    box-shadow:var(--shadow-soft);
  }

  .site-nav.is-menu-open .nav-links{
    display:flex;
  }

  .nav-links a{
    width:100%;
    padding:12px 16px;
    font-size:.98rem;
  }

  .nav-links .button{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 760px){
  .nav-toggle{
    min-width:48px;
    min-height:48px;
    padding:0 14px;
    margin-left:0;
    justify-self:end;
    align-self:start;
  }

  .nav-links{
    position:static;
    left:auto;
    right:auto;
    top:auto;
    grid-column:1 / -1;
    margin-top:2px;
    width:100%;
    padding:12px;
    border-radius:24px;
    box-shadow:0 18px 36px rgba(15,23,42,.08);
  }
}

@media (max-width: 560px){
  .brand-copy strong{
    font-size:.95rem;
  }

  .brand-copy span{
    font-size:.7rem;
  }
}

.site-nav.is-compact-nav{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  justify-content:stretch;
  gap:12px;
  padding:16px;
  border-radius:24px;
}

.site-nav.is-compact-nav .brand{
  min-width:0;
  max-width:100%;
  align-items:center;
}

.site-nav.is-compact-nav .brand-copy{
  min-width:0;
}

.site-nav.is-compact-nav .brand-copy strong{
  overflow-wrap:normal;
  word-break:normal;
}

.site-nav.is-compact-nav .brand-copy span{
  display:block;
  font-size:.68rem;
  line-height:1.15;
}

.site-nav.is-compact-nav .nav-toggle{
  display:inline-flex;
  min-width:48px;
  min-height:48px;
  padding:0 14px;
  margin-left:0;
  justify-self:end;
  align-self:start;
}

.site-nav.is-compact-nav .nav-toggle__label{
  display:none;
}

.site-nav.is-compact-nav .nav-links{
  position:static;
  left:auto;
  right:auto;
  top:auto;
  z-index:auto;
  grid-column:1 / -1;
  display:none;
  width:100%;
  margin-top:2px;
  grid-template-columns:1fr;
  grid-auto-flow:row;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:flex-start;
  align-content:start;
  gap:8px;
  padding:12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 18px 36px rgba(15,23,42,.08);
}

.site-nav.is-compact-nav.is-menu-open .nav-links{
  display:grid;
}

.site-nav.is-compact-nav .nav-links > *{
  min-width:0;
}

.site-nav.is-compact-nav .nav-links a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:12px 16px;
  font-size:.98rem;
  white-space:normal;
}

.site-nav.is-compact-nav .nav-links .button{
  width:100%;
  justify-content:center;
}