/* Shared 3D-animated comparison-page template styles */
.scene{ perspective: 1400px; }
.tilt-3d{ transform-style:preserve-3d; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; will-change:transform; }

@keyframes floaty{ 0%,100%{ transform:translateY(0) rotateZ(0deg); } 50%{ transform:translateY(-14px) rotateZ(1deg); } }
@keyframes floaty-rev{ 0%,100%{ transform:translateY(0) rotateZ(0deg); } 50%{ transform:translateY(12px) rotateZ(-1.2deg); } }
@keyframes spin-slow{ to{ transform:rotateZ(360deg); } }
@keyframes pulseGlow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.hero-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:100px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--ink); }

.cmp-hero{ padding-block:50px 10px; }
.cmp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
@media (max-width:900px){ .cmp-hero-grid{ grid-template-columns:1fr; } }
.cmp-hero h1{ font-size:clamp(28px,3.8vw,44px); line-height:1.14; margin-top:16px; }
.cmp-hero h1 em{ font-style:normal; color:var(--emerald); }
.cmp-hero p.lead{ color:var(--ink-soft); font-size:16px; line-height:1.7; margin-top:16px; max-width:520px; }

.cmp-visual{ position:relative; height:380px; }
.cmp-stack{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(8deg) rotateY(-14deg); }
.cmp-card{ position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px -24px rgba(16,24,20,.35); padding:18px 20px; width:250px; }
.cmp-card.c1{ top:20px; left:10px; animation:floaty 7s ease-in-out infinite; }
.cmp-card.c2{ top:140px; left:110px; z-index:3; animation:floaty-rev 8s ease-in-out infinite; }
.cmp-card.c3{ top:260px; left:20px; animation:floaty 9s ease-in-out infinite; animation-delay:1s; }
.cmp-card h4{ margin:0 0 6px; font-family:'Fraunces',serif; font-size:14.5px; color:var(--ink); }
.cmp-card p{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.cmp-card .tag{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; margin-bottom:8px; }
.cmp-card .tag-us{ background:rgba(11,110,79,.12); color:var(--emerald-deep,#2E8F67); }
.cmp-card .tag-them{ background:#F1E2E2; color:#a33; }
.cmp-orb{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; animation:spin-slow 24s linear infinite, pulseGlow 5s ease-in-out infinite; }
.cmp-orb.o1{ width:90px; height:90px; background:radial-gradient(circle at 30% 30%, var(--amber), transparent 70%); top:0; right:30px; }
.cmp-orb.o2{ width:60px; height:60px; background:radial-gradient(circle at 30% 30%, var(--emerald), transparent 70%); bottom:20px; right:70px; }

.cmp td .tick, .cmp td .tick-mid, .cmp td .cross{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:800; margin-right:8px; vertical-align:middle; }
.cmp td .tick{ background:var(--emerald); color:#fff; }
.cmp td.col-us{ font-weight:700; color:var(--ink); }
.cmp td.col-us.yes{ background:var(--emerald-soft,#E6F6EE); }
.cmp td .tick-mid{ background:#F3E8C9; color:#8a6d1f; }
.cmp td .cross{ background:#F1E2E2; color:#a33; }
.cmp tbody td:not(.col-us){ color:var(--ink-soft); font-size:14px; }

.ab-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
@media (max-width:900px){ .ab-feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .ab-feat-grid{ grid-template-columns:1fr; } }
.ab-feat{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); transform-style:preserve-3d; }
.ab-feat:hover{ transform:translateY(-6px) rotateX(4deg) rotateY(-3deg); border-color:var(--emerald); box-shadow:0 26px 44px -22px rgba(16,24,20,.32); }
.ab-feat .ico-badge{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--amber-soft); margin-bottom:14px; transform:translateZ(18px); }
.ab-feat h4{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; margin:0 0 6px; transform:translateZ(10px); }
.ab-feat p{ color:var(--ink-soft); font-size:13.5px; line-height:1.6; margin:0; }

.cta-band{ background:linear-gradient(135deg, var(--emerald-deep,#2E8F67), var(--emerald)); border-radius:24px; padding:48px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); top:-100px; left:-70px; }
.cta-band::after{ content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); bottom:-80px; right:-40px; }
.cta-band h2{ color:#fff; font-size:clamp(22px,3vw,32px); position:relative; }
.cta-band p{ color:rgba(255,255,255,.88); margin-top:10px; font-size:15px; position:relative; }
.cta-band .hero-ctas{ justify-content:center; margin-top:22px; position:relative; }
.cta-band .cta-btn{ background:#fff; color:var(--emerald-deep,#2E8F67); box-shadow:none; }
.cta-band .cta-ghost{ border-color:rgba(255,255,255,.5); color:#fff; background:transparent; }

@media (prefers-reduced-motion: reduce){ .cmp-card, .cmp-orb{ animation:none !important; } }