@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

/* =========================================================
   1. Variables
   ========================================================= */
:root{
  --app-vh:1vh;
  --bg-primary:#040915;
  --bg-secondary:#081120;
  --bg-tertiary:#0d1729;
  --surface-1:rgba(10,18,34,.72);
  --surface-2:rgba(12,22,40,.84);
  --surface-3:rgba(16,28,50,.92);
  --surface-4:rgba(19,34,61,.98);
  --surface-strong:#101b31;
  --surface-soft:rgba(255,255,255,.03);

  --text-primary:#f5f8ff;
  --text-secondary:#c5d1ea;
  --text-muted:#8693b1;
  --text-faint:#697691;

  --border-soft:rgba(167,189,236,.12);
  --border-mid:rgba(167,189,236,.18);
  --border-strong:rgba(171,197,255,.3);
  --border-accent:rgba(121,200,255,.34);

  --accent:#79c8ff;
  --accent-2:#7a74ff;
  --accent-3:#7ef2c3;
  --accent-4:#9ac4ff;
  --success:#69e5b0;
  --warning:#ffbe70;
  --danger:#ff8b8b;

  --shadow-xs:0 6px 18px rgba(3,8,18,.15);
  --shadow-soft:0 22px 60px rgba(2,7,18,.34);
  --shadow-lg:0 30px 80px rgba(2,7,18,.42);
  --shadow-xl:0 48px 130px rgba(2,7,18,.6);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.02), 0 18px 60px rgba(60,110,255,.12);

  --radius-xs:12px;
  --radius-sm:16px;
  --radius-md:22px;
  --radius-lg:30px;
  --radius-xl:42px;
  --radius-2xl:52px;
  --radius-pill:999px;

  --container:1240px;
  --container-wide:1380px;

  --section-space:clamp(4.5rem,8vw,8rem);
  --section-space-tight:clamp(3rem,5vw,5rem);

  --transition-fast:.2s ease;
  --transition-base:.32s cubic-bezier(.22,.61,.36,1);
  --transition-slow:.55s cubic-bezier(.22,.61,.36,1);

  --grid-line:rgba(255,255,255,.035);
  --hero-ring:rgba(121,200,255,.18);
}

/* =========================================================
   2. Reset
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,blockquote,figure{margin:0}
ul,ol{padding:0}
img,svg,video,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0}
a{text-decoration:none;color:inherit}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:rgba(121,200,255,.22);color:var(--text-primary)}

/* =========================================================
   3. Base
   ========================================================= */
html{
  -webkit-text-size-adjust:100%;
  background:
    radial-gradient(circle at top left, rgba(121,200,255,.07), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(122,116,255,.08), transparent 24%),
    linear-gradient(180deg, #030711 0%, #040915 100%);
}

body{
  position:relative;
  min-height:calc(var(--app-vh,1vh) * 100);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(121,200,255,.2), transparent 0 24%),
    radial-gradient(circle at 88% 6%, rgba(122,116,255,.18), transparent 0 24%),
    radial-gradient(circle at 64% 32%, rgba(126,242,195,.06), transparent 0 18%),
    linear-gradient(180deg, #040915 0%, #07101d 36%, #050a15 100%);
  background-attachment:fixed,fixed,fixed,fixed;
  color:var(--text-secondary);
  font-family:"Manrope","Segoe UI",sans-serif;
  line-height:1.68;
  overscroll-behavior-x:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.showcase-picker-open{
  overflow:hidden;
}

html.has-overlay-lock,
html.has-overlay-lock body{
  overscroll-behavior:none;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
}

body::before{
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 32%, transparent 75%);
}

body::after{
  z-index:-2;
  background:
    radial-gradient(circle at 16% 10%, rgba(121,200,255,.14), transparent 0 18%),
    radial-gradient(circle at 82% 12%, rgba(122,116,255,.12), transparent 0 18%),
    radial-gradient(circle at 60% 45%, rgba(126,242,195,.05), transparent 0 12%);
  filter:blur(80px);
}

main{position:relative;z-index:1}

h1,h2,h3,h4,h5,h6{
  color:var(--text-primary);
  font-family:"Space Grotesk","Manrope","Segoe UI",sans-serif;
  line-height:1.02;
  letter-spacing:-.045em;
  text-align:center;
}

h1{
  font-size:clamp(3rem,6vw,5.9rem);
  text-wrap:balance;
}

h2{
  font-size:clamp(2rem,4vw,3.8rem);
  text-wrap:balance;
}

h3{
  font-size:clamp(1.25rem,1.8vw,1.72rem);
}

h4{
  font-size:1rem;
  letter-spacing:-.02em;
}

p,li{
  color:var(--text-secondary);
}

strong{
  color:var(--text-primary);
}

small{
  color:var(--text-muted);
}

.skip-link{
  position:absolute;
  left:-999px;
  top:1rem;
  z-index:200;
  padding:.85rem 1rem;
  border-radius:var(--radius-pill);
  background:var(--surface-3);
  color:var(--text-primary);
}

.skip-link:focus{left:1rem}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* =========================================================
   4. Layout
   ========================================================= */
.container,
.wrap{
  width:min(calc(100% - 2rem),var(--container));
  margin-inline:auto;
}

.container-wide{
  width:min(calc(100% - 2rem),var(--container-wide));
  margin-inline:auto;
}

.section{
  position:relative;
  padding:var(--section-space) 0;
}

.section-tight{
  position:relative;
  padding:var(--section-space-tight) 0;
}

.section-hero{
  position:relative;
  padding:clamp(5rem,10vw,8.75rem) 0 4rem;
}

.section-hero::before,
.section::before{
  content:none;
}

.section-heading{
  display:grid;
  gap:1rem;
  max-width:48rem;
  margin-inline:auto;
  margin-bottom:clamp(2rem,4vw,3.25rem);
  text-align:center;
  justify-items:center;
}

.section-heading.centered{
  margin-inline:auto;
  text-align:center;
}

.section-heading p{
  max-width:42rem;
  margin-inline:auto;
}

.section-heading::after{
  content:"";
  width:min(17rem,58vw);
  height:1.45rem;
  margin-top:.2rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 24' fill='none'%3E%3Cpath d='M10 12H102L122 5L144 18L166 8L188 12H286' stroke='%2379C8FF' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M64 12H148L168 18L192 6L214 12H252' stroke='%237A74FF' stroke-opacity='.5' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='12' r='3' fill='%2379C8FF'/%3E%3Ccircle cx='144' cy='18' r='3' fill='%23C7D2FF' fill-opacity='.88'/%3E%3Ccircle cx='286' cy='12' r='3' fill='%237A74FF'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity:.95;
}

.eyebrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  width:max-content;
  min-height:2.35rem;
  padding:.48rem .95rem;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(9,17,31,.72);
  color:var(--accent);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.15);
  backdrop-filter:blur(12px);
}

.eyebrow::before{
  content:"";
  width:.52rem;
  height:.52rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 1rem rgba(121,200,255,.55);
}

.stack{display:grid;gap:1rem}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem}

.divider{
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

.space-top-md{margin-top:1rem}
.space-top-lg{margin-top:1.35rem}
.section-tight--flush{padding-bottom:0}

.metric-row,
.feature-grid,
.tool-grid,
.process-grid,
.pricing-grid,
.blog-grid,
.footer-grid{
  display:grid;
  gap:1.25rem;
}

.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.process-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.footer-grid{grid-template-columns:1.2fr .8fr .8fr .8fr}

.stack-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}

.panel-shell{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(12,21,39,.88), rgba(7,13,24,.96));
  box-shadow:var(--shadow-soft);
}

.panel-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 34%);
}

.meta-label,
.pricing-meta,
.legal-meta,
.card-meta,
.kpi small,
.widget-header span{
  display:block;
  color:var(--text-muted);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================================================
   5. Navbar
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  padding:1rem 0 0;
}

.nav-shell{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:4.9rem;
  padding:.85rem 1rem;
  border:1px solid var(--border-soft);
  border-radius:calc(var(--radius-lg) + 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(7,13,24,.72);
  box-shadow:
    0 20px 45px rgba(3,8,18,.26),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}

.nav-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(122,116,255,.12), transparent 28%),
    radial-gradient(circle at top left, rgba(121,200,255,.1), transparent 28%);
  opacity:.9;
}

.logo{
  position:relative;
  display:flex;
  align-items:center;
  gap:.95rem;
  min-width:0;
  z-index:1;
}

.logo-mark-shell,
.logo-mark{
  width:3rem;
  height:3rem;
  padding:.45rem;
  border:1px solid var(--border-mid);
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(23,37,66,.98), rgba(11,18,32,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 25px rgba(0,0,0,.18);
}

.logo-mark-shell{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  -webkit-backdrop-filter:blur(16px) saturate(155%);
  backdrop-filter:blur(16px) saturate(155%);
}

.logo-mark-shell::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(1rem - 1px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 34%, rgba(100,159,255,.12) 64%, rgba(123,101,255,.16)),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.26), transparent 34%),
    radial-gradient(circle at 74% 78%, rgba(116,102,255,.12), transparent 40%);
  opacity:.94;
  pointer-events:none;
  z-index:0;
}

.logo-mark-shell::after{
  content:"";
  position:absolute;
  inset:-24% -18% 22% -14%;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,0) 46%);
  filter:blur(9px);
  opacity:.4;
  transform:rotate(-8deg);
  pointer-events:none;
  transition:opacity var(--transition-base), transform var(--transition-base);
  z-index:3;
}

.logo-mark-shell .logo-mark{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  object-fit:contain;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.14))
    drop-shadow(0 10px 22px rgba(73,123,255,.14));
  transition:
    transform var(--transition-base),
    filter var(--transition-base),
    opacity var(--transition-fast);
}

.logo-mark-shell canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .45s ease, transform var(--transition-base);
  z-index:2;
}

.logo-mark-shell.is-webgl-ready canvas{
  opacity:.88;
}

.logo-mark-shell.is-webgl-ready .logo-mark{
  opacity:1;
}

.logo:hover .logo-mark-shell .logo-mark,
.logo-mark-shell:hover .logo-mark{
  transform:translateY(-1px) scale(1.03);
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.18))
    drop-shadow(0 14px 28px rgba(88,145,255,.22));
}

.logo:hover .logo-mark-shell::after,
.logo-mark-shell:hover::after{
  opacity:.56;
  transform:rotate(-6deg) translate3d(2px, -2px, 0);
}

.logo:hover .logo-mark-shell canvas,
.logo-mark-shell:hover canvas{
  transform:scale(1.025);
}

.logo-stack{
  display:grid;
  gap:.18rem;
}

.logo-text{
  color:var(--text-primary);
  font-family:"Space Grotesk","Manrope",sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
}

.logo-tag{
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.2;
}

.main-nav{
  margin-left:auto;
  position:relative;
  z-index:1;
}

.main-nav ul{
  display:flex;
  align-items:center;
  gap:.35rem;
  list-style:none;
}

.main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.95rem;
  padding:0 1rem;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  color:var(--text-secondary);
  font-weight:700;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast);
}

.main-nav a:hover,
.main-nav a[aria-current="page"]{
  color:var(--text-primary);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.05);
}

.header-cta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.nav-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.nav-toggle-label{
  display:none;
  position:relative;
  z-index:1;
  margin-left:auto;
  width:3rem;
  height:3rem;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-soft);
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(17,29,52,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
  content:"";
  display:block;
  width:1.1rem;
  height:2px;
  border-radius:99px;
  background:var(--text-primary);
  transition:transform var(--transition-fast),opacity var(--transition-fast),background var(--transition-fast);
}

.nav-toggle-label span{position:relative}
.nav-toggle-label span::before{position:absolute;top:-6px}
.nav-toggle-label span::after{position:absolute;top:6px}

/* =========================================================
   6. Buttons
   ========================================================= */
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height:3.35rem;
  padding:0 1.24rem;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  color:var(--text-primary);
  font-weight:800;
  letter-spacing:-.02em;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  opacity:1;
}

.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-30%;
  width:30%;
  height:100%;
  z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:skewX(-20deg);
  opacity:0;
  transition:transform .7s ease, opacity .3s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 35px rgba(5,10,19,.28);
}

.btn:hover::after{
  opacity:1;
  transform:translateX(450%) skewX(-20deg);
}

.btn-primary{
  background:linear-gradient(135deg, rgba(121,200,255,.98), rgba(122,116,255,.96));
  color:#07101d;
  border-color:rgba(121,200,255,.34);
  box-shadow:
    0 16px 34px rgba(71,127,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.btn-primary::before{
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
}

.btn-primary:hover{
  box-shadow:
    0 22px 46px rgba(71,127,255,.3),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(18,31,55,.95), rgba(13,24,43,.95));
  border-color:var(--border-mid);
}

.btn-ghost{
  background:rgba(255,255,255,.03);
}

.btn-link{
  padding:0;
  min-height:auto;
  border:0;
  border-radius:0;
  color:var(--accent);
  background:none;
  box-shadow:none;
}

.btn-link::before,
.btn-link::after{display:none}

.btn-link:hover{
  box-shadow:none;
  transform:none;
  color:var(--text-primary);
}

.btn-lg{min-height:3.9rem;padding:0 1.48rem}
.btn-sm{min-height:2.8rem;padding:0 .96rem;font-size:.92rem}

/* =========================================================
   6b. Showcase Picker
   ========================================================= */
.showcase-picker-modal[hidden]{
  display:none;
}

.showcase-picker-modal{
  position:fixed;
  inset:0;
  z-index:1250;
  padding:20px;
  display:grid;
  align-items:start;
  justify-items:center;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

.showcase-picker-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top, rgba(121,200,255,.12), transparent 28%),
    rgba(4,8,18,.82);
  backdrop-filter:blur(12px);
}

.showcase-picker-dialog{
  position:relative;
  z-index:1;
  width:min(1080px, calc(100vw - 32px));
  max-height:min(calc((var(--app-vh,1vh) * 100) - 40px), 960px);
  margin:auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:1.4rem;
  padding:1.4rem;
  border-radius:1.9rem;
  border:1px solid rgba(171,197,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(9,14,28,.96), rgba(5,10,20,.98));
  box-shadow:
    0 30px 80px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  outline:none;
}

.showcase-picker-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:start;
}

.showcase-picker-header-copy{
  display:grid;
  gap:.55rem;
}

.showcase-picker-header-copy h2,
.showcase-picker-header-copy p{
  text-align:left;
}

.showcase-picker-header-copy h2{
  font-size:clamp(1.8rem, 3vw, 2.5rem);
}

.showcase-picker-header-copy p{
  max-width:56ch;
  margin:0;
}

.showcase-picker-kicker{
  color:rgba(146,175,255,.88);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.showcase-picker-close{
  width:46px;
  height:46px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(171,197,255,.12);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  color:#eef3ff;
  cursor:pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.showcase-picker-close:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.2);
}

.showcase-picker-close i{
  font-size:18px;
  line-height:1;
}

.showcase-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1rem;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  padding-right:.25rem;
}

.showcase-picker-card{
  position:relative;
  display:grid;
  gap:.9rem;
  min-height:240px;
  padding:1.2rem;
  border-radius:1.45rem;
  border:1px solid rgba(171,197,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(11,18,34,.94), rgba(8,13,24,.96));
  box-shadow:
    0 22px 44px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.showcase-picker-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at top right, rgba(121,200,255,.16), transparent 28%),
    radial-gradient(circle at bottom left, rgba(122,116,255,.14), transparent 24%);
  opacity:.88;
  pointer-events:none;
}

.showcase-picker-card:hover{
  transform:translateY(-4px);
  border-color:rgba(121,200,255,.26);
  box-shadow:
    0 28px 58px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.showcase-picker-card > *{
  position:relative;
  z-index:1;
}

.showcase-picker-card__eyebrow{
  color:rgba(146,175,255,.88);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.showcase-picker-card strong{
  font-size:clamp(1.35rem, 2vw, 1.9rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.showcase-picker-card p{
  margin:0;
  max-width:34ch;
}

.showcase-picker-card__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:var(--accent);
  font-weight:800;
}

.showcase-picker-card__cta::after{
  content:"";
  width:1.1rem;
  height:1px;
  background:currentColor;
}

/* =========================================================
   7. Forms
   ========================================================= */
label{
  color:var(--text-primary);
  font-size:.92rem;
  font-weight:700;
}

input,
textarea,
select{
  width:100%;
  font-size:16px;
  border:1px solid var(--border-soft);
  border-radius:1.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(255,255,255,.025);
  color:var(--text-primary);
  padding:.98rem 1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

input{min-height:3.4rem}
textarea{min-height:9.5rem;resize:vertical}

input::placeholder,
textarea::placeholder{
  color:var(--text-muted);
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(121,200,255,.45);
  box-shadow:
    0 0 0 4px rgba(121,200,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
  background:rgba(255,255,255,.045);
  outline:none;
}

.status{
  min-height:1.5rem;
  margin-top:.75rem;
  color:var(--text-secondary);
}

/* =========================================================
   8. Hero
   ========================================================= */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(22rem,.95fr);
  gap:1.5rem;
  align-items:start;
}

.hero-copy{
  position:relative;
  display:grid;
  gap:1.18rem;
  padding-top:.25rem;
  justify-items:center;
  text-align:center;
}

.hero-copy h1{
  max-width:12ch;
}

.hero-copy p{
  max-width:42rem;
  font-size:1.08rem;
  color:var(--text-secondary);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  justify-content:center;
  margin-top:.45rem;
}

.hero-badges,
.trust-line,
.meta-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.72rem;
  justify-content:center;
  list-style:none;
}

.hero-badges{
  gap:.9rem;
  max-width:44rem;
  margin:.8rem auto 0;
}

.hero-badges .pill{
  --pill-accent:var(--accent);
  --pill-accent-soft:rgba(121,200,255,.2);
  position:relative;
  isolation:isolate;
  gap:.7rem;
  min-height:2.85rem;
  padding:.7rem 1.12rem;
  border-color:rgba(171,197,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02)),
    radial-gradient(circle at top left, var(--pill-accent-soft), transparent 52%),
    linear-gradient(135deg, rgba(13,21,39,.96), rgba(8,14,26,.92));
  color:var(--text-primary);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 14px 28px rgba(2,7,18,.24),
    0 0 0 1px rgba(255,255,255,.015);
  backdrop-filter:blur(18px) saturate(145%);
  overflow:hidden;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.hero-badges .pill::before{
  width:.52rem;
  height:.52rem;
  background:linear-gradient(135deg, color-mix(in srgb, var(--pill-accent) 92%, white 8%), var(--pill-accent));
  box-shadow:
    0 0 0 .28rem color-mix(in srgb, var(--pill-accent) 16%, transparent),
    0 0 1.2rem color-mix(in srgb, var(--pill-accent) 34%, transparent);
}

.hero-badges .pill::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--pill-accent) 18%, transparent), transparent 32%);
  opacity:.92;
  pointer-events:none;
  z-index:-1;
}

.hero-badges .pill:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--pill-accent) 42%, rgba(171,197,255,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 18px 36px rgba(2,7,18,.3),
    0 0 0 1px color-mix(in srgb, var(--pill-accent) 12%, transparent);
}

.hero-badges .pill:nth-child(1){
  --pill-accent:#79c8ff;
  --pill-accent-soft:rgba(121,200,255,.22);
}

.hero-badges .pill:nth-child(2){
  --pill-accent:#8ea0ff;
  --pill-accent-soft:rgba(142,160,255,.22);
}

.hero-badges .pill:nth-child(3){
  --pill-accent:#7ef2c3;
  --pill-accent-soft:rgba(126,242,195,.18);
}

.hero-badges .pill:nth-child(4){
  --pill-accent:#9eb5ff;
  --pill-accent-soft:rgba(158,181,255,.18);
}

.hero-badges .pill:nth-child(5){
  --pill-accent:#8fd7ff;
  --pill-accent-soft:rgba(143,215,255,.2);
}

.pill,
.tag{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:2.35rem;
  padding:.52rem .88rem;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(255,255,255,.02);
  color:var(--text-secondary);
  font-size:.82rem;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
}

.pill strong,
.tag strong{
  font-weight:800;
}

.pill::before,
.tag::before{
  content:"";
  width:.42rem;
  height:.42rem;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 .9rem rgba(121,200,255,.3);
}

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

.metric-card,
.glass-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(18,29,52,.92), rgba(11,18,34,.96));
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
}

.metric-card::before,
.glass-card::before,
.feature-card::before,
.tool-card::before,
.process-step::before,
.pricing-card::before,
.blog-card::before,
.legal-section::before,
.cta-panel::before,
.footer-panel::before,
.faq-item::before,
.legal-shell::before,
.legal-anchor-nav::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%);
}

.metric-card{
  padding:1.18rem;
  display:grid;
  gap:.42rem;
}

.metric-card .label{
  color:var(--text-muted);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.metric-card strong{
  font-size:1.38rem;
  letter-spacing:-.04em;
}

.hero-visual{
  position:relative;
  min-height:46rem;
  padding:1rem;
}

.hero-orbit-svg{
  position:absolute;
  inset:-1rem auto auto 2%;
  width:min(100%,44rem);
  height:auto;
  opacity:.88;
  pointer-events:none;
  filter:drop-shadow(0 24px 70px rgba(34,74,190,.16));
  animation:orbitDrift 14s ease-in-out infinite;
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:2.2rem 1rem auto auto;
  width:13rem;
  height:13rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(121,200,255,.18), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}

.hero-visual::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2rem;
  width:12rem;
  height:12rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(122,116,255,.14), transparent 72%);
  filter:blur(20px);
  pointer-events:none;
}

.hero-dashboard{
  position:relative;
  display:grid;
  gap:1.15rem;
  align-content:start;
  min-height:100%;
  z-index:1;
  perspective:1400px;
}

.orbit-ring,
.orbit-path,
.orbit-link{
  vector-effect:non-scaling-stroke;
  fill:none;
}

.orbit-ring{
  stroke:rgba(167,189,236,.14);
  stroke-width:1.15;
}

.orbit-ring-outer{
  stroke-dasharray:10 12;
}

.orbit-ring-mid{
  stroke-dasharray:6 10;
}

.orbit-ring-inner{
  stroke:rgba(167,189,236,.2);
  stroke-dasharray:5 7;
}

.orbit-path,
.orbit-link{
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-dasharray:10 12;
  animation:orbitTrace 22s linear infinite;
}

.orbit-path-secondary,
.orbit-link-soft{
  stroke-width:1.35;
  stroke-dasharray:7 11;
  animation-duration:28s;
  opacity:.85;
}

.orbit-node{
  transform-box:fill-box;
  transform-origin:center;
  animation:nodePulse 4.8s ease-in-out infinite;
}

.orbit-node-b{animation-delay:.9s}
.orbit-node-c{animation-delay:1.6s}
.orbit-node-d{animation-delay:2.3s}
.orbit-node-e{animation-delay:3.1s}

.orbit-pulse{
  fill:rgba(121,200,255,.08);
  stroke:rgba(121,200,255,.24);
  stroke-width:1;
}

.orbit-core{
  fill:var(--text-primary);
  stroke:rgba(121,200,255,.6);
  stroke-width:2;
}

.dashboard-shell{
  position:relative;
  padding:1.25rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(122,116,255,.12), transparent 28%),
    radial-gradient(circle at top left, rgba(121,200,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(12,21,38,.96), rgba(8,14,26,.98));
  box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  transform-origin:50% 0;
  will-change:transform,opacity,box-shadow;
  animation:
    dashboardShellEnter .92s cubic-bezier(.2,.9,.22,1) both,
    dashboardShellFloat 8.8s ease-in-out 1.1s infinite;
}

.dashboard-shell::before{
  content:"";
  position:absolute;
  inset:-18% auto -12% -22%;
  width:46%;
  background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.11) 42%, rgba(121,200,255,.16) 54%, rgba(255,255,255,0) 70%);
  filter:blur(10px);
  opacity:0;
  transform:translate3d(-32%,0,0) rotate(11deg);
  pointer-events:none;
  animation:dashboardGlassSweep 7.4s ease-in-out 1.5s infinite;
}

.dashboard-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.22;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 90%);
  pointer-events:none;
}

.dashboard-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.dot-row{
  display:flex;
  gap:.45rem;
}

.dot-row span{
  width:.62rem;
  height:.62rem;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  animation:dashboardDotPulse 3.6s ease-in-out infinite;
}

.dot-row span:nth-child(2){animation-delay:.4s}
.dot-row span:nth-child(3){animation-delay:.8s}

.dashboard-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:1rem;
  align-items:start;
}

.dashboard-panel{
  position:relative;
  overflow:hidden;
  display:grid;
  align-content:start;
  grid-template-rows:auto auto auto;
  row-gap:.85rem;
  padding:1.15rem 1rem 1rem;
  min-height:25.4rem;
  border:1px solid rgba(160,186,240,.12);
  border-radius:1.45rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transform-origin:50% 100%;
  will-change:transform,opacity,box-shadow;
  animation:dashboardCardEnter .82s cubic-bezier(.2,.9,.22,1) .16s both;
}

.dashboard-panel::before,
.dashboard-widget::before,
.kpi::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%);
  opacity:.6;
}

.dashboard-panel::after,
.dashboard-widget::after{
  content:"";
  position:absolute;
  inset:auto -14% 0 auto;
  width:11rem;
  height:11rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(121,200,255,.1), transparent 68%);
  filter:blur(12px);
  opacity:.45;
  pointer-events:none;
}

.dashboard-panel h3,
.dashboard-widget h3{
  font-size:1rem;
  margin-bottom:0;
  letter-spacing:-.03em;
}

.kpi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.65rem;
  margin-bottom:0;
}

.kpi{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  width:100%;
  min-height:5.6rem;
  padding:1rem 1rem .95rem;
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  border:1px solid rgba(160,186,240,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  will-change:transform,opacity,box-shadow;
  animation:
    dashboardCardEnter .76s cubic-bezier(.2,.9,.22,1) both,
    dashboardSurfaceBreath 7.2s ease-in-out 1.3s infinite;
}

.kpi:nth-child(1){animation-delay:.26s,1.3s}
.kpi:nth-child(2){animation-delay:.36s,1.9s}
.kpi:nth-child(3){animation-delay:.46s,2.5s}

.kpi strong{
  display:block;
  margin-top:.45rem;
  font-size:1.22rem;
  line-height:1.1;
  letter-spacing:-.03em;
}

.kpi small{
  display:block;
  min-height:1.1rem;
  color:var(--text-muted);
  font-size:.78rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.chart-sim{
  position:relative;
  display:grid;
  gap:.7rem;
  align-content:start;
  padding-top:.05rem;
}

.chart-sim .line{
  height:.68rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,200,255,.95), rgba(122,116,255,.9));
  background-size:180% 100%;
  box-shadow:0 8px 18px rgba(73,123,255,.12);
  opacity:.94;
  transform-origin:left center;
  will-change:transform,opacity,background-position,box-shadow;
  animation:
    dashboardLineReveal .9s cubic-bezier(.2,.9,.22,1) both,
    dashboardLineFlow 4.6s linear 1.2s infinite,
    dashboardLinePulse 5.8s ease-in-out 1.6s infinite;
}

.chart-sim .line:nth-child(1){animation-delay:.52s,1.2s,1.6s}
.chart-sim .line:nth-child(2){animation-delay:.62s,1.35s,1.75s}
.chart-sim .line:nth-child(3){animation-delay:.72s,1.5s,1.9s}
.chart-sim .line:nth-child(4){animation-delay:.82s,1.65s,2.05s}

.line.w-90{width:90%}
.line.w-74{width:74%}
.line.w-62{width:62%}
.line.w-54{width:54%}
.w-92{width:92%}
.w-88{width:88%}
.w-84{width:84%}
.w-74{width:74%}
.w-68{width:68%}
.w-56{width:56%}
.w-48{width:48%}

.widget-stack{
  display:grid;
  gap:1rem;
  align-content:start;
}

.dashboard-widget{
  position:relative;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(160,186,240,.12);
  border-radius:1.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(255,255,255,.03);
  will-change:transform,opacity,box-shadow;
  animation:
    dashboardCardEnter .82s cubic-bezier(.2,.9,.22,1) both,
    dashboardSurfaceBreath 8.4s ease-in-out 1.5s infinite;
}

.widget-stack .dashboard-widget:nth-child(1){animation-delay:.3s,1.5s}
.widget-stack .dashboard-widget:nth-child(2){animation-delay:.42s,2.05s}

.widget-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.8rem;
}

.progress-track{
  position:relative;
  height:.75rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.progress-track::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24), rgba(255,255,255,0));
  transform:translateX(-120%);
  animation:dashboardGlassTrack 5.6s ease-in-out 1.4s infinite;
  pointer-events:none;
}

.progress-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  background-size:180% 100%;
  box-shadow:0 8px 18px rgba(73,123,255,.18);
  transform-origin:left center;
  will-change:transform,background-position,box-shadow;
  animation:
    dashboardLineReveal 1.15s cubic-bezier(.2,.9,.22,1) .52s both,
    dashboardLineFlow 4.2s linear 1.35s infinite,
    dashboardLinePulse 5.2s ease-in-out 1.65s infinite;
}

.mini-list{
  display:grid;
  gap:.7rem;
}

.mini-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  list-style:none;
  min-height:3.4rem;
  padding:.78rem .86rem;
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
    rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.03);
  will-change:transform,opacity,box-shadow;
  animation:
    dashboardCardEnter .72s cubic-bezier(.2,.9,.22,1) both,
    dashboardSurfaceBreath 7.6s ease-in-out 1.75s infinite;
}

.mini-list li:nth-child(1){animation-delay:.5s,1.75s}
.mini-list li:nth-child(2){animation-delay:.58s,2.15s}
.mini-list li:nth-child(3){animation-delay:.66s,2.55s}

.mini-list strong{
  text-shadow:0 0 1rem rgba(255,255,255,.08);
}

.floating-note{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  width:min(22rem,100%);
  margin-top:0;
  padding:1.2rem 1.15rem 1rem;
  backdrop-filter:blur(12px);
  will-change:transform,opacity,box-shadow;
  animation:
    dashboardCardEnter .9s cubic-bezier(.2,.9,.22,1) .56s both,
    dashboardNoteFloat 9.6s ease-in-out 1.8s infinite;
}

.floating-note h3{
  max-width:11ch;
  margin-bottom:.55rem;
}

.floating-note p{
  max-width:17rem;
}

.floating-note .cluster{
  flex-direction:column;
  align-items:flex-start;
  gap:.65rem;
}

.floating-note .tag{
  min-height:2.15rem;
  padding:.45rem .9rem;
}

.hero-note-row{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  min-height:0;
  padding-right:.25rem;
}

/* =========================================================
   9. Cards
   ========================================================= */
.glass-card,
.feature-card,
.tool-card,
.process-step,
.pricing-card,
.blog-card,
.legal-section,
.cta-panel,
.footer-panel,
.faq-item,
.legal-shell,
.legal-anchor-nav{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(15,25,46,.9), rgba(9,16,29,.96));
  box-shadow:var(--shadow-soft);
}

.glass-card{
  padding:1.5rem;
}

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border:1px solid rgba(121,200,255,.24);
  border-radius:1rem;
  background:
    linear-gradient(135deg, rgba(121,200,255,.12), rgba(122,116,255,.14));
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.card-icon i{
  font-size:1.12rem;
  line-height:1;
  text-shadow:0 0 18px rgba(121,200,255,.18);
}

.card-meta{
  margin-bottom:.7rem;
}

/* =========================================================
   10. Features / Tools / Standards
   ========================================================= */
.feature-card,
.tool-card{
  display:grid;
  gap:1rem;
  padding:1.45rem;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
}

.feature-card:hover,
.tool-card:hover,
.process-step:hover,
.pricing-card:hover,
.blog-card:hover,
.faq-item:hover,
.standard-item:hover,
.module-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-xl);
}

.feature-card p,
.tool-card p{
  font-size:.96rem;
}

.tool-card .cluster{
  gap:.5rem;
  justify-content:center;
}

.tool-card .tag{
  min-height:1.95rem;
  padding:.36rem .7rem;
  font-size:.72rem;
}

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

.standard-item{
  position:relative;
  overflow:hidden;
  padding:1.28rem;
  border:1px solid var(--border-soft);
  border-radius:1.5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-soft);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.standard-item strong{
  display:block;
  margin-bottom:.35rem;
  font-size:1.05rem;
}

/* =========================================================
   11. Process
   ========================================================= */
.process-summary{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:1.25rem;
}

.compare-showcase{
  display:grid;
  grid-template-columns:minmax(18rem,.78fr) minmax(0,1.22fr);
  gap:1.25rem;
  align-items:start;
}

.compare-legend{
  display:grid;
  gap:1.1rem;
  padding:1.45rem;
}

.compare-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}

.compare-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.5rem;
  padding:0 1rem;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  color:var(--text-secondary);
  font-weight:800;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.compare-chip:hover{
  transform:translateY(-1px);
  border-color:var(--border-mid);
  color:var(--text-primary);
}

.compare-chip.is-active{
  border-color:rgba(121,200,255,.24);
  background:rgba(121,200,255,.1);
  color:var(--text-primary);
  box-shadow:0 12px 30px rgba(8,18,36,.2);
}

.compare-note-stack{
  display:grid;
}

.compare-note{
  display:none;
  gap:.8rem;
  padding:1.05rem;
  border:1px solid var(--border-soft);
  border-radius:1.35rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.018);
}

.compare-note.is-active{
  display:grid;
}

.compare-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:2rem;
  padding:.28rem .78rem;
  border:1px solid rgba(121,200,255,.18);
  border-radius:var(--radius-pill);
  background:rgba(121,200,255,.1);
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.compare-checks{
  display:grid;
  gap:.55rem;
  padding-left:1.1rem;
}

.compare-mini-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}

.compare-mini-card{
  display:grid;
  gap:.25rem;
  padding:.95rem;
  border:1px solid var(--border-soft);
  border-radius:1.15rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.018);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.compare-mini-card small{
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.compare-mini-card strong{
  font-size:1rem;
  letter-spacing:-.03em;
}

.compare-shell{
  --compare-position:86%;
  position:relative;
  padding:1.1rem;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(122,116,255,.14), transparent 28%),
    radial-gradient(circle at top left, rgba(121,200,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(13,22,40,.96), rgba(8,14,26,.98));
}

.compare-shell.is-dragging .compare-divider{
  box-shadow:0 0 28px rgba(121,200,255,.35);
}

.compare-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.compare-toolbar-label{
  color:var(--text-primary);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.compare-stage{
  position:relative;
  min-height:34rem;
  overflow:hidden;
  cursor:ew-resize;
  touch-action:pan-y;
  border:1px solid rgba(171,197,255,.14);
  border-radius:calc(var(--radius-xl) - 8px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(6,11,21,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.compare-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 10%, rgba(121,200,255,.12), transparent 18%),
    radial-gradient(circle at 88% 12%, rgba(122,116,255,.14), transparent 18%);
  pointer-events:none;
}

.compare-screen{
  position:absolute;
  inset:0;
  padding:1rem;
  pointer-events:none;
}

.compare-screen-before{
  z-index:1;
}

.compare-screen-after{
  z-index:2;
  clip-path:inset(0 calc(100% - var(--compare-position)) 0 0);
  will-change:clip-path;
}

.compare-stage-label{
  position:absolute;
  top:1rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.1rem;
  padding:0 .82rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);
  background:rgba(7,13,24,.7);
  backdrop-filter:blur(12px);
  color:var(--text-primary);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.compare-stage-label-before{left:1rem}
.compare-stage-label-after{right:1rem}

.compare-canvas{
  position:relative;
  display:grid;
  gap:1rem;
  height:100%;
  padding:3.2rem 1rem 1rem;
  border:1px solid rgba(255,255,255,.05);
  border-radius:1.5rem;
  overflow:hidden;
}

.compare-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%);
  pointer-events:none;
}

.compare-canvas-legacy{
  display:block;
  padding:0;
  border-color:rgba(255,255,255,.03);
  font-family:"Arial","Helvetica Neue",sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    linear-gradient(180deg, rgba(41,33,28,.92), rgba(17,13,11,.96));
}

.compare-canvas-legacy::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 16%),
    linear-gradient(0deg, rgba(0,0,0,.18), transparent 34%);
}

.compare-old-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1.05fr 1.35fr 1.7fr 1.05fr;
  grid-template-rows:1.02fr .98fr;
  filter:saturate(.82) brightness(.76) contrast(.92);
}

.compare-old-grid::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.42)),
    linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 25%),
    linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 50%);
  background-size:auto, 25% 100%, 100% 50%;
}

.compare-old-tile{
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.compare-old-tile::before{
  content:"";
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 72% 24%, rgba(255,170,104,.18), transparent 22%),
    linear-gradient(135deg, rgba(20,16,14,.12), transparent 56%);
}

.compare-old-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22));
}

.compare-old-tile.tile-1{
  grid-column:1;
  grid-row:1;
  background:
    radial-gradient(circle at 40% 16%, rgba(255,255,255,.16), transparent 18%),
    linear-gradient(120deg, #4b4744 0%, #302722 38%, #171311 100%);
}

.compare-old-tile.tile-2{
  grid-column:2;
  grid-row:1;
  background:
    radial-gradient(circle at 60% 28%, rgba(245,206,190,.32), transparent 22%),
    linear-gradient(120deg, #7c6f68 0%, #b59a90 38%, #6b574f 100%);
}

.compare-old-tile.tile-3{
  grid-column:3;
  grid-row:1;
  background:
    radial-gradient(circle at 52% 24%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(120deg, #4d4039 0%, #7f6a5c 35%, #2c2624 100%);
}

.compare-old-tile.tile-4{
  grid-column:4;
  grid-row:1;
  background:
    radial-gradient(circle at 55% 38%, rgba(255,219,204,.28), transparent 18%),
    linear-gradient(120deg, #998577 0%, #cbb39c 45%, #7a6155 100%);
}

.compare-old-tile.tile-5{
  grid-column:1 / span 2;
  grid-row:2;
  background:
    radial-gradient(circle at 46% 74%, rgba(255,145,76,.26), transparent 18%),
    linear-gradient(120deg, #32445d 0%, #5f7b93 35%, #6b5139 76%, #302823 100%);
}

.compare-old-tile.tile-6{
  grid-column:3 / span 2;
  grid-row:2;
  background:
    radial-gradient(circle at 62% 22%, rgba(255,187,127,.14), transparent 18%),
    linear-gradient(120deg, #7c684f 0%, #5f4b36 42%, #3a3129 100%);
}

.compare-old-topline,
.compare-old-header,
.compare-old-hero,
.compare-old-ghost{
  position:absolute;
  z-index:2;
}

.compare-old-topline{
  top:.35rem;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:1.2rem;
  color:rgba(255,255,255,.72);
  font-size:.74rem;
  font-weight:700;
}

.compare-old-header{
  top:1.55rem;
  left:1.25rem;
  right:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.compare-old-brand{
  color:#ffffff;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.04em;
}

.compare-old-brand::first-letter{
  color:#ff8f1e;
}

.compare-old-caption{
  color:rgba(255,255,255,.68);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.compare-old-menu{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.compare-old-menu span{
  color:#ffffff;
  font-size:.86rem;
  font-weight:700;
}

.compare-old-menu span:first-child{
  color:#ff9a2c;
}

.compare-old-hero{
  top:5.2rem;
  left:50%;
  width:min(72%,40rem);
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:1rem;
  text-align:center;
}

.compare-old-hero h3{
  color:#ffffff;
  font-family:"Arial","Helvetica Neue",sans-serif;
  font-size:clamp(2rem,3vw,3.2rem);
  line-height:1.03;
  letter-spacing:-.03em;
  text-shadow:0 4px 26px rgba(0,0,0,.32);
}

.compare-old-line{
  display:block;
  width:58%;
  height:3px;
  background:#f28c1d;
  box-shadow:0 0 0 1px rgba(242,140,29,.06);
}

.compare-old-line-short{
  width:48%;
}

.compare-old-pricebox{
  display:grid;
  gap:.38rem;
  min-width:min(32rem,100%);
  padding:.9rem 1.15rem 1rem;
  background:rgba(27,27,27,.48);
  backdrop-filter:blur(2px);
  color:#ffffff;
}

.compare-old-pricebox strong{
  font-size:1.35rem;
  font-weight:800;
}

.compare-old-pricebox p{
  color:#ffffff;
  font-size:.98rem;
  font-weight:700;
}

.compare-old-pricebox small{
  color:rgba(255,255,255,.86);
  font-size:.8rem;
  line-height:1.35;
}

.compare-old-cta-zone{
  display:grid;
  justify-items:center;
  gap:.65rem;
  color:#ffffff;
}

.compare-old-cta-zone p{
  color:#ffffff;
  font-size:.96rem;
  font-weight:700;
}

.compare-old-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.55rem;
  padding:0 1.35rem;
  border-radius:.3rem;
  background:#f58614;
  color:#ffffff;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 10px 25px rgba(132,71,11,.28);
}

.compare-old-ghost{
  background:rgba(54,54,54,.34);
}

.compare-old-ghost-a{
  left:26%;
  top:39%;
  width:3.8rem;
  height:5rem;
}

.compare-old-ghost-b{
  right:13%;
  top:37%;
  width:3.2rem;
  height:6rem;
}

.compare-canvas-before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    linear-gradient(180deg, rgba(16,26,46,.86), rgba(10,17,31,.94));
}

.compare-canvas-after{
  background:
    radial-gradient(circle at top right, rgba(122,116,255,.15), transparent 30%),
    radial-gradient(circle at top left, rgba(121,200,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(19,32,58,.98), rgba(10,17,31,.98));
}

.compare-topbar{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.compare-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2rem;
  padding:0 .75rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);
  color:var(--text-secondary);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.compare-badge-accent{
  border-color:rgba(121,200,255,.2);
  background:rgba(121,200,255,.1);
  color:var(--accent);
}

.compare-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:flex-end;
}

.compare-nav span{
  display:inline-flex;
  align-items:center;
  min-height:1.9rem;
  padding:0 .68rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:700;
}

.compare-hero-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(15rem,.85fr);
  gap:1rem;
  align-items:start;
}

.compare-hero-block,
.compare-ui-card,
.compare-proof-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(167,189,236,.1);
  border-radius:1.35rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.022);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.compare-hero-block{
  display:grid;
  gap:.8rem;
  padding:1.2rem;
}

.compare-hero-block-before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008)),
    rgba(255,255,255,.014);
}

.compare-hero-block-after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(255,255,255,.03);
}

.compare-kicker{
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.compare-hero-block h3{
  font-size:clamp(1.25rem,2vw,1.85rem);
  line-height:1.03;
}

.compare-hero-block p{
  font-size:.95rem;
  color:var(--text-secondary);
}

.compare-action-row,
.compare-token-row,
.compare-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
}

.compare-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.45rem;
  padding:0 .95rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);
  font-size:.82rem;
  font-weight:800;
}

.compare-action-muted{
  background:rgba(255,255,255,.04);
  color:var(--text-muted);
}

.compare-action-ghost{
  background:rgba(255,255,255,.02);
  color:var(--text-secondary);
}

.compare-action-primary{
  background:linear-gradient(135deg, rgba(121,200,255,.98), rgba(122,116,255,.96));
  color:#07101d;
  border-color:rgba(121,200,255,.28);
  box-shadow:0 14px 35px rgba(71,127,255,.18);
}

.compare-action-secondary{
  background:rgba(255,255,255,.05);
  color:var(--text-primary);
}

.compare-token-row span,
.compare-pill-row span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2rem;
  padding:0 .76rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  color:var(--text-secondary);
  font-size:.72rem;
  font-weight:700;
}

.compare-side-stack{
  display:grid;
  gap:.85rem;
}

.compare-ui-card{
  display:grid;
  gap:.65rem;
  padding:1rem;
}

.compare-ui-card small,
.compare-proof-card small{
  color:var(--text-muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.compare-ui-card strong,
.compare-proof-card strong{
  font-size:1.05rem;
  line-height:1.1;
  letter-spacing:-.03em;
}

.compare-ui-card-featured{
  background:
    radial-gradient(circle at top right, rgba(122,116,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(255,255,255,.03);
}

.compare-line-stack{
  display:grid;
  gap:.55rem;
}

.compare-line-stack span{
  display:block;
  height:.62rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,200,255,.94), rgba(122,116,255,.88));
  box-shadow:0 8px 18px rgba(73,123,255,.14);
}

.compare-line-stack-muted span{
  background:linear-gradient(90deg, rgba(121,200,255,.46), rgba(122,116,255,.38));
  box-shadow:none;
  opacity:.82;
}

.compare-proof-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
  margin-top:auto;
}

.compare-proof-card{
  display:grid;
  gap:.3rem;
  min-height:5.3rem;
  padding:1rem;
}

.compare-proof-row-before .compare-proof-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.008)),
    rgba(255,255,255,.014);
}

.compare-proof-row-after .compare-proof-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(255,255,255,.026);
}

.compare-divider{
  position:absolute;
  top:.7rem;
  bottom:.7rem;
  left:var(--compare-position);
  z-index:4;
  width:2px;
  pointer-events:none;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(121,200,255,.2), rgba(122,116,255,.8), rgba(121,200,255,.2));
  box-shadow:0 0 22px rgba(121,200,255,.25);
  will-change:left;
}

.compare-handle{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border:1px solid rgba(171,197,255,.22);
  border-radius:50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(12,24,46,.98), rgba(9,16,29,.98));
  color:var(--text-primary);
  cursor:grab;
  transform:translate(-50%,-50%);
  box-shadow:
    0 20px 45px rgba(2,7,18,.34),
    0 0 0 8px rgba(121,200,255,.08);
}

.compare-shell.is-dragging .compare-handle{
  cursor:grabbing;
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 22px 50px rgba(2,7,18,.4),
    0 0 0 10px rgba(121,200,255,.12);
}

.compare-canvas-cheers{
  display:grid;
  gap:.7rem;
  padding:.8rem;
  font-family:"Inter","Manrope","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.44), transparent 22%),
    radial-gradient(circle at 90% 16%, rgba(255,255,255,.26), transparent 20%),
    linear-gradient(180deg, #f5f4f1 0%, #ede9e4 100%);
  color:#17181d;
  border-color:rgba(17,19,24,.08);
}

.compare-canvas-cheers::before{
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.48), transparent 20%);
}

.compare-cheers-ribbon{
  display:flex;
  justify-content:center;
  gap:1rem;
  padding:.3rem .8rem;
  border:1px solid rgba(17,19,24,.08);
  border-radius:999px;
  background:rgba(255,255,255,.45);
  color:rgba(17,19,24,.68);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.03em;
}

.compare-cheers-window{
  display:grid;
  gap:.9rem;
  padding:1rem;
  border:1px solid rgba(17,19,24,.08);
  border-radius:1.45rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28)),
    rgba(193,199,208,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 22px 48px rgba(46,48,56,.12);
  backdrop-filter:blur(14px);
}

.compare-cheers-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
}

.compare-cheers-logo{
  width:7rem;
  height:auto;
  object-fit:contain;
}

.compare-cheers-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
}

.compare-cheers-nav span,
.compare-cheers-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2rem;
  padding:0 .8rem;
  border:1px solid rgba(17,19,24,.1);
  border-radius:999px;
  background:rgba(255,255,255,.34);
  color:rgba(17,19,24,.78);
  font-size:.72rem;
  font-weight:700;
}

.compare-cheers-cta{
  background:rgba(21,23,30,.9);
  color:#f3f4f6;
}

.compare-cheers-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(12rem,.88fr);
  gap:.9rem;
  align-items:stretch;
}

.compare-cheers-copy,
.compare-cheers-photo,
.compare-cheers-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(17,19,24,.1);
  border-radius:1.3rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18)),
    rgba(177,183,194,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}

.compare-cheers-copy{
  display:grid;
  gap:.8rem;
  align-content:start;
  padding:1.1rem;
}

.compare-cheers-tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:1.9rem;
  padding:0 .7rem;
  border:1px solid rgba(17,19,24,.08);
  border-radius:999px;
  background:rgba(255,255,255,.36);
  color:rgba(17,19,24,.7);
  font-size:.66rem;
  font-weight:700;
}

.compare-cheers-copy h3{
  color:#111318;
  font-family:"Fraunces","Times New Roman",serif;
  font-size:clamp(1.75rem,2.6vw,2.9rem);
  line-height:.98;
  letter-spacing:-.03em;
  text-align:left;
}

.compare-cheers-copy p{
  color:rgba(17,19,24,.74);
  font-size:.9rem;
  line-height:1.55;
  text-align:left;
}

.compare-cheers-actions,
.compare-cheers-stamps{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  justify-content:flex-start;
}

.compare-cheers-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:0 .95rem;
  border:1px solid rgba(17,19,24,.12);
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
}

.compare-cheers-btn-primary{
  background:rgba(20,22,27,.94);
  color:#f3f4f6;
}

.compare-cheers-btn-secondary{
  background:rgba(255,255,255,.38);
  color:#17181d;
}

.compare-cheers-stamps span{
  display:inline-flex;
  align-items:center;
  min-height:1.95rem;
  padding:0 .72rem;
  border:1px solid rgba(17,19,24,.08);
  border-radius:999px;
  background:rgba(255,255,255,.34);
  color:rgba(17,19,24,.7);
  font-size:.68rem;
  font-weight:700;
}

.compare-cheers-photo{
  min-height:17rem;
}

.compare-cheers-photo img,
.compare-cheers-panel-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.compare-cheers-bottom{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:.9rem;
}

.compare-cheers-panel{
  display:grid;
  gap:.8rem;
  padding:.9rem;
}

.compare-cheers-panel-team{
  grid-template-columns:minmax(6rem,.82fr) 1fr;
  align-items:center;
}

.compare-cheers-panel-media{
  min-height:7rem;
  border-radius:1rem;
  overflow:hidden;
}

.compare-cheers-panel-copy{
  display:grid;
  gap:.28rem;
}

.compare-cheers-panel small{
  color:rgba(17,19,24,.52);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.compare-cheers-panel strong{
  color:#111318;
  font-size:1rem;
  line-height:1.1;
  letter-spacing:-.03em;
}

.compare-cheers-panel span,
.compare-cheers-panel p{
  color:rgba(17,19,24,.68);
  font-size:.83rem;
  line-height:1.45;
  text-align:left;
}

.compare-handle i{
  font-size:1.05rem;
}

.compare-controls{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.85rem;
  align-items:center;
  margin-top:1rem;
}

.compare-controls span{
  color:var(--text-muted);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.compare-range{
  appearance:none;
  width:100%;
  height:.7rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  outline:none;
  cursor:pointer;
}

.compare-range::-webkit-slider-runnable-track{
  height:.7rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,200,255,.22), rgba(122,116,255,.22));
}

.compare-range::-moz-range-track{
  height:.7rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,200,255,.22), rgba(122,116,255,.22));
}

.compare-range::-webkit-slider-thumb{
  appearance:none;
  width:1.2rem;
  height:1.2rem;
  margin-top:-.25rem;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(121,200,255,1), rgba(122,116,255,.98));
  box-shadow:0 0 0 6px rgba(121,200,255,.08), 0 10px 24px rgba(2,7,18,.28);
}

.compare-range::-moz-range-thumb{
  width:1.2rem;
  height:1.2rem;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(121,200,255,1), rgba(122,116,255,.98));
  box-shadow:0 0 0 6px rgba(121,200,255,.08), 0 10px 24px rgba(2,7,18,.28);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nav-shell,
  .eyebrow,
  .pill,
  .tag,
  .glass-card,
  .feature-card,
  .tool-card,
  .process-step,
  .pricing-card,
  .blog-card,
  .legal-section,
  .cta-panel,
  .footer-panel,
  .faq-item,
  .legal-shell,
  .legal-anchor-nav,
  .btn,
  .compare-stage-label,
  .compare-note,
  .compare-mini-card,
  .compare-cheers-window,
  .compare-cheers-copy,
  .compare-cheers-photo,
  .compare-cheers-panel{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

html.is-inapp-browser{
  scroll-behavior:auto;
}

html.is-inapp-browser body{
  background-attachment:scroll,scroll,scroll,scroll;
}

html.is-inapp-browser .site-header{
  position:static;
}

html.is-inapp-browser .nav-shell,
html.is-inapp-browser .eyebrow,
html.is-inapp-browser .pill,
html.is-inapp-browser .tag,
html.is-inapp-browser .glass-card,
html.is-inapp-browser .feature-card,
html.is-inapp-browser .tool-card,
html.is-inapp-browser .process-step,
html.is-inapp-browser .pricing-card,
html.is-inapp-browser .blog-card,
html.is-inapp-browser .legal-section,
html.is-inapp-browser .cta-panel,
html.is-inapp-browser .footer-panel,
html.is-inapp-browser .faq-item,
html.is-inapp-browser .legal-shell,
html.is-inapp-browser .legal-anchor-nav,
html.is-inapp-browser .btn,
html.is-inapp-browser .compare-stage-label,
html.is-inapp-browser .compare-note,
html.is-inapp-browser .compare-mini-card,
html.is-inapp-browser .compare-cheers-window,
html.is-inapp-browser .compare-cheers-copy,
html.is-inapp-browser .compare-cheers-photo,
html.is-inapp-browser .compare-cheers-panel{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

html.is-inapp-browser .nav-shell{
  background:
    linear-gradient(180deg, rgba(13,21,38,.96), rgba(8,14,26,.98)),
    rgba(7,13,24,.96);
}

html.is-inapp-browser .compare-stage{
  touch-action:pan-y;
}

html.is-ios-meta-browser body{
  background:
    linear-gradient(180deg, #040915 0%, #07101d 42%, #050a15 100%);
  background-attachment:scroll;
}

html.is-ios-meta-browser body::before,
html.is-ios-meta-browser body::after{
  content:none;
  display:none;
}

html.is-ios-meta-browser .site-header{
  position:static;
}

html.is-ios-meta-browser .hero-dashboard,
html.is-ios-meta-browser .dashboard-shell,
html.is-ios-meta-browser .dashboard-panel,
html.is-ios-meta-browser .dashboard-widget,
html.is-ios-meta-browser .glass-card,
html.is-ios-meta-browser .feature-card,
html.is-ios-meta-browser .tool-card,
html.is-ios-meta-browser .process-step,
html.is-ios-meta-browser .pricing-card,
html.is-ios-meta-browser .blog-card,
html.is-ios-meta-browser .legal-section,
html.is-ios-meta-browser .cta-panel,
html.is-ios-meta-browser .footer-panel,
html.is-ios-meta-browser .compare-shell,
html.is-ios-meta-browser .compare-canvas,
html.is-ios-meta-browser .compare-cheers-window,
html.is-ios-meta-browser .compare-cheers-copy,
html.is-ios-meta-browser .compare-cheers-photo,
html.is-ios-meta-browser .compare-cheers-panel{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

html.is-ios-meta-browser .hero-visual *,
html.is-ios-meta-browser .compare-stage *,
html.is-ios-meta-browser .compare-shell *{
  will-change:auto !important;
}

html.is-ios-meta-browser .hero-orbit-svg,
html.is-ios-meta-browser .timeline-flow-svg,
html.is-ios-meta-browser .editorial-note-svg,
html.is-ios-meta-browser .editorial-constellation-svg,
html.is-ios-meta-browser .dashboard-shell,
html.is-ios-meta-browser .dashboard-shell::before,
html.is-ios-meta-browser .dashboard-panel,
html.is-ios-meta-browser .dashboard-widget,
html.is-ios-meta-browser .kpi,
html.is-ios-meta-browser .chart-sim .line,
html.is-ios-meta-browser .progress-track::after,
html.is-ios-meta-browser .progress-track span,
html.is-ios-meta-browser .mini-list li,
html.is-ios-meta-browser .floating-note,
html.is-ios-meta-browser .dot-row span,
html.is-ios-meta-browser .hero-orbit-svg *,
html.is-ios-meta-browser .timeline-flow-svg *,
html.is-ios-meta-browser .editorial-note-svg *,
html.is-ios-meta-browser .editorial-constellation-svg *{
  animation:none !important;
}

html.is-ios-meta-browser .compare-stage{
  min-height:30rem;
  touch-action:pan-x pan-y;
}

html.is-ios-meta-browser .showcase-picker-modal,
html.is-ios-meta-browser .showcase-picker-grid,
html.is-ios-meta-browser .nav-shell.is-menu-open .main-nav,
html.is-inapp-browser .showcase-picker-modal,
html.is-inapp-browser .showcase-picker-grid,
html.is-inapp-browser .nav-shell.is-menu-open .main-nav{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

html.is-ios-meta-browser .compare-stage::before{
  opacity:.55;
}

html.is-ios-meta-browser .compare-screen-after{
  will-change:auto;
}

html.is-ios-meta-browser .compare-divider,
html.is-ios-meta-browser .compare-handle{
  transition:none !important;
}

html.is-ios-meta-browser .btn,
html.is-ios-meta-browser .nav-shell,
html.is-ios-meta-browser .compare-stage-label{
  box-shadow:var(--shadow-xs);
}

.timeline-card,
.result-grid,
.impact-grid{
  display:grid;
  gap:1rem;
}

.timeline-card{
  position:relative;
  padding:1.6rem;
  padding-right:10.8rem;
  overflow:hidden;
}

.timeline-list{
  position:relative;
  z-index:1;
  display:grid;
  gap:1rem;
}

.timeline-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  list-style:none;
}

.timeline-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border-radius:1rem;
  background:linear-gradient(135deg, rgba(121,200,255,.16), rgba(122,116,255,.2));
  color:var(--text-primary);
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.timeline-flow-svg{
  position:absolute;
  top:1rem;
  right:.55rem;
  width:11rem;
  height:calc(100% - 2rem);
  opacity:.92;
  pointer-events:none;
  filter:drop-shadow(0 18px 38px rgba(36,74,191,.14));
}

.flow-spine,
.flow-trace{
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-dasharray:8 11;
  animation:orbitTrace 24s linear infinite;
}

.flow-trace{
  stroke-width:1.2;
  opacity:.8;
}

.flow-node{
  transform-box:fill-box;
  transform-origin:center;
  animation:nodePulse 5.2s ease-in-out infinite;
}

.flow-node:nth-of-type(2){animation-delay:.8s}
.flow-node:nth-of-type(3){animation-delay:1.6s}
.flow-node:nth-of-type(4){animation-delay:2.4s}
.flow-node:nth-of-type(5){animation-delay:3.2s}

.flow-node-ring{
  fill:rgba(121,200,255,.08);
  stroke:rgba(121,200,255,.22);
  stroke-width:1;
}

.flow-node-core{
  fill:var(--text-primary);
  stroke:rgba(121,200,255,.6);
  stroke-width:2;
}

.timeline-copy strong{
  display:block;
  margin-bottom:.35rem;
}

.process-step{
  display:grid;
  gap:1rem;
  padding:1.55rem;
}

.step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.25rem;
  height:3.25rem;
  border-radius:1rem;
  border:1px solid rgba(121,200,255,.22);
  background:linear-gradient(135deg, rgba(121,200,255,.16), rgba(122,116,255,.18));
  color:var(--text-primary);
  font-family:"Space Grotesk","Manrope",sans-serif;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.process-step ul,
.check-list,
.legal-list{
  display:grid;
  gap:.66rem;
  padding-left:1.1rem;
}

.process-step li,
.check-list li,
.legal-list li{
  color:var(--text-secondary);
}

.result-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.stack-visual{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.module-card{
  position:relative;
  overflow:hidden;
  padding:1.25rem;
  border:1px solid var(--border-soft);
  border-radius:1.3rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-soft);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* =========================================================
   12. Pricing
   ========================================================= */
.pricing-card{
  display:grid;
  gap:1.15rem;
  padding:1.65rem;
}

.pricing-card.featured{
  border-color:var(--border-strong);
  background:
    radial-gradient(circle at top right, rgba(122,116,255,.14), transparent 32%),
    radial-gradient(circle at top left, rgba(121,200,255,.12), transparent 26%),
    linear-gradient(180deg, rgba(18,30,56,.96), rgba(10,17,32,.98));
  transform:translateY(-.35rem);
  box-shadow:
    0 35px 90px rgba(2,7,18,.52),
    0 0 0 1px rgba(121,200,255,.08);
}

.pricing-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:2rem;
  padding:.35rem .8rem;
  border:1px solid rgba(121,200,255,.18);
  border-radius:var(--radius-pill);
  background:rgba(121,200,255,.12);
  color:var(--accent);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pricing-price{
  display:flex;
  align-items:flex-end;
  gap:.5rem;
}

.pricing-price strong{
  font-size:2.35rem;
  line-height:1;
}

.pricing-price span{
  color:var(--text-muted);
  font-weight:700;
}

/* =========================================================
   13. Blog
   ========================================================= */
.featured-post{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:1.25rem;
  padding:1.5rem;
}

.post-visual,
.blog-visual{
  position:relative;
  min-height:16rem;
  display:grid;
  align-content:space-between;
  gap:.9rem;
  padding:1rem;
  border:1px solid var(--border-soft);
  border-radius:calc(var(--radius-lg) - 4px);
  background:
    radial-gradient(circle at 20% 20%, rgba(121,200,255,.18), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(122,116,255,.14), transparent 20%),
    linear-gradient(180deg, rgba(19,32,58,.98), rgba(10,17,31,.98));
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.post-visual > *,
.blog-visual > *{
  position:relative;
  z-index:1;
}

.post-visual::before,
.blog-visual::before{
  content:"";
  position:absolute;
  inset:1rem;
  border:1px solid rgba(176,198,244,.08);
  border-radius:1.2rem;
}

.post-visual::after,
.blog-visual::after{
  content:none;
}

.editorial-note{
  position:relative;
  min-height:22rem;
  padding-top:7.4rem;
}

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

.editorial-note-svg,
.editorial-constellation-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.editorial-note-svg{
  z-index:0;
  opacity:.92;
}

.editorial-constellation-svg{
  z-index:0;
  opacity:.88;
}

.editorial-frame,
.editorial-signal,
.editorial-constellation-line{
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:8 12;
  animation:orbitTrace 24s linear infinite;
}

.editorial-signal-soft,
.editorial-constellation-line-soft{
  stroke-width:1.2;
  opacity:.82;
  animation-duration:30s;
}

.editorial-node{
  fill:rgba(121,200,255,.06);
}

.editorial-node-large{
  fill:rgba(122,116,255,.08);
}

.editorial-point,
.editorial-constellation-point{
  transform-box:fill-box;
  transform-origin:center;
  animation:nodePulse 5s ease-in-out infinite;
}

.editorial-point:nth-of-type(2),
.editorial-constellation-point:nth-of-type(2){animation-delay:.9s}

.editorial-point:nth-of-type(3),
.editorial-constellation-point:nth-of-type(3){animation-delay:1.8s}

.editorial-point-ring{
  fill:rgba(121,200,255,.08);
  stroke:rgba(121,200,255,.22);
  stroke-width:1;
}

.editorial-point-core{
  fill:var(--text-primary);
  stroke:rgba(121,200,255,.64);
  stroke-width:2;
}

.visual-bars{
  display:grid;
  gap:.65rem;
}

.visual-bars span{
  height:.78rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,200,255,.92), rgba(122,116,255,.86));
  box-shadow:0 8px 18px rgba(73,123,255,.12);
}

.visual-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.visual-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.85rem;
  padding:0 .72rem;
  border:1px solid rgba(167,189,236,.12);
  border-radius:var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(255,255,255,.025);
  color:var(--text-secondary);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.visual-chip.is-accent{
  border-color:rgba(121,200,255,.2);
  color:var(--accent);
  background:rgba(121,200,255,.1);
}

.visual-chip.is-violet{
  border-color:rgba(122,116,255,.2);
  color:#c8c5ff;
  background:rgba(122,116,255,.1);
}

.visual-surface-panel{
  display:grid;
  gap:.75rem;
  padding:.9rem;
  border:1px solid rgba(167,189,236,.1);
  border-radius:1.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(8,16,31,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.visual-editorial .visual-surface-panel{
  gap:.9rem;
}

.visual-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
}

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

.visual-stat-tile{
  display:grid;
  align-content:start;
  gap:.22rem;
  min-height:4.5rem;
  padding:.68rem;
  border:1px solid rgba(167,189,236,.1);
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
}

.visual-stat-tile small{
  color:var(--text-muted);
  font-size:.62rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.visual-stat-tile strong{
  font-size:.92rem;
  line-height:1.1;
  letter-spacing:-.03em;
}

.visual-line-stack{
  display:grid;
  gap:.55rem;
}

.visual-line-stack span{
  display:block;
  height:.6rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,200,255,.9), rgba(122,116,255,.82));
  box-shadow:0 8px 18px rgba(73,123,255,.12);
}

.visual-track{
  height:.72rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.visual-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(121,200,255,.94), rgba(122,116,255,.9));
  box-shadow:0 8px 18px rgba(73,123,255,.16);
}

.visual-node-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  align-items:center;
}

.visual-node-flow::before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(121,200,255,.1), rgba(122,116,255,.28), rgba(121,200,255,.1));
}

.visual-node{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-height:3.3rem;
  padding:.5rem;
  border:1px solid rgba(167,189,236,.12);
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(255,255,255,.02);
  color:var(--text-primary);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:-.02em;
  text-align:center;
}

.visual-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem;
}

.visual-mini-card{
  display:grid;
  place-items:center;
  min-height:2.35rem;
  padding:.4rem;
  border:1px solid rgba(167,189,236,.1);
  border-radius:.9rem;
  background:rgba(255,255,255,.02);
  color:var(--text-secondary);
  font-size:.72rem;
  font-weight:700;
}

.visual-layer-stack{
  position:relative;
  min-height:8.25rem;
  flex:1 1 auto;
}

.visual-layer{
  position:absolute;
  border:1px solid rgba(167,189,236,.12);
  border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-xs);
}

.visual-layer.is-back{
  inset:1rem 1rem 1.7rem 2rem;
  opacity:.46;
}

.visual-layer.is-mid{
  inset:.55rem 1.8rem 2.5rem 1.15rem;
  opacity:.7;
}

.visual-layer.is-front{
  inset:1.7rem 2.3rem .2rem .65rem;
  padding:.8rem;
}

.visual-layer-content{
  display:grid;
  gap:.62rem;
}

.visual-dot-row{
  display:flex;
  gap:.38rem;
}

.visual-dot-row span{
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(121,200,255,.95), rgba(122,116,255,.86));
  opacity:.86;
}

.visual-layers{
  align-content:start;
}

.visual-layers .visual-chip-row{
  margin-bottom:auto;
}

.blog-card .blog-visual{
  min-height:13rem;
}

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.filter-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.65rem;
  padding:0 1rem;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
    rgba(255,255,255,.02);
  color:var(--text-secondary);
  font-weight:700;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast);
}

.filter-pill:hover{
  transform:translateY(-1px);
  color:var(--text-primary);
  border-color:var(--border-mid);
}

.filter-pill.active{
  border-color:rgba(121,200,255,.28);
  background:rgba(121,200,255,.08);
  color:var(--text-primary);
}

.blog-card{
  display:grid;
  gap:1rem;
  padding:1rem;
}

.blog-card .blog-visual{
  min-height:13rem;
}

.article-focus-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}

.article-focus-card{
  display:grid;
  gap:.95rem;
  padding:1.4rem;
  scroll-margin-top:7rem;
}

.article-focus-card p{
  max-width:38rem;
  margin-inline:auto;
}

/* =========================================================
   14. FAQ
   ========================================================= */
.faq-list{
  display:grid;
  gap:1rem;
}

.faq-item{
  padding:0;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:4.8rem;
  padding:0 1.32rem;
  cursor:pointer;
  color:var(--text-primary);
  font-weight:800;
}

.faq-item summary::after{
  content:"+";
  flex:0 0 auto;
  font-size:1.5rem;
  color:var(--accent);
  transition:transform var(--transition-fast),color var(--transition-fast);
}

.faq-item[open] summary::after{
  content:"−";
  transform:rotate(180deg);
}

.faq-item p{
  padding:0 1.32rem 1.32rem;
}

/* =========================================================
   15. Legal
   ========================================================= */
.legal-shell{
  display:grid;
  gap:1.5rem;
  padding:1.55rem;
}

.legal-header{
  display:grid;
  gap:1rem;
}

.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
}

.legal-anchor-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  padding:1rem;
  justify-content:center;
}

.legal-anchor-nav a{
  display:inline-flex;
  align-items:center;
  min-height:2.45rem;
  padding:0 .88rem;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  color:var(--text-secondary);
  font-weight:700;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.legal-anchor-nav a:hover{
  color:var(--text-primary);
  border-color:var(--border-mid);
  transform:translateY(-1px);
}

.legal-content{
  display:grid;
  gap:1rem;
}

.legal-section{
  padding:1.45rem;
}

.legal-section h2,
.legal-section h3{
  margin-bottom:.9rem;
}

.legal-note{
  padding:1rem 1.1rem;
  border-left:2px solid rgba(121,200,255,.36);
  border-radius:1rem;
  background:rgba(121,200,255,.06);
  color:var(--text-secondary);
}

/* =========================================================
   16. CTA
   ========================================================= */
.cta-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.5rem;
  align-items:center;
  justify-items:center;
  padding:1.9rem;
  text-align:center;
  background:
    radial-gradient(circle at right top, rgba(122,116,255,.16), transparent 28%),
    radial-gradient(circle at left bottom, rgba(121,200,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(15,26,48,.94), rgba(9,15,27,.98));
}

.cta-panel::after{
  content:"";
  position:absolute;
  inset:auto -6% -18% auto;
  width:min(28rem,54vw);
  aspect-ratio:1;
  pointer-events:none;
  opacity:.5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' fill='none'%3E%3Ccircle cx='210' cy='210' r='168' stroke='%2379C8FF' stroke-opacity='.18' stroke-width='1.4'/%3E%3Ccircle cx='210' cy='210' r='122' stroke='%237A74FF' stroke-opacity='.22' stroke-width='1.4' stroke-dasharray='8 12'/%3E%3Ccircle cx='210' cy='210' r='74' stroke='%23C7D2FF' stroke-opacity='.18' stroke-width='1.4'/%3E%3Cpath d='M52 252C116 226 150 188 202 188C268 188 314 236 368 158' stroke='%2379C8FF' stroke-opacity='.34' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='52' cy='252' r='4' fill='%2379C8FF'/%3E%3Ccircle cx='202' cy='188' r='4' fill='%23CBD8FF'/%3E%3Ccircle cx='368' cy='158' r='4' fill='%237A74FF'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.cta-panel.glow-accent::after{
  display:none;
}

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

@keyframes orbitDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-10px,0)}
}

@keyframes dashboardShellEnter{
  0%{
    opacity:0;
    transform:translate3d(0,28px,0) scale(.985) rotateX(8deg);
    box-shadow:0 18px 36px rgba(0,0,0,.16);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1) rotateX(0);
  }
}

@keyframes dashboardShellFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}

@keyframes dashboardGlassSweep{
  0%,100%{
    opacity:0;
    transform:translate3d(-34%,0,0) rotate(11deg);
  }
  24%{opacity:.16}
  48%{opacity:.36}
  72%{
    opacity:.08;
    transform:translate3d(170%,0,0) rotate(11deg);
  }
}

@keyframes dashboardCardEnter{
  0%{
    opacity:0;
    transform:translate3d(0,20px,0) scale(.975);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes dashboardSurfaceBreath{
  0%,100%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 rgba(73,123,255,0);
    transform:translate3d(0,0,0);
  }
  50%{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(73,123,255,.08);
    transform:translate3d(0,-2px,0);
  }
}

@keyframes dashboardLineReveal{
  0%{
    opacity:0;
    transform:scaleX(.14);
    filter:blur(1px);
  }
  100%{
    opacity:.94;
    transform:scaleX(1);
    filter:blur(0);
  }
}

@keyframes dashboardLineFlow{
  0%{background-position:0% 50%}
  100%{background-position:180% 50%}
}

@keyframes dashboardLinePulse{
  0%,100%{
    box-shadow:0 8px 18px rgba(73,123,255,.12);
    opacity:.9;
  }
  50%{
    box-shadow:0 10px 22px rgba(73,123,255,.22);
    opacity:1;
  }
}

@keyframes dashboardGlassTrack{
  0%,100%{
    transform:translateX(-120%);
    opacity:0;
  }
  22%{opacity:.18}
  58%{opacity:.32}
  100%{
    transform:translateX(130%);
    opacity:0;
  }
}

@keyframes dashboardNoteFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-5px,0)}
}

@keyframes dashboardDotPulse{
  0%,100%{
    opacity:.42;
    transform:scale(1);
  }
  50%{
    opacity:.95;
    transform:scale(1.16);
  }
}

@keyframes orbitTrace{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-140}
}

@keyframes nodePulse{
  0%,100%{transform:scale(1);opacity:.88}
  50%{transform:scale(1.12);opacity:1}
}

.cta-panel h2{
  max-width:13ch;
}

.cta-panel p{
  max-width:40rem;
}

.cta-aside{
  display:flex;
  gap:.9rem;
  justify-content:center;
}

.cta-aside-map{
  position:relative;
  min-width:min(26rem,42vw);
  min-height:16rem;
  align-items:flex-start;
  justify-content:flex-end;
  padding-top:.8rem;
  padding-right:.25rem;
}

.cta-france-svg{
  position:absolute;
  right:-1rem;
  bottom:-1rem;
  width:min(25rem,42vw);
  height:auto;
  opacity:.88;
  pointer-events:none;
  filter:drop-shadow(0 24px 60px rgba(27,60,153,.14));
}

.cta-france-ring{
  fill:none;
  stroke:rgba(121,200,255,.14);
  stroke-width:1.6;
}

.cta-france-ring-inner{
  stroke:rgba(122,116,255,.16);
  stroke-dasharray:8 12;
}

.cta-france-outline{
  fill:none;
  stroke:rgba(121,200,255,.36);
  stroke-width:2.8;
  stroke-linejoin:round;
  stroke-linecap:round;
}

.cta-france-point{
  fill:#a7baf5;
  stroke:rgba(121,200,255,.36);
  stroke-width:3;
}

.cta-france-link{
  fill:none;
  stroke:rgba(121,200,255,.28);
  stroke-width:2.2;
  stroke-linecap:round;
}

.cta-aside-map .mini-float{
  position:relative;
  z-index:1;
}

.mini-float{
  min-width:8.4rem;
  padding:1rem;
  border:1px solid var(--border-soft);
  border-radius:1.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.mini-float strong{
  display:block;
  margin-bottom:.3rem;
}

/* =========================================================
   17. Footer
   ========================================================= */
.site-footer{
  padding:0 0 2rem;
}

.footer-panel{
  padding:1.55rem;
}

.footer-grid h4{
  margin-bottom:.78rem;
  font-size:.94rem;
  letter-spacing:.04em;
  text-align:center;
}

.footer-grid ul{
  display:grid;
  gap:.55rem;
  list-style:none;
}

.footer-grid a{
  color:var(--text-secondary);
  transition:color var(--transition-fast),opacity var(--transition-fast);
}

.footer-grid a:hover{
  color:var(--text-primary);
}

.footer-brand-copy{
  max-width:24rem;
  margin-inline:auto;
  text-align:center;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.3rem;
  padding-top:1rem;
  border-top:1px solid var(--border-soft);
  color:var(--text-muted);
  font-size:.92rem;
}

/* =========================================================
   18. Utility visual helpers
   ========================================================= */
.text-gradient{
  background:linear-gradient(135deg, #f5f8ff 0%, #b9d8ff 44%, #9db0ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.glow-accent{
  box-shadow:0 0 0 1px rgba(121,200,255,.08), 0 22px 50px rgba(121,200,255,.1);
}

.soft-border{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
}

.surface-muted{
  background:rgba(255,255,255,.02);
}

/* =========================================================
   19. Responsive
   ========================================================= */
@media (max-width:1180px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .process-grid,
  .impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standard-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare-showcase{grid-template-columns:1fr}
}

@media (max-width:980px){
  .hero,
  .process-summary,
  .featured-post,
  .cta-panel,
  .stack-2{
    grid-template-columns:1fr;
  }

  .compare-hero-layout{
    grid-template-columns:1fr;
  }

  .compare-stage{
    min-height:38rem;
  }

  .compare-old-hero{
    width:min(82%,38rem);
  }

  .compare-old-menu{
    gap:.7rem;
  }

  .compare-cheers-hero,
  .compare-cheers-bottom{
    grid-template-columns:1fr;
  }

  .compare-cheers-header{
    grid-template-columns:1fr;
    justify-items:start;
  }

  .compare-cheers-nav{
    justify-content:flex-start;
  }

  .hero-copy h1{
    max-width:14ch;
  }

  .hero-visual{
    min-height:auto;
  }

  .hero-orbit-svg{
    width:100%;
    inset:-2rem auto auto 0;
    opacity:.72;
  }

  .timeline-card{
    padding-right:1.6rem;
  }

  .timeline-flow-svg{
    display:none;
  }

  .cta-aside-map{
    min-width:100%;
    min-height:14rem;
  }

  .cta-france-svg{
    width:min(23rem,70vw);
    right:0;
  }

  .showcase-picker-dialog{
    width:min(100vw - 20px, 100%);
    margin:5vh auto 0;
    padding:1.1rem;
  }

  .showcase-picker-grid{
    grid-template-columns:1fr;
  }

  .main-nav,
  .header-cta{
    display:none;
  }

  .nav-toggle-label{
    display:flex;
  }

  .nav-shell.is-menu-open{
    z-index:1300;
  }

  .nav-toggle:checked ~ .main-nav,
  .nav-shell.is-menu-open .main-nav{
    display:block;
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 5.35rem);
    left:12px;
    right:12px;
    max-height:calc((var(--app-vh,1vh) * 100) - env(safe-area-inset-top, 0px) - 6.15rem);
    margin-left:0;
    padding:1rem;
    overflow-y:auto;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
      rgba(9,16,29,.96);
    box-shadow:var(--shadow-xl);
    backdrop-filter:blur(16px);
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .nav-toggle:checked ~ .main-nav ul,
  .nav-shell.is-menu-open .main-nav ul{
    flex-direction:column;
    align-items:stretch;
  }

  .nav-toggle:checked ~ .main-nav a,
  .nav-shell.is-menu-open .main-nav a{
    justify-content:flex-start;
  }

  .nav-toggle:checked + .nav-toggle-label span,
  .nav-shell.is-menu-open .nav-toggle-label span{
    background:transparent;
  }

  .nav-toggle:checked + .nav-toggle-label span::before,
  .nav-shell.is-menu-open .nav-toggle-label span::before{
    transform:translateY(6px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span::after,
  .nav-shell.is-menu-open .nav-toggle-label span::after{
    transform:translateY(-6px) rotate(-45deg);
  }
}

@media (max-width:820px){
  .hero-stats,
  .metric-row,
  .pricing-grid,
  .blog-grid,
  .tool-grid,
  .feature-grid,
  .process-grid,
  .impact-grid,
  .result-grid,
  .standard-strip,
  .dashboard-grid,
  .kpi-grid,
  .stack-visual,
  .footer-grid,
  .compare-proof-row{
    grid-template-columns:1fr;
  }

  .dashboard-top,
  .footer-bottom{
    align-items:flex-start;
  }

  .compare-mini-metrics{
    grid-template-columns:1fr;
  }

  .compare-old-topline{
    gap:.7rem;
    padding:0 .75rem;
    text-align:center;
  }

  .compare-old-header{
    top:1.8rem;
    left:.9rem;
    right:.9rem;
  }

  .compare-old-hero{
    top:5.8rem;
    width:min(88%,34rem);
  }

  .compare-old-pricebox{
    min-width:0;
  }

  .compare-cheers-window{
    padding:.85rem;
  }

  .compare-cheers-panel-team{
    grid-template-columns:1fr;
  }

  .compare-cheers-panel-media{
    min-height:10rem;
  }

  .floating-note{
    position:relative;
    transform:none;
    width:100%;
    margin-top:1rem;
  }

  .hero-note-row{
    min-height:auto;
  }

  .hero-visual{
    padding:.25rem 0 0;
  }

  .editorial-note{
    min-height:20rem;
    padding-top:6.2rem;
  }

  .editorial-note-svg{
    opacity:.76;
  }

  .cta-aside-map{
    justify-content:center;
    min-height:15rem;
    padding-right:0;
  }

  .cta-france-svg{
    right:auto;
    left:50%;
    transform:translateX(-50%);
    width:min(22rem,84vw);
  }

  .compare-stage{
    min-height:42rem;
  }
}

@media (max-width:640px){
  .container,
  .wrap,
  .container-wide{
    width:min(calc(100% - 1rem),var(--container));
  }

  .section-hero{
    padding-top:4rem;
  }

  .nav-shell{
    min-height:4.45rem;
    padding:.8rem;
  }

  .logo-mark-shell,
  .logo-mark{
    width:2.7rem;
    height:2.7rem;
  }

  .logo-tag{
    display:none;
  }

  .hero-actions,
  .cluster,
  .cta-aside{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn,
  .cta-panel .btn{
    width:100%;
  }

  .cta-panel,
  .glass-card,
  .feature-card,
  .tool-card,
  .pricing-card,
  .blog-card,
  .legal-section,
  .footer-panel,
  .legal-shell,
  .timeline-card{
    padding:1.15rem;
  }

  .section-heading::after{
    width:min(12rem,64vw);
  }

  .hero-orbit-svg{
    display:none;
  }

  .editorial-note{
    min-height:auto;
    padding-top:5.25rem;
  }

  .cta-aside-map{
    min-height:13rem;
    padding-top:.35rem;
  }

  .cta-france-svg{
    width:min(19rem,92vw);
    bottom:-.4rem;
  }

  .filter-row{
    gap:.5rem;
  }

  .compare-toolbar{
    align-items:flex-start;
  }

  .compare-old-topline{
    position:static;
    display:grid;
    justify-items:center;
    padding:.65rem .5rem 0;
    font-size:.68rem;
  }

  .compare-old-header{
    top:2.8rem;
    flex-direction:column;
    align-items:flex-start;
  }

  .compare-old-menu{
    gap:.55rem;
  }

  .compare-old-menu span{
    font-size:.76rem;
  }

  .compare-old-hero{
    top:7.35rem;
    width:min(92%,30rem);
    gap:.85rem;
  }

  .compare-old-hero h3{
    font-size:clamp(1.55rem,6vw,2.4rem);
  }

  .compare-old-pricebox strong{
    font-size:1.12rem;
  }

  .compare-old-pricebox p,
  .compare-old-cta-zone p{
    font-size:.86rem;
  }

  .compare-old-ghost{
    display:none;
  }

  .compare-cheers-ribbon{
    display:grid;
    justify-items:center;
    gap:.25rem;
    padding:.45rem .65rem;
    text-align:center;
  }

  .compare-cheers-header{
    gap:.75rem;
  }

  .compare-cheers-logo{
    width:6.2rem;
  }

  .compare-cheers-copy{
    padding:.95rem;
  }

  .compare-cheers-copy p,
  .compare-cheers-panel p,
  .compare-cheers-panel span{
    font-size:.78rem;
  }

  .compare-cheers-actions,
  .compare-cheers-stamps{
    justify-content:flex-start;
  }

  .compare-screen{
    padding:.75rem;
  }

  .compare-canvas{
    padding:3rem .75rem .75rem;
  }

  .compare-stage{
    min-height:44rem;
  }

  .compare-controls{
    grid-template-columns:1fr;
  }

  .compare-controls span{
    justify-self:center;
  }

  .filter-pill{
    width:calc(50% - .25rem);
  }

  .eyebrow{
    max-width:100%;
    width:max-content;
  }

  .hero-badges{
    gap:.72rem;
    margin-top:.65rem;
  }

  .hero-badges .pill{
    min-height:2.55rem;
    padding:.62rem .96rem;
    font-size:.88rem;
  }

  h1{
    font-size:clamp(2.4rem,11vw,3.5rem);
  }

  h2{
    font-size:clamp(1.8rem,8vw,2.6rem);
  }

  .hero-copy p{
    font-size:1rem;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}


.compare-canvas-frame{
  min-height: 420px;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #0b1220;
}

.compare-frame{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* ===== Avant / Après : poignée verticale draggable ===== */

#avant-apres .compare-showcase[data-compare-root] {
  --compare-position: 86%;
}

#avant-apres .compare-stage {
  position: relative;
  min-height: clamp(420px, 58vw, 760px);
  overflow: hidden;
  border-radius: 30px;
  isolation: isolate;
  background:
    radial-gradient(circle at top, rgba(125, 165, 255, 0.14), transparent 34%),
    rgba(5, 11, 24, 0.92);
}

#avant-apres .compare-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#avant-apres .compare-screen-after {
  z-index: 1;
}

#avant-apres .compare-screen-before {
  z-index: 2;
  clip-path: inset(0 0 0 var(--compare-position));
  transition: clip-path 180ms ease;
}

#avant-apres .compare-canvas,
#avant-apres .compare-canvas-frame,
#avant-apres .compare-frame {
  width: 100%;
  height: 100%;
}

#avant-apres .compare-frame {
  display: block;
  border: 0;
  background: #040916;
}

#avant-apres .compare-stage-label {
  position: absolute;
  top: 18px;
  z-index: 6;
  pointer-events: none;
}

#avant-apres .compare-stage-label-before {
  left: 18px;
}

#avant-apres .compare-stage-label-after {
  right: 18px;
}

#avant-apres .compare-divider {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: var(--compare-position);
  z-index: 7;
  width: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  transition: left 180ms ease;
}

#avant-apres .compare-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(151, 193, 255, 0.96) 0%,
    rgba(113, 135, 255, 0.82) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 22px rgba(120, 145, 255, 0.42);
}

#avant-apres .compare-divider-handle {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(245, 248, 255, 0.96);
  background: linear-gradient(
    180deg,
    rgba(119, 162, 255, 0.92) 0%,
    rgba(111, 117, 255, 0.92) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 18px 40px rgba(15, 20, 42, 0.42);
  backdrop-filter: blur(14px);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

#avant-apres .compare-divider-handle i {
  font-size: 16px;
  line-height: 1;
}

#avant-apres .compare-showcase.is-dragging .compare-screen-before,
#avant-apres .compare-showcase.is-dragging .compare-divider {
  transition: none;
}

#avant-apres .compare-showcase.is-dragging .compare-divider-handle,
#avant-apres .compare-divider:hover .compare-divider-handle,
#avant-apres .compare-divider:focus-visible .compare-divider-handle {
  transform: scale(1.04);
  box-shadow: 0 20px 44px rgba(22, 28, 56, 0.52);
}

#avant-apres .compare-divider:focus-visible {
  outline: none;
}

@media (max-width: 900px) {
  #avant-apres .compare-stage {
    min-height: clamp(340px, 82vw, 620px);
  }

  #avant-apres .compare-divider {
    top: 14px;
    bottom: 14px;
    width: 52px;
  }

  #avant-apres .compare-divider-handle {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #avant-apres .compare-screen-before,
  #avant-apres .compare-divider,
  #avant-apres .compare-divider-handle {
    transition: none;
  }
}

/* ===== Avant / Après : responsive + fluide ===== */

#avant-apres .compare-showcase[data-compare-root] {
  --compare-position: 86%;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.22fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
}

#avant-apres .compare-legend {
  height: 100%;
}

#avant-apres .compare-note {
  display: none;
}

#avant-apres .compare-note.is-active {
  display: block;
}

#avant-apres .compare-stage {
  position: relative;
  min-width: 0;
  min-height: clamp(380px, 58vw, 760px);
  aspect-ratio: 1.06 / 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(22px, 3vw, 30px);
  background:
    radial-gradient(circle at top, rgba(125, 165, 255, 0.14), transparent 34%),
    rgba(5, 11, 24, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 80px rgba(2, 8, 24, 0.42);
}

#avant-apres .compare-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#avant-apres .compare-screen-after {
  z-index: 1;
}

#avant-apres .compare-screen-before {
  z-index: 2;
  clip-path: inset(0 0 0 var(--compare-position));
  will-change: clip-path;
  transition: clip-path 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#avant-apres .compare-canvas,
#avant-apres .compare-canvas-frame,
#avant-apres .compare-frame {
  width: 100%;
  height: 100%;
}

#avant-apres .compare-canvas-frame {
  position: relative;
}

#avant-apres .compare-frame {
  display: block;
  border: 0;
  background: #040916;
}

#avant-apres .compare-stage-label {
  position: absolute;
  top: clamp(12px, 1.8vw, 18px);
  z-index: 6;
  pointer-events: none;
  max-width: calc(50% - 42px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#avant-apres .compare-stage-label-before {
  left: clamp(12px, 1.8vw, 18px);
}

#avant-apres .compare-stage-label-after {
  right: clamp(12px, 1.8vw, 18px);
}

#avant-apres .compare-divider {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: var(--compare-position);
  z-index: 7;
  width: clamp(46px, 4.8vw, 56px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  will-change: left, transform;
  transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#avant-apres .compare-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(151, 193, 255, 0.96) 0%,
    rgba(113, 135, 255, 0.82) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 22px rgba(120, 145, 255, 0.42);
}

#avant-apres .compare-divider-handle {
  position: relative;
  z-index: 1;
  width: clamp(38px, 4.2vw, 46px);
  height: clamp(38px, 4.2vw, 46px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(245, 248, 255, 0.96);
  background: linear-gradient(
    180deg,
    rgba(119, 162, 255, 0.92) 0%,
    rgba(111, 117, 255, 0.92) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 40px rgba(15, 20, 42, 0.42);
  backdrop-filter: blur(14px);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

#avant-apres .compare-divider-handle i {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1;
}

#avant-apres .compare-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#avant-apres .compare-controls span {
  flex: 0 0 auto;
}

#avant-apres .compare-range {
  width: 100%;
  min-width: 0;
}

#avant-apres .compare-showcase.is-dragging .compare-screen-before,
#avant-apres .compare-showcase.is-dragging .compare-divider {
  transition: none;
}

#avant-apres .compare-showcase.is-dragging .compare-frame {
  pointer-events: none;
}

#avant-apres .compare-showcase.is-dragging .compare-divider-handle,
#avant-apres .compare-divider:hover .compare-divider-handle,
#avant-apres .compare-divider:focus-visible .compare-divider-handle {
  transform: scale(1.04);
  box-shadow: 0 20px 44px rgba(22, 28, 56, 0.52);
}

#avant-apres .compare-divider:focus-visible {
  outline: none;
}

@media (max-width: 1120px) {
  #avant-apres .compare-showcase[data-compare-root] {
    grid-template-columns: 1fr;
  }

  #avant-apres .compare-legend,
  #avant-apres .compare-stage,
  #avant-apres .compare-controls {
    grid-column: auto;
  }

  #avant-apres .compare-stage {
    min-height: clamp(360px, 72vw, 680px);
    aspect-ratio: 1.02 / 1;
  }
}

@media (max-width: 768px) {
  #avant-apres .compare-stage {
    min-height: clamp(320px, 92vw, 560px);
    aspect-ratio: 0.95 / 1;
    border-radius: 22px;
  }

  #avant-apres .compare-divider {
    top: 12px;
    bottom: 12px;
  }

  #avant-apres .compare-controls {
    gap: 10px;
  }

  #avant-apres .compare-stage-label {
    max-width: calc(50% - 30px);
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .showcase-picker-modal{
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      12px
      max(12px, env(safe-area-inset-bottom, 0px));
  }

  .showcase-picker-dialog{
    max-height:calc((var(--app-vh,1vh) * 100) - 24px);
    padding:1rem;
    border-radius:1.45rem;
  }

  .showcase-picker-header{
    gap:.8rem;
  }

  .showcase-picker-header-copy h2{
    font-size:1.5rem;
  }

  .showcase-picker-card{
    min-height:auto;
    padding:1rem;
    border-radius:1.2rem;
  }

  .showcase-picker-card strong{
    font-size:1.35rem;
  }

  #avant-apres .compare-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  #avant-apres .compare-chip-row {
    flex-wrap: wrap;
  }

  #avant-apres .compare-mini-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #avant-apres .compare-screen-before,
  #avant-apres .compare-divider,
  #avant-apres .compare-divider-handle {
    transition: none;
  }
}

/* ===== Popup de prévisualisation avant / après ===== */

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

#avant-apres .compare-preview-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

#avant-apres .compare-preview-btn {
  min-height: 52px;
}

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

.compare-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.compare-preview-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(121, 165, 255, 0.12), transparent 28%),
    rgba(4, 8, 18, 0.82);
  backdrop-filter: blur(12px);
}

.compare-preview-dialog {
  position: relative;
  z-index: 1;
  width: min(1380px, calc(100vw - 28px));
  height: min(92vh, 980px);
  margin: 4vh auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(171, 197, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(9, 14, 28, 0.96), rgba(5, 10, 20, 0.98));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.compare-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(171, 197, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(8, 13, 24, 0.72);
}

.compare-preview-header-left {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compare-preview-kicker {
  color: rgba(146, 175, 255, 0.88);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare-preview-header-left strong {
  color: #eef3ff;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.compare-preview-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(171, 197, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.compare-preview-switch-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(225, 232, 250, 0.84);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.compare-preview-switch-btn:hover {
  transform: translateY(-1px);
}

.compare-preview-switch-btn.is-active {
  background: linear-gradient(135deg, rgba(119, 162, 255, 0.96), rgba(111, 117, 255, 0.92));
  color: #f7f9ff;
  box-shadow:
    0 12px 26px rgba(76, 101, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.compare-preview-close {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(171, 197, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.02);
  color: #eef3ff;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.compare-preview-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.compare-preview-close i {
  font-size: 18px;
  line-height: 1;
}

.compare-preview-frame-wrap {
  min-height: 0;
  background: #040916;
}

.compare-preview-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #040916;
}

@media (max-width: 980px) {
  .compare-preview-dialog {
    width: min(100vw - 16px, 100%);
    height: min(94vh, 1000px);
    margin: 3vh auto;
    border-radius: 22px;
  }

  .compare-preview-header {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .compare-preview-switch {
    grid-column: 1 / -1;
    order: 3;
    width: max-content;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  #avant-apres .compare-preview-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .compare-preview-header {
    padding: 16px;
    gap: 12px;
  }

  .compare-preview-header-left strong {
    font-size: 18px;
  }

  .compare-preview-close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}