/* ═══════════════════════════════════════════════════════════════════
   NODARAMA — coding.css
   Verbatim product page + codingfeatures.html
   Colors: orange (#d48631) + green (#5db87a)
   Sizing: % ratios only — no pixel-count containers
   Mobile: handled in mobile.css (portrait aspect ratio only)
   ═══════════════════════════════════════════════════════════════════ */

/* ── I. PAGE SHELL ── */
.Page-Coding-Ax { background: #000; color: rgba(255,255,255,0.88); }
.Page-Coding-Ax .Para-Ax  { color: rgba(255,255,255,0.72); }
.Page-Coding-Ax .Lead-Ax  { color: rgba(255,255,255,0.92); }
.Page-Coding-Ax .Kicker-Ax { color: var(--accent-g, #5db87a); }
.Sec-Num-Ax { font-family: var(--mono); font-size: clamp(0.7rem, 0.84vw, 0.8rem); letter-spacing: 0.18em; color: rgba(93,184,122,0.55); display: block; margin-bottom: 0.4rem; }


/* ── II. HERO ── */
.Hero-Cx { position: relative; overflow: hidden; min-height: 74svh; padding: 8svh 6%; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; }
.Hero-Cx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.80) 45%, rgba(0,0,0,0.32) 100%), url("assets/system1.png") center right / cover no-repeat; animation: HeroDrift-Kf 24s ease-in-out infinite alternate; }
.Hero-Cx::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(0deg, #000 0%, transparent 100%); pointer-events: none; }
.Hero-Glow-Cx { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 55% 70% at 72% 50%, rgba(93,184,122,0.07) 0%, transparent 65%), radial-gradient(ellipse 40% 50% at 20% 80%, rgba(212,134,49,0.05) 0%, transparent 60%); background-size: 200% 200%; animation: GlowBreath-Kf 8s ease-in-out infinite alternate, GlowShift-Kf 14s ease-in-out infinite; pointer-events: none; }
.Hero-Grain-Cx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; animation: GrainShift-Kf 0.5s steps(1) infinite; }
.Hero-Copy-Dx { position: relative; z-index: 2; width: 70%; }
.Hero-Kicker-Dx { display: block; font-size: clamp(0.72rem, 0.9vw, 0.86rem); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-g, #5db87a); margin-bottom: 0.9rem; }
.Hero-Title-Dx { font-family: var(--mono); font-size: clamp(3.5rem, 7.5vw, 7.5rem); font-weight: 400; letter-spacing: 0.18em; line-height: 0.95; color: #fff; margin: 0 0 1.4rem; }
.Hero-Line-Dx { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 3.2rem); font-weight: 400; color: #fff; line-height: 1.12; margin: 0 0 0.8rem; letter-spacing: 0.04em; }
.Hero-Sub-Dx { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 500; color: var(--accent, #d48631); line-height: 1.4; margin: 0 0 1.2rem; }
.Hero-Para-Dx { font-size: clamp(0.96rem, 1.2vw, 1.07rem); color: rgba(255,255,255,0.72); line-height: 1.74; width: 72%; margin: 0 0 1rem; }
.Hero-Version-Dx { display: inline-block; margin-top: 1.4rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.1); padding: 0.3rem 0.7rem; }
.seo-blunt-line { width: 80%; margin: 18px 0 0; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.25; font-weight: 800; color: var(--text-strong, #f4f4f4); }
.seo-blunt-copy { width: 80%; margin: 12px 0 0; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.55; color: var(--text-soft, #d6d6d6); }
.Hero-Actions-Dx { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 1rem; }
.Hero-Btn-Primary-Dx { display: inline-flex; align-items: center; padding: 0.85rem 1.6rem; background: var(--accent-g, #5db87a); color: #000; font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid transparent; transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease; box-shadow: 0 8px 28px rgba(93,184,122,0.25); }
.Hero-Btn-Primary-Dx:hover { background: #72d08f; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(93,184,122,0.38); }
.Hero-Btn-Ghost-Dx { display: inline-flex; align-items: center; padding: 0.85rem 1.6rem; background: transparent; color: rgba(255,255,255,0.88); font-family: var(--mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.22); transition: border-color 0.22s ease, color 0.22s ease, transform 0.18s ease; }
.Hero-Btn-Ghost-Dx:hover { border-color: var(--accent-g, #5db87a); color: var(--accent-g, #5db87a); transform: translateY(-2px); }


/* ── III. REEL DIVIDER ── */
.ReelDivider-Ax { width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(93,184,122,0.4) 20%, rgba(212,134,49,0.6) 50%, rgba(93,184,122,0.4) 80%, transparent 100%); margin: 0; }


/* ── IV. PURPOSE — 62% text / 32% video / 3% gap / 3% side padding = ~100% ── */
.Purpose-Cx { display: flex; flex-direction: row; align-items: center; gap: 3%; padding: 6svh 3%; background: #000; border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%; box-sizing: border-box; }
.Purpose-Copy-Dx { width: 62%; flex-shrink: 0; }
.Purpose-Media-Dx { width: 32%; flex-shrink: 0; border: 1px solid rgba(93,184,122,0.18); background: #030407; box-shadow: 0 32px 80px rgba(0,0,0,0.72), 0 0 0 1px rgba(93,184,122,0.08); overflow: hidden; animation: FloatUp-Kf 10s ease-in-out infinite alternate; }
.Purpose-Media-Dx video, .Purpose-Media-Dx img { display: block; width: 100%; height: auto; filter: brightness(0.94) saturate(0.96); }


/* ── V. AUDIENCE — full-bleed bg, copy right-aligned ~50% ── */
.Audience-Cx { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 52svh; padding: 6svh 4%; background: linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.82)), url("assets/system7.png") center / cover no-repeat; border-bottom: 1px solid rgba(255,255,255,0.06); }
.Audience-Img-Dx { display: none; }
.Audience-Copy-Dx { width: 50%; display: flex; flex-direction: column; justify-content: center; }


/* ── VI. ACHIEVE / IMPACT — full bleed centered copy ── */
.Achieve-Cx { position: relative; min-height: 52svh; display: flex; align-items: center; justify-content: center; padding: 6svh 4%; overflow: hidden; background: #000; border-bottom: 1px solid rgba(255,255,255,0.06); }
.Achieve-Bg-Dx { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.86)), url("assets/boombox.png") center / cover no-repeat; filter: brightness(0.84) saturate(0.78); animation: BreatheAlt-Kf 22s ease-in-out infinite alternate; }
.Achieve-Copy-Dx { position: relative; z-index: 2; width: 80%; text-align: center; }
.Achieve-Quote-Dx { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.3vw, 2.2rem); color: var(--accent, #d48631); line-height: 1.28; margin: 0 0 1.5rem; }


/* ── VII. HOW IT WORKS — 35% copy / 5% gap / 55% media / 5% padding = 100% ── */
.How-Cx { display: flex; flex-direction: row; align-items: center; gap: 5%; padding: 6svh 3%; background: linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.96)), url("assets/system2.png") center / cover no-repeat; border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%; box-sizing: border-box; }
.How-Copy-Dx { width: 35%; flex-shrink: 0; }
.How-Media-Dx { width: 57%; flex-shrink: 0; border: 1px solid rgba(212,134,49,0.14); background: #050608; box-shadow: 0 32px 80px rgba(0,0,0,0.72), 0 0 0 1px rgba(212,134,49,0.07); overflow: hidden; animation: FloatUp-Kf 11s ease-in-out infinite alternate; }
.How-Media-Dx img { width: 100%; height: auto; display: block; filter: saturate(0.94) contrast(1.02); }


/* ── VIII. BENEFITS ── */
.BenefitsIntro-Cx { padding: 5svh 4% 2svh; text-align: center; }
.Benefits-Cx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.Benefit-Dx { background: #000; padding: 4svh 3%; min-height: 40svh; position: relative; display: flex; flex-direction: column; transition: background 0.4s ease; }
.Benefit-Dx:hover { background: linear-gradient(170deg, rgba(93,184,122,0.05), rgba(0,0,0,0.98)); }
.Benefit-Dx::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--accent-g, #5db87a), var(--accent, #d48631)); transition: width 0.5s ease; }
.Benefit-Dx:hover::after { width: 100%; }
.Benefit-Icon-Dx { width: 52px; height: 52px; margin: 0 auto 1.4rem; opacity: 0.88; transition: opacity 0.3s ease, transform 0.3s ease; }
.Benefit-Dx:hover .Benefit-Icon-Dx { opacity: 1; transform: scale(1.1); }
.Benefit-Icon-Dx svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); transition: filter 0.3s ease; }
.Benefit-Dx:hover .Benefit-Icon-Dx svg { filter: drop-shadow(0 0 14px rgba(93,184,122,0.5)); }
.Benefit-Tag-Dx { margin-top: auto; padding-top: 1.4rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(93,184,122,0.55); }


/* ── IX. DUB DECK — 55% image / 45% copy ── */
.Dub-Cx { display: flex; flex-direction: row; min-height: 46svh; background: #000; border-bottom: 1px solid rgba(255,255,255,0.06); }
.Dub-Img-Dx { width: 55%; overflow: hidden; flex-shrink: 0; }
.Dub-Img-Dx img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.82); animation: Breathe-Kf 18s ease-in-out infinite alternate; }
.Dub-Copy-Dx { width: 45%; padding: 6svh 4%; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.96)), url("assets/system4.png") center / cover no-repeat; box-sizing: border-box; }


/* ── X. FEATURE COLLAGE / HOTSPOTS ── */
.Collage-Cx { padding: 6svh 3%; border-bottom: 1px solid rgba(255,255,255,0.06); background: linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.96)), url("assets/system7.png") center / cover no-repeat; }
.Collage-Head-Dx { width: 70%; margin: 0 auto 2.5rem; text-align: center; }
.Collage-Shell-Dx { position: relative; width: 94%; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #050608; box-shadow: 0 32px 90px rgba(0,0,0,0.8); animation: FloatUp-Kf 12s ease-in-out infinite alternate; }
.Collage-Shell-Dx img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.Collage-Shell-Dx::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(0,0,0,0); transition: background 200ms ease; }
.Collage-Shell-Dx:hover::after, .Collage-Shell-Dx:focus-within::after { background: rgba(0,0,0,0.46); }
.Hs-Dx { position: absolute; z-index: 4; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.45rem; padding: clamp(0.75rem, 1.4vw, 1.15rem); overflow: hidden; cursor: pointer; border: 1px solid rgba(93,184,122,0); background: linear-gradient(180deg, rgba(5,8,10,0.36), rgba(5,8,10,0.06)); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.Hs-Dx span, .Hs-Dx em { position: relative; width: auto; max-width: 100%; opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.Hs-Dx span { color: #fff; font-family: inherit; font-size: clamp(0.9rem, 1.1vw, 1.12rem); font-weight: 800; letter-spacing: 0.02em; line-height: 1.18; white-space: normal; text-shadow: 0 2px 14px rgba(0,0,0,0.88); }
.Hs-Dx em { color: rgba(244,244,244,0.92); font-family: inherit; font-style: normal; font-size: clamp(0.82rem, 1vw, 1rem); line-height: 1.38; text-shadow: 0 2px 14px rgba(0,0,0,0.88); }
.Hs-Dx:hover, .Hs-Dx:focus { outline: none; z-index: 7; border-color: rgba(93,184,122,0.72); background: linear-gradient(180deg, rgba(5,8,10,0.82), rgba(5,8,10,0.34)); box-shadow: inset 0 0 0 1px rgba(244,226,176,0.12), 0 18px 34px rgba(0,0,0,0.34); }
.Hs-Dx:hover span, .Hs-Dx:hover em, .Hs-Dx:focus span, .Hs-Dx:focus em { opacity: 1; transform: translateY(0); }
.Hs-Controls  { left: 2%;  top: 14%; width: 30%; height: 24%; }
.Hs-Project   { left: 2%;  top: 2%;  width: 34%; height: 14%; }
.Hs-Active    { left: 1%;  top: 44%; width: 15%; height: 36%; }
.Hs-Diagnostics { left: 34%; top: 48%; width: 36%; height: 38%; }
.Hs-History   { left: 72%; top: 18%; width: 26%; height: 32%; }
.Hs-Auto      { left: 35%; top: 2%;  width: 28%; height: 24%; z-index: 5; }
.Hs-UI        { left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; border: 2px dashed rgba(93,184,122,0.3); }


/* ── XI. PURCHASE / PRICING ── */
.Purchase-Cx { border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(170deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); padding: 4svh 3%; margin-bottom: 1.4rem; }
.Stripe-Purchase-Grid-Ax { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0 0; }
.Stripe-Plan-Card-Ax { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(170deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 20px 48px rgba(0,0,0,0.28); }
.Stripe-Plan-Card-Ax.Standard-Ax { border-left: 2px solid var(--accent-g, #5db87a); background: linear-gradient(180deg, rgba(93,184,122,0.08), rgba(212,134,49,0.045)); }
.Stripe-Plan-Card-Ax.Feature-Ax { border-left: 2px solid rgba(212,134,49,0.5); background: linear-gradient(180deg, rgba(212,134,49,0.08), rgba(255,255,255,0.018)); }
.Stripe-Plan-Card-Ax.Premium-Lifetime-Ax { border-left: 2px solid rgba(93,184,122,0.6); background: linear-gradient(180deg, rgba(93,184,122,0.07), rgba(212,134,49,0.075)); }
.Stripe-Plan-Card-Ax.is-selected { border-color: rgba(93,184,122,0.72); box-shadow: inset 0 0 0 1px rgba(93,184,122,0.16), 0 22px 54px rgba(93,184,122,0.12); }
.Stripe-Plan-Kicker-Dx { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-g, #5db87a); }
.Stripe-Plan-Card-Ax h3 { color: #fff; font-size: 1.05rem; line-height: 1.2; margin: 0; }
.Stripe-Plan-Price-Dx { color: #f4e2b0; font-size: 1.4rem; font-weight: 700; line-height: 1; margin: 0; }
.Stripe-Plan-Price-Dx span { font-size: 0.82rem; color: rgba(244,226,176,0.72); margin-left: 0.15rem; }
.Stripe-Plan-Card-Ax ul { display: grid; gap: 0.35rem; margin: 0 0 0.4rem; padding: 0; }
.Stripe-Plan-Card-Ax li { position: relative; padding-left: 0.75rem; color: rgba(216,201,150,0.84); font-size: 0.86rem; line-height: 1.35; }
.Stripe-Plan-Card-Ax li::before { content: '—'; position: absolute; left: 0; color: var(--accent-g, #5db87a); }
.Stripe-Plan-Card-Ax .Stripe-Checkout-Button-Ax { display: none !important; }
.Stripe-Plan-Select-Ax { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.2rem; color: rgba(255,255,255,0.82); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.Stripe-Plan-Select-Ax input { width: 18px; height: 18px; accent-color: var(--accent-g, #5db87a); }
.Stripe-Checkout-Message-Ax { margin: 1rem 0 0; color: rgba(244,226,176,0.86); }
.Stripe-Purchase-Form-Ax { display: grid; gap: 1rem; margin-top: 1.25rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.36); }
.Stripe-Purchase-Form-Ax h3 { margin: 0; color: #fff; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.Stripe-Purchase-Fields-Ax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.Stripe-Purchase-Fields-Ax input { width: 100%; min-height: 52px; padding: 0.95rem 1rem; border: 1px solid rgba(255,255,255,0.14); background: #08090b; color: rgba(255,255,255,0.92); border-radius: 8px; }
.Stripe-Terms-Ax { display: flex; align-items: flex-start; gap: 0.55rem; color: rgba(255,255,255,0.74); font-size: 0.9rem; }
.Stripe-Terms-Ax input { margin-top: 0.22rem; }
.Stripe-Purchase-Submit-Ax { justify-self: start; min-height: 52px; padding: 0.9rem 1.3rem; border: 1px solid rgba(93,184,122,0.56); background: rgba(93,184,122,0.14); color: rgba(235,255,240,0.96); font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; }
.Stripe-Purchase-Submit-Ax:hover, .Stripe-Purchase-Submit-Ax:focus { border-color: var(--accent-g, #5db87a); background: rgba(93,184,122,0.22); }
.FinePrint-Ax { font-size: 0.85rem; color: rgba(255,255,255,0.58); margin-top: 0.75rem; }


/* ── XII. DOWNLOAD ── */
.Download-Cx { display: flex; flex-direction: column; gap: 2rem; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(170deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); padding: 4svh 3%; margin-bottom: 1.4rem; }
.Download-Grid-Dx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.Download-Card-Dx { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
.Download-Card-Dx:hover { border-color: rgba(93,184,122,0.4); background: rgba(93,184,122,0.04); transform: translateY(-3px); }
.Download-Primary-Dx { border-left: 2px solid var(--accent-g, #5db87a); }
.Download-Type-Dx { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-g, #5db87a); }
.Download-Card-Dx h3 { color: #fff; font-size: 1.05rem; font-weight: 500; margin: 0; }
.Download-Card-Dx p { color: rgba(216,201,150,0.8); font-size: 0.92rem; line-height: 1.55; flex: 1; }
.Download-Link-Dx { display: inline-block; margin-top: auto; padding: 0.72rem 1rem; border: 1px solid rgba(93,184,122,0.45); background: rgba(93,184,122,0.1); color: rgba(235,255,240,0.95); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; transition: border-color 0.22s ease, background 0.22s ease; }
.Download-Link-Dx:hover { border-color: var(--accent-g, #5db87a); background: rgba(93,184,122,0.2); }
.Download-Link-Dx.is-muted { opacity: 0.48; pointer-events: none; }


/* ── XIII. FLOATING CTA ── */
.Floating-Download-Dx { position: fixed; right: 2%; bottom: 2svh; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 1svh; }
.Floating-Download-Dx .FloatCta-Ax { position: static; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.FloatCta-Coding-Ax { border-color: rgba(93,184,122,0.45); color: rgba(200,240,210,0.95); }
.FloatCta-Coding-Ax:hover { border-color: var(--accent-g, #5db87a); background: rgba(93,184,122,0.12); }
.Download-Logo-Dx { display: block; width: 10vw; max-width: 12%; aspect-ratio: 1/1; height: auto; margin: 0 auto; opacity: 0.96; pointer-events: none; filter: drop-shadow(0 1svh 2svh rgba(0,0,0,0.35)); transition: opacity 220ms ease, transform 220ms ease; }
body.Has-Scrolled-Dx .Download-Logo-Dx { opacity: 0.22; transform: translateY(2px); }


/* ── XIV. SUPPORT / FAQ ── */
.Support-Cx { border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(170deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); padding: 4svh 3%; margin-bottom: 1.4rem; }
.Faq-Grid-Dx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.Faq-Item-Dx { padding: 1.4rem 1.5rem; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); border-left: 2px solid rgba(93,184,122,0.35); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
.Faq-Item-Dx:hover { border-left-color: var(--accent-g, #5db87a); background: rgba(93,184,122,0.04); transform: translateY(-2px); }
.Faq-Q-Dx { font-size: clamp(0.98rem, 1.3vw, 1.1rem); font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 0.65rem; }
.Faq-Item-Dx .Para-Ax { margin-bottom: 0; font-size: 0.97rem; }


/* ── XV. FEATURE LINK CARD ── */
.Feature-Link-Cx { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 3svh 3%; margin-bottom: 1.4rem; }


/* ── XVI. CODINGFEATURES PAGE ── */
.Page-CodingFeatures-Ax .CodingFeatures-List-Ax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem 0 0; }
.Page-CodingFeatures-Ax .CodingFeatures-List-Ax article { padding: 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.Page-CodingFeatures-Ax .CodingFeatures-List-Ax strong { display: block; margin-bottom: 0.45rem; color: #fff; }
.Page-CodingFeatures-Ax .CodingFeatures-List-Ax span { color: rgba(216,201,150,0.84); }


/* ── XVII. ANIMATIONS ── */
@keyframes HeroDrift-Kf { from { transform: scale(1.0) translate3d(0,0,0); } to { transform: scale(1.05) translate3d(-14px,-8px,0); } }
@keyframes GlowBreath-Kf { from { opacity: 0.5; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes GlowShift-Kf { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes GrainShift-Kf { 0% { background-position: 0 0; } 20% { background-position: -40px -20px; } 40% { background-position: 20px -40px; } 60% { background-position: -20px 30px; } 80% { background-position: 40px 10px; } 100% { background-position: 0 0; } }

/* GSAP: only hide when confirmed loaded — no flash on failure */
html.gsap-ready .gsap-fade-up { opacity: 0; }
html:not(.gsap-ready) .gsap-fade-up, html.gsap-failed .gsap-fade-up { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .gsap-fade-up, [data-gsap-slide], [data-gsap-scale], [data-gsap-fade], [data-gsap-stagger] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .Hero-Grain-Cx, .Hero-Glow-Cx, .Achieve-Bg-Dx, .Dub-Img-Dx img, .Purpose-Media-Dx, .How-Media-Dx, .Collage-Shell-Dx { animation: none; }
}