/* =========================================================================
 Corenzio — Marketing site
 Brand-aligned light theme. Scroll-reveal: CSS + IntersectionObserver
 (no third-party motion runtime). Fonts load from index.html to avoid
 render-blocking @import. Respects prefers-reduced-motion.
 ========================================================================= */

/* ---------- Design tokens (mirrors docs/brand.md) ------------------------ */
:root {
 --color-primary: #2d6eff;
 --color-primary-soft: #6ba4ff;
 --color-secondary: #e8a100;
 --color-bg: #f7f9fc;
 --color-surface: #ffffff;
 --color-surface-mid: #eef3ff;
 --color-surface-high: #e7edfb;
 --color-text: #0f172a;
 --color-body: #334155;
 --color-muted: #475569;
 --color-success: #2dd4a0;
 --color-error: #ff5f5f;
 --color-line: rgba(15, 23, 42, 0.1);
 --color-line-strong: rgba(15, 23, 42, 0.16);

 --space-xs: 4px;
 --space-sm: 8px;
 --space-md: 16px;
 --space-lg: 32px;
 --space-xl: 64px;
 --space-2xl: 120px;

 --radius-sm: 6px;
 --radius-md: 12px;
 --radius-lg: 20px;
 --radius-xl: 28px;
 --radius-pill: 999px;

 --duration-fast: 150ms;
 --duration-base: 220ms;
 --duration-slow: 450ms;
 --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
 --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

 --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
 0 12px 28px rgba(15, 23, 42, 0.08);
 --shadow-float: 0 18px 38px rgba(45, 110, 255, 0.18);

 --max-width: 1200px;
}

/* ---------- Reset ------------------------------------------------------- */
*,
*::before,
*::after {
 box-sizing: border-box;
}
html,
body {
 margin: 0;
 padding: 0;
 background: var(--color-bg);
 color: var(--color-text);
 font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
 font-weight: 400;
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 scroll-behavior: smooth;
 overflow-x: clip;
}
img,
video {
 display: block;
 max-width: 100%;
 height: auto;
}

/* Hide local-dev browser header strip in captured screenshots */
img[src*="/screenshots/"] {
 clip-path: inset(26px 0 24px 0 round 12px);
}
a {
 color: inherit;
 text-decoration: none;
}
button {
 font: inherit;
 cursor: pointer;
 border: none;
 background: none;
 color: inherit;
}
ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

/* Scroll reveal: when JS sets .reveal-js on, hide until in view */
.reveal-js [data-reveal]:not(.is-revealed) {
 --reveal-delay: 0s;
 opacity: 0;
 transform: translateY(22px);
 transition:
 opacity 0.65s cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay),
 transform 0.65s cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay);
}
.reveal-js [data-reveal].is-revealed {
 opacity: 1;
 transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
 .reveal-js [data-reveal] {
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
 }
}

.mono {
 font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
 font-weight: 400;
 letter-spacing: -0.01em;
}

/* ---------- Backgrounds (aurora + grid) --------------------------------- */
.bg-aurora,
.bg-grid {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
}
.bg-aurora {
 background:
 radial-gradient(60% 50% at 20% 10%, rgba(45, 110, 255, 0.16) 0%, transparent 60%),
 radial-gradient(50% 40% at 85% 15%, rgba(107, 164, 255, 0.13) 0%, transparent 60%),
 radial-gradient(40% 35% at 50% 90%, rgba(232, 161, 0, 0.08) 0%, transparent 60%);
 filter: blur(40px);
 opacity: 0.9;
}
.bg-grid {
 background-image:
 linear-gradient(var(--color-line) 1px, transparent 1px),
 linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
 background-size: 48px 48px;
 mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
 opacity: 0.35;
}

/* ---------- Container --------------------------------------------------- */
.container {
 position: relative;
 z-index: 1;
 width: min(var(--max-width), calc(100% - 32px));
 margin: 0 auto;
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* ---------- Typography -------------------------------------------------- */
h1,
h2,
h3,
h4 {
 font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
 font-weight: 700;
 letter-spacing: -0.025em;
 color: var(--color-text);
 margin: 0;
}
h1 {
 font-size: clamp(2.2rem, 5.1vw, 3.5rem);
 line-height: 1.08;
 font-weight: 800;
}
h2 {
 font-size: clamp(1.65rem, 3.25vw, 2.3rem);
 line-height: 1.14;
}
h3 {
 font-size: clamp(1.05rem, 1.4vw, 1.22rem);
 line-height: 1.32;
 font-weight: 700;
}
h4 {
 font-size: 0.92rem;
 font-weight: 600;
}
p {
 color: var(--color-body);
 margin: 0;
 line-height: 1.68;
}

.eyebrow {
 font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--color-secondary);
}

.gradient-text {
 background: linear-gradient(120deg, var(--color-primary), var(--color-primary-soft));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

/* ---------- Buttons ----------------------------------------------------- */
.button {
 --btn-bg: var(--color-surface-mid);
 --btn-fg: var(--color-text);
 --btn-br: var(--color-line-strong);
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 12px 18px;
 border-radius: var(--radius-pill);
 background: var(--btn-bg);
 color: var(--btn-fg);
 border: 1px solid var(--btn-br);
 font-weight: 600;
 transition:
 transform var(--duration-fast) var(--ease-standard),
 background var(--duration-base) var(--ease-standard),
 box-shadow var(--duration-base) var(--ease-standard);
}
.button:hover {
 transform: translateY(-1px);
}
.button:active {
 transform: translateY(0) scale(0.97);
}
.button-lg {
 padding: 14px 22px;
 font-size: 1rem;
}
.button-primary {
 --btn-bg: linear-gradient(120deg, var(--color-primary), var(--color-primary-soft));
 --btn-fg: #ffffff;
 --btn-br: transparent;
 box-shadow: 0 10px 30px rgba(45, 110, 255, 0.35);
}
.button-primary:hover {
 box-shadow: 0 14px 40px rgba(45, 110, 255, 0.45);
}
.button-ghost {
 --btn-bg: #ffffff;
 --btn-fg: #1e293b;
}
.button .arrow {
 transition: transform var(--duration-base) var(--ease-emphasized);
}
.button:hover .arrow {
 transform: translateX(4px);
}
.button .play {
 width: 16px;
 height: 16px;
 border-radius: var(--radius-pill);
 background: linear-gradient(120deg, var(--color-primary), var(--color-primary-soft));
 display: inline-block;
 position: relative;
}
.button .play::after {
 content: "";
 position: absolute;
 left: 5px;
 top: 4px;
 width: 0;
 height: 0;
 border-top: 4px solid transparent;
 border-bottom: 4px solid transparent;
 border-left: 6px solid #fff;
}

.hide-sm {
 display: inline-flex;
}
@media (max-width: 700px) {
 .hide-sm {
 display: none;
 }
}

/* ---------- Header ------------------------------------------------------ */
.site-header {
 position: sticky;
 top: 0;
 z-index: 60;
 border-bottom: 1px solid transparent;
 backdrop-filter: saturate(1.2) blur(12px);
 background: rgba(247, 249, 252, 0.86);
 transition: border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled {
 border-color: var(--color-line);
}
.nav-wrap {
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-md);
}
.brand {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}
.brand-mark {
 width: 3px;
 min-width: 3px;
 height: 24px;
 min-height: 24px;
 border-radius: 999px;
 background: linear-gradient(180deg, var(--color-primary-soft), var(--color-primary));
 box-shadow:
 inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 32%, transparent),
 0 1px 2px color-mix(in srgb, var(--color-text) 12%, transparent);
}
.brand-word {
 font-size: 1.05rem;
 font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
 font-weight: 800;
 letter-spacing: -0.02em;
 text-transform: none;
 display: inline-flex;
}
.nav-links {
 display: flex;
 gap: var(--space-md);
 color: var(--color-body);
}
.nav-links a {
 padding: 6px 8px;
 border-radius: var(--radius-sm);
 transition: color var(--duration-base) var(--ease-standard);
}
.nav-links a:hover {
 color: var(--color-text);
}
.nav-ctas {
 display: flex;
 gap: 8px;
}
@media (max-width: 820px) {
 .nav-links {
 display: none;
 }
}

/* ---------- Hero -------------------------------------------------------- */
.hero {
 display: grid;
 grid-template-columns: 1.05fr 1fr;
 gap: var(--space-xl);
 align-items: center;
 padding: var(--space-xl) 0 var(--space-2xl);
}
@media (max-width: 980px) {
 .hero {
 grid-template-columns: 1fr;
 padding-top: var(--space-lg);
 padding-bottom: var(--space-xl);
 }
}

.pill {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 12px;
 border-radius: var(--radius-pill);
 background: rgba(45, 110, 255, 0.12);
 color: var(--color-text);
 border: 1px solid rgba(45, 110, 255, 0.3);
 font-size: 0.85rem;
 margin-bottom: var(--space-md);
}
.pill-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--color-success);
 box-shadow: 0 0 0 4px rgba(45, 212, 160, 0.18);
}

.lede {
 max-width: 560px;
 font-size: 1.1rem;
 margin-top: var(--space-md);
}

.hero-ctas {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: var(--space-md);
}
.persona-ctas {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 12px;
}
.persona-chip {
 padding: 7px 12px;
 border-radius: var(--radius-pill);
 border: 1px solid var(--color-line-strong);
 background: #ffffff;
 color: var(--color-body);
 font-size: 0.86rem;
 font-weight: 600;
 cursor: pointer;
 transition: border-color var(--duration-base) var(--ease-standard),
 color var(--duration-base) var(--ease-standard),
 background var(--duration-base) var(--ease-standard),
 box-shadow var(--duration-base) var(--ease-standard);
}
.persona-chip:hover {
 color: var(--color-text);
 border-color: rgba(107, 164, 255, 0.55);
}
.persona-chip.is-active,
.persona-chip[aria-pressed="true"] {
 background: linear-gradient(120deg, rgba(45, 110, 255, 0.12), rgba(107, 164, 255, 0.16));
 border-color: rgba(45, 110, 255, 0.45);
 color: var(--color-text);
 box-shadow: 0 6px 16px rgba(45, 110, 255, 0.15);
}

.hero-bullets {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-md);
 margin-top: var(--space-md);
 color: var(--color-body);
}
.hero-bullets li {
 position: relative;
 padding-left: 18px;
 font-size: 0.95rem;
}
.hero-bullets li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 7px;
 width: 10px;
 height: 10px;
 border-radius: 3px;
 background: linear-gradient(120deg, var(--color-primary), var(--color-primary-soft));
}

.hero-media {
 position: relative;
 isolation: isolate;
}
.hero-frame {
 position: relative;
 border-radius: var(--radius-xl);
 overflow: hidden;
 background: var(--color-surface);
 border: 1px solid var(--color-line-strong);
 box-shadow: var(--shadow-card);
 transform: perspective(1200px) rotateX(4deg) rotateY(-6deg);
 transition: transform var(--duration-slow) var(--ease-emphasized);
}
.hero-frame::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 30px;
 background: linear-gradient(180deg, rgba(247, 249, 252, 0.98) 0%, rgba(247, 249, 252, 0.84) 70%, transparent 100%);
 pointer-events: none;
 z-index: 2;
}
.hero-frame:hover {
 transform: perspective(1200px) rotateX(2deg) rotateY(-3deg);
}
.hero-still,
.hero-video {
 width: 100%;
 display: block;
}
.hero-video {
 position: absolute;
 inset: 0;
 object-fit: contain;
 background: #f1f5f9;
 opacity: 0;
 transition: opacity var(--duration-slow) var(--ease-standard);
}
.hero-media.is-videoplaying .hero-video {
 opacity: 1;
}
.hero-frame-glow {
 position: absolute;
 inset: -30%;
 background: radial-gradient(
 40% 30% at 30% 20%,
 rgba(45, 110, 255, 0.35),
 transparent 60%
 );
 z-index: -1;
 filter: blur(40px);
}

.hero-stat-card,
.hero-tag-card {
 position: absolute;
 padding: 12px 14px;
 border-radius: var(--radius-md);
 background: rgba(255, 255, 255, 0.94);
 border: 1px solid var(--color-line-strong);
 backdrop-filter: blur(8px);
 box-shadow: var(--shadow-card);
 display: grid;
 gap: 2px;
 min-width: 180px;
}
.hero-stat-card {
 left: -16px;
 bottom: -24px;
}
.hero-tag-card {
 right: -16px;
 top: -24px;
 display: inline-flex;
 flex-direction: column;
 gap: 2px;
}
.stat-label,
.hero-tag-card span:last-child {
 color: var(--color-muted);
 font-size: 0.75rem;
}
.stat-value {
 font-family: "Manrope", "Inter", sans-serif;
 font-weight: 800;
 font-size: 1.4rem;
}
.stat-delta {
 color: var(--color-success);
 font-size: 0.8rem;
}

/* ---------- Trust marquee ---------------------------------------------- */
.trust {
 padding: var(--space-lg) 0;
 display: grid;
 grid-template-columns: auto 1fr;
 gap: var(--space-md);
 align-items: center;
}
.trust-label {
 color: var(--color-muted);
 font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.trust-marquee {
 overflow: hidden;
 mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.trust-track {
 display: inline-flex;
 gap: 24px;
 white-space: nowrap;
 color: var(--color-body);
 animation: marquee 40s linear infinite;
}
@keyframes marquee {
 from {
 transform: translateX(0);
 }
 to {
 transform: translateX(-50%);
 }
}
@media (prefers-reduced-motion: reduce) {
 .trust-track {
 animation: none;
 }
}
@media (max-width: 700px) {
 .trust {
 grid-template-columns: 1fr;
 }
}

/* ---------- Value props ------------------------------------------------- */
.value-props {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-md);
 padding: var(--space-xl) 0;
}
.value-props article {
 padding: var(--space-lg);
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 border: 1px solid var(--color-line);
 box-shadow: var(--shadow-card);
 display: grid;
 gap: 12px;
}
.icon-tile {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(45, 110, 255, 0.25), rgba(107, 164, 255, 0.15));
 border: 1px solid rgba(45, 110, 255, 0.35);
 display: grid;
 place-items: center;
 color: var(--color-primary-soft);
 font-size: 1.1rem;
 font-family: "JetBrains Mono", monospace;
}
@media (max-width: 820px) {
 .value-props {
 grid-template-columns: 1fr;
 }
}

/* ---------- Section head ------------------------------------------------ */
.section-head {
 max-width: 720px;
 margin: 0 auto var(--space-lg);
 text-align: center;
 display: grid;
 gap: 10px;
}
.section-head p {
 color: var(--color-body);
}

/* ---------- Story ------------------------------------------------------- */
.story {
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: var(--space-xl);
 align-items: center;
 padding: var(--space-2xl) 0;
}
.step-list {
 margin-top: var(--space-md);
 display: grid;
 gap: 10px;
 color: var(--color-body);
}
.step-list li {
 display: flex;
 align-items: center;
 gap: 10px;
}
.step-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: linear-gradient(120deg, var(--color-primary), var(--color-primary-soft));
 box-shadow: 0 0 0 4px rgba(45, 110, 255, 0.15);
}
.story-video video {
 width: 100%;
 border-radius: var(--radius-lg);
 border: 1px solid var(--color-line-strong);
 background: #000;
 aspect-ratio: 16 / 10;
 object-fit: contain;
}
.story-video {
 position: relative;
}
.story-video::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 28px;
 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 background: linear-gradient(180deg, rgba(247, 249, 252, 0.96) 0%, rgba(247, 249, 252, 0.72) 70%, transparent 100%);
 pointer-events: none;
 z-index: 2;
}
@media (max-width: 980px) {
 .story {
 grid-template-columns: 1fr;
 padding: var(--space-xl) 0;
 }
}

/* ---------- Bento ------------------------------------------------------- */
.bento-section {
 padding: var(--space-xl) 0;
}
.bento {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 grid-auto-rows: minmax(180px, auto);
 gap: var(--space-md);
}
.bento-card {
 position: relative;
 overflow: hidden;
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 border: 1px solid var(--color-line);
 padding: var(--space-md);
 display: grid;
 grid-template-rows: auto 1fr;
 gap: 12px;
 min-height: 220px;
 box-shadow: var(--shadow-card);
 transition: transform var(--duration-base) var(--ease-standard),
 border-color var(--duration-base) var(--ease-standard);
}
.bento-card:hover {
 transform: translateY(-2px);
 border-color: var(--color-line-strong);
}
.bento-card::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(
 40% 70% at var(--mx, 50%) var(--my, 0%),
 rgba(45, 110, 255, 0.14),
 transparent 60%
 );
 opacity: 0;
 transition: opacity var(--duration-base) var(--ease-standard);
 pointer-events: none;
}
.bento-card:hover::before {
 opacity: 1;
}
.bento-card::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 26px;
 background: linear-gradient(180deg, rgba(247, 249, 252, 0.96) 0%, rgba(247, 249, 252, 0.7) 70%, transparent 100%);
 pointer-events: none;
 z-index: 2;
}
.bento-text {
 display: grid;
 gap: 4px;
 position: relative;
 z-index: 3;
}
.bento-card img {
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 10;
 object-fit: contain;
 background: #f8fafc;
 border-radius: var(--radius-md);
 border: 1px solid var(--color-line);
}
.bento-split {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 height: 100%;
}
.bento-split img {
 height: auto;
}

.bento-a {
 grid-column: span 7;
 grid-row: span 2;
}
.bento-b {
 grid-column: span 5;
 grid-row: span 2;
}
.bento-c {
 grid-column: span 4;
}
.bento-d {
 grid-column: span 4;
}
.bento-e {
 grid-column: span 4;
}
.bento-f {
 grid-column: span 4;
}
.bento-g {
 grid-column: span 4;
}
.bento-h {
 grid-column: span 4;
}
.bento-i {
 grid-column: span 12;
}
@media (max-width: 1040px) {
 .bento {
 grid-template-columns: repeat(6, 1fr);
 }
 .bento-a,
 .bento-b {
 grid-column: span 6;
 grid-row: auto;
 }
 .bento-c,
 .bento-d,
 .bento-e,
 .bento-f,
 .bento-g,
 .bento-h {
 grid-column: span 3;
 }
 .bento-i {
 grid-column: span 6;
 }
}
@media (max-width: 640px) {
 .bento {
 grid-template-columns: 1fr;
 }
 .bento-card {
 grid-column: span 1 !important;
 }
 .bento-split {
 grid-template-columns: 1fr;
 }
}

/* ---------- Workflows --------------------------------------------------- */
.workflows {
 padding: var(--space-2xl) 0;
}
.video-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-md);
}
.video-card {
 padding: var(--space-md);
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 border: 1px solid var(--color-line);
 display: grid;
 gap: 10px;
 box-shadow: var(--shadow-card);
 position: relative;
 overflow: hidden;
}
.video-card::before {
 content: "";
 position: absolute;
 top: var(--space-md);
 left: var(--space-md);
 right: var(--space-md);
 height: 26px;
 border-radius: var(--radius-md) var(--radius-md) 0 0;
 background: linear-gradient(180deg, rgba(247, 249, 252, 0.96) 0%, rgba(247, 249, 252, 0.7) 70%, transparent 100%);
 pointer-events: none;
 z-index: 2;
}
.video-card video {
 width: 100%;
 aspect-ratio: 16 / 10;
 object-fit: contain;
 background: #000;
 border-radius: var(--radius-md);
 border: 1px solid var(--color-line);
 position: relative;
 z-index: 1;
}
@media (max-width: 980px) {
 .video-grid {
 grid-template-columns: 1fr;
 }
}

/* ---------- Proof / trust ------------------------------------------------ */
.proof {
 padding: 0 0 var(--space-xl);
}
.proof-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-md);
}
.proof-card {
 border: 1px solid var(--color-line);
 background: var(--color-surface);
 border-radius: var(--radius-lg);
 padding: var(--space-lg);
 box-shadow: var(--shadow-card);
 display: grid;
 gap: 8px;
}
.security {
 padding: 0 0 var(--space-xl);
 display: grid;
 gap: var(--space-md);
 justify-items: center;
 text-align: center;
}
@media (max-width: 980px) {
 .proof-grid {
 grid-template-columns: 1fr;
 }
}

/* ---------- Personas ---------------------------------------------------- */
.personas {
 padding: var(--space-xl) 0;
}
.persona-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-md);
}
.persona-card {
 padding: var(--space-lg);
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 border: 1px solid var(--color-line);
 display: grid;
 gap: 12px;
 box-shadow: var(--shadow-card);
 position: relative;
 overflow: hidden;
}
.persona-card::after {
 content: "";
 position: absolute;
 inset: auto -20% -40% auto;
 width: 200px;
 height: 200px;
 background: radial-gradient(50% 50% at 50% 50%, rgba(45, 110, 255, 0.3), transparent 60%);
 filter: blur(30px);
 opacity: 0.6;
 pointer-events: none;
}
.persona-tag {
 display: inline-block;
 padding: 4px 10px;
 border-radius: var(--radius-pill);
 background: rgba(45, 110, 255, 0.12);
 color: var(--color-primary-soft);
 border: 1px solid rgba(45, 110, 255, 0.3);
 font-size: 0.75rem;
 width: max-content;
}
.persona-card ul {
 color: var(--color-body);
 display: grid;
 gap: 4px;
 font-size: 0.9rem;
}
.persona-card ul li::before {
 content: "› ";
 color: var(--color-primary-soft);
}
@media (max-width: 1040px) {
 .persona-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 640px) {
 .persona-grid {
 grid-template-columns: 1fr;
 }
}

/* ---------- India chip grid -------------------------------------------- */
.india-section {
 padding: var(--space-2xl) 0;
}
.chip-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center;
}
.chip {
 padding: 10px 14px;
 border-radius: var(--radius-pill);
 background: var(--color-surface);
 border: 1px solid var(--color-line-strong);
 color: var(--color-text);
 font-size: 0.9rem;
 transition:
 transform var(--duration-base) var(--ease-standard),
 background var(--duration-base) var(--ease-standard);
}
.chip:hover {
 transform: translateY(-2px);
 background: var(--color-surface-mid);
}

/* ---------- Accountant -------------------------------------------------- */
.accountant {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-xl);
 align-items: center;
 padding: var(--space-2xl) 0;
}
.check-list {
 display: grid;
 gap: 8px;
 margin-top: var(--space-md);
 color: var(--color-body);
}
.check-list li {
 position: relative;
 padding-left: 26px;
}
.check-list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 4px;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: linear-gradient(120deg, var(--color-primary), var(--color-primary-soft));
 box-shadow: 0 0 0 3px rgba(45, 110, 255, 0.18);
}
.check-list li::after {
 content: "";
 position: absolute;
 left: 4px;
 top: 8px;
 width: 8px;
 height: 4px;
 border-left: 2px solid #fff;
 border-bottom: 2px solid #fff;
 transform: rotate(-45deg);
}
.accountant-media {
 position: relative;
}
.accountant-media img {
 width: 100%;
 border-radius: var(--radius-lg);
 border: 1px solid var(--color-line-strong);
 box-shadow: var(--shadow-card);
}
.accountant-media-overlap {
 position: absolute;
 width: 52%;
 right: -12px;
 bottom: -32px;
 box-shadow: var(--shadow-float);
}
@media (max-width: 980px) {
 .accountant {
 grid-template-columns: 1fr;
 }
 .accountant-media-overlap {
 position: static;
 width: 100%;
 margin-top: 12px;
 }
}

/* ---------- Public share ----------------------------------------------- */
.public-share {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-xl);
 align-items: center;
 padding: var(--space-2xl) 0;
}
.public-media {
 position: relative;
}
.public-media img {
 width: 100%;
 border-radius: var(--radius-lg);
 border: 1px solid var(--color-line-strong);
 box-shadow: var(--shadow-card);
}
.public-media-overlap {
 position: absolute;
 width: 55%;
 right: -16px;
 top: -28px;
 transform: rotate(-3deg);
 box-shadow: var(--shadow-float);
}
@media (max-width: 980px) {
 .public-share {
 grid-template-columns: 1fr;
 }
 .public-media-overlap {
 position: static;
 width: 100%;
 transform: none;
 margin-top: 12px;
 }
}

/* ---------- Mobile section --------------------------------------------- */
.mobile-section {
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: var(--space-xl);
 align-items: center;
 padding: var(--space-2xl) 0;
}
.phone-frame {
 justify-self: center;
 padding: 10px;
 border-radius: 40px;
 background: var(--color-surface);
 border: 1px solid var(--color-line-strong);
 box-shadow: var(--shadow-card);
 width: min(320px, 80%);
}
.phone-frame img {
 border-radius: 30px;
 border: 1px solid var(--color-line);
}
@media (max-width: 980px) {
 .mobile-section {
 grid-template-columns: 1fr;
 }
}

/* ---------- Checklist --------------------------------------------------- */
.checklist {
 padding: var(--space-2xl) 0;
}
.checklist-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-md);
}
.checklist-grid article {
 padding: var(--space-lg);
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 border: 1px solid var(--color-line);
 display: grid;
 gap: 10px;
}
.checklist-grid ul {
 display: grid;
 gap: 4px;
 color: var(--color-body);
 font-size: 0.95rem;
}
.checklist-grid ul li::before {
 content: "› ";
 color: var(--color-primary-soft);
}
@media (max-width: 980px) {
 .checklist-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 640px) {
 .checklist-grid {
 grid-template-columns: 1fr;
 }
}

/* ---------- FAQ --------------------------------------------------------- */
.modules {
 padding: var(--space-xl) 0 var(--space-2xl);
}
.module-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-md);
}
.module-card {
 padding: 18px;
 border-radius: var(--radius-lg);
 border: 1px solid var(--color-line);
 background: var(--color-surface);
 box-shadow: var(--shadow-card);
 display: grid;
 gap: 8px;
 transition: transform var(--duration-base) var(--ease-standard),
 border-color var(--duration-base) var(--ease-standard);
}
.module-card:hover {
 transform: translateY(-2px);
 border-color: var(--color-line-strong);
}
.module-card p {
 color: var(--color-body);
 font-size: 0.95rem;
}
.seo-links {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 14px;
 margin-top: var(--space-md);
 justify-content: center;
}
.seo-links a {
 color: var(--color-primary-soft);
 font-size: 0.9rem;
}
.seo-links a:hover {
 text-decoration: underline;
}

/* ---------- GEO / AI summary ------------------------------------------- */
.geo-summary {
 margin-top: var(--space-lg);
 padding: var(--space-lg);
 border-radius: var(--radius-lg);
 background: color-mix(in srgb, var(--color-surface-mid) 65%, #ffffff);
 border: 1px solid var(--color-line-strong);
 box-shadow: var(--shadow-card);
 display: grid;
 gap: 10px;
}
.geo-summary h2 {
 font-size: clamp(1.15rem, 2.1vw, 1.45rem);
}
.geo-summary p {
 color: var(--color-body);
}
.geo-summary ul {
 display: grid;
 gap: 6px;
 color: var(--color-body);
}
.geo-summary li::before {
 content: "• ";
 color: var(--color-primary-soft);
}
@media (max-width: 1100px) {
 .module-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 640px) {
 .module-grid {
 grid-template-columns: 1fr;
 }
}

.module-page {
 padding: var(--space-xl) 0;
}
.module-hero {
 display: grid;
 grid-template-columns: 1fr 1.1fr;
 gap: var(--space-xl);
 align-items: center;
 margin-bottom: var(--space-xl);
}
.module-media img {
 width: 100%;
 border-radius: var(--radius-lg);
 border: 1px solid var(--color-line-strong);
 background: #f8fafc;
}
.module-points {
 display: grid;
 gap: 8px;
 margin-top: var(--space-md);
 color: var(--color-body);
}
.module-points li::before {
 content: "• ";
 color: var(--color-primary-soft);
}
.module-cta {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: var(--space-md);
}
@media (max-width: 980px) {
 .module-hero {
 grid-template-columns: 1fr;
 }
}

/* ---------- FAQ --------------------------------------------------------- */
.faq {
 padding: var(--space-2xl) 0;
}
.faq-list {
 max-width: 860px;
 margin: 0 auto;
 display: grid;
 gap: 10px;
}
.faq-list details {
 padding: 18px 22px;
 border-radius: var(--radius-md);
 background: var(--color-surface);
 border: 1px solid var(--color-line);
 transition: background var(--duration-base) var(--ease-standard);
}
.faq-list details[open] {
 background: var(--color-surface-mid);
}
.faq-list summary {
 list-style: none;
 cursor: pointer;
 font-family: "Manrope", "Inter", sans-serif;
 font-weight: 700;
 font-size: 1rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.faq-list summary::-webkit-details-marker {
 display: none;
}
.faq-list summary::after {
 content: "+";
 font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
 color: var(--color-primary-soft);
 transition: transform var(--duration-base) var(--ease-standard);
}
.faq-list details[open] summary::after {
 transform: rotate(45deg);
}
.faq-list p {
 margin-top: 10px;
 color: var(--color-body);
}

/* ---------- CTA / form -------------------------------------------------- */
.cta {
 padding: var(--space-2xl) 0;
}
.cta-inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-xl);
 padding: var(--space-xl);
 border-radius: var(--radius-xl);
 background:
 radial-gradient(60% 80% at 0% 0%, rgba(45, 110, 255, 0.12), transparent 60%),
 var(--color-surface);
 border: 1px solid var(--color-line-strong);
 box-shadow: var(--shadow-card);
}
.cta-bullets {
 display: grid;
 gap: 6px;
 margin-top: var(--space-md);
 color: var(--color-body);
}
.cta-bullets li::before {
 content: "▪ ";
 color: var(--color-primary-soft);
}
.cta-dual-actions {
 margin-top: var(--space-md);
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.cta-form {
 display: grid;
 gap: 12px;
}
.cta-form label {
 display: grid;
 gap: 4px;
 color: var(--color-body);
 font-size: 0.9rem;
}
.cta-form input,
.cta-form select,
.cta-form textarea {
 width: 100%;
 padding: 12px 14px;
 border-radius: var(--radius-md);
 border: 1px solid var(--color-line-strong);
 background: #ffffff;
 color: var(--color-text);
 font: inherit;
 transition: border-color var(--duration-base) var(--ease-standard),
 box-shadow var(--duration-base) var(--ease-standard);
}
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
 outline: none;
 border-color: var(--color-primary);
 box-shadow: 0 0 0 3px rgba(45, 110, 255, 0.18);
}
.cta-form textarea {
 resize: vertical;
}
.form-note {
 color: var(--color-muted);
 font-size: 0.8rem;
}
.form-note.is-ok {
 color: var(--color-success);
}
.form-note.is-error {
 color: var(--color-error);
}
@media (max-width: 980px) {
 .cta-inner {
 grid-template-columns: 1fr;
 }
}

/* ---------- Footer ------------------------------------------------------ */
.site-footer {
 border-top: 1px solid var(--color-line);
 padding: var(--space-xl) 0 var(--space-lg);
 margin-top: var(--space-xl);
 background: #eef3ff;
 position: relative;
 z-index: 1;
}
.footer-wrap {
 display: grid;
 grid-template-columns: 1.2fr 2fr;
 gap: var(--space-xl);
 align-items: start;
}
.footer-brand {
 display: flex;
 align-items: flex-start;
 gap: 12px;
}
.footer-brand .brand-word {
 font-size: 1.1rem;
}
.footer-nav {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-md);
}
.footer-nav h4 {
 margin-bottom: 8px;
}
.footer-heading {
 margin: 0 0 8px;
 font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
 font-size: 0.92rem;
 font-weight: 700;
 line-height: 1.35;
 color: var(--color-text);
}
.footer-nav div {
 display: grid;
 gap: 4px;
}
.footer-nav a {
 color: var(--color-body);
 transition: color var(--duration-base) var(--ease-standard);
}
.footer-nav a:hover {
 color: var(--color-text);
}
.footer-end {
 display: flex;
 justify-content: space-between;
 gap: 8px;
 border-top: 1px solid var(--color-line);
 margin-top: var(--space-lg);
 padding-top: var(--space-md);
 font-size: 0.85rem;
}
.muted {
 color: var(--color-muted);
}
@media (max-width: 820px) {
 .footer-wrap {
 grid-template-columns: 1fr;
 }
 .footer-nav {
 grid-template-columns: repeat(3, 1fr);
 }
 .footer-end {
 flex-direction: column;
 }
}

/* ---------- Reveal (works with Motion One in script.js) ---------------- */
/* Default visible; hide only when JS bootstraps .reveal-js */
[data-reveal] {
 will-change: opacity, transform;
}

[data-float] {
 animation: float 6s ease-in-out infinite;
}
[data-float-delay="0.15"] {
 animation-delay: 1.5s;
}
@keyframes float {
 0%,
 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-6px);
 }
}

@media (prefers-reduced-motion: reduce) {
 [data-reveal],
 [data-float],
 .trust-track,
 .hero-frame,
 .button {
 animation: none !important;
 transition: none !important;
 transform: none !important;
 opacity: 1 !important;
 }
}