/* ==========================================================================
   Playzilla Casino IT — Motif stylesheet
   TYPO-07 · SPACE-07 · CONT-03 · BP-04 · GEO-05 · MOTION-02 · NAME-07
   Container site: 1260px · Readable: 720px
   ========================================================================== */

:root {
    /* Brand palette (final shifted values) */
    --color-primary: #29fead;
    --color-accent: #fd6736;
    --color-bg: #020d19;
    --color-bg-elevated: #082135;
    --color-accent-pressed: #2a3d55;
    --color-gradient-light: #1d3554;
    --color-gradient-mid: #0a1e34;
    --color-text: #ffffff;
    --color-text-muted: #bebcbc;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(41, 254, 173, 0.32);
    --color-rg-banner: #dc2626;

    /* Typography — TYPO-07 (Inter, modular scale 1.22) */
    --font-display: 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.32rem;
    --fs-xl: 1.65rem;
    --fs-2xl: 2.05rem;
    --fs-3xl: 2.55rem;
    --fs-4xl: 3.2rem;
    --lh-tight: 1.15;
    --lh-normal: 1.55;
    --lh-loose: 1.75;
    --tracking-display: -0.018em;

    /* Spacing — SPACE-07 (8-base, denser) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;
    --space-3xl: 7rem;

    /* Container — CONT-03 */
    --container-site: 1260px;
    --container-readable: 720px;
    --container-padding-desktop: 24px;
    --container-padding-mobile: 16px;

    /* Geometry — GEO-05 (soft hex) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --border-w: 1px;

    /* Motion — MOTION-02 */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 160ms;
    --dur-mid: 280ms;

    /* Layout heights */
    --header-height-desktop: 86px;
    --header-height-mobile: 64px;
    --rg-banner-height: 30px;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    min-height: 100vh;
    padding-top: calc(var(--header-height-desktop) + var(--rg-banner-height));
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(at 12% 0%, rgba(41, 254, 173, 0.07) 0%, transparent 45%),
        radial-gradient(at 88% 18%, rgba(253, 103, 54, 0.06) 0%, transparent 45%);
    background-attachment: fixed;
}
@media (max-width: 720px) {
    body { padding-top: calc(var(--header-height-mobile) + var(--rg-banner-height)); }
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    font-weight: 700;
}

/* A11y */
.skip-link {
    position: fixed;
    left: 12px;
    top: -200px;
    background: var(--color-primary);
    color: var(--color-bg);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    z-index: 200;
    font-weight: 700;
    transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:not(:focus) { top: -200px !important; }
.skip-link:focus { top: 60px; outline: 2px solid var(--color-bg); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsible-gaming banner (above fixed header)
   ========================================================================== */
.rg-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 101;
    min-height: var(--rg-banner-height);
    display: flex; align-items: center; justify-content: center;
    background: var(--color-rg-banner);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    text-align: center;
}

/* ==========================================================================
   HEAD-06 — Magazine Logo header
   Layout: logo centered on top row, nav inline below. Auth-LOGIN on right.
   Sticky strategy STICKY-01 → position: fixed with is-shrunk class.
   ========================================================================== */
.p90 {
    position: fixed;
    top: var(--rg-banner-height);
    left: 0; right: 0;
    z-index: 100;
    background: rgba(2, 13, 25, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: var(--border-w) solid var(--color-border);
    transition: background var(--dur-mid) var(--ease-out), padding var(--dur-mid) var(--ease-out);
}
.p90.is-shrunk { background: rgba(2, 13, 25, 0.98); }
.p90-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 14px var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
}
.p90-logo, .p90-logo a {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
}
.p90-logo { grid-column: 2; justify-self: center; }
.p90-logo img {
    height: 88px;
    width: auto;
    flex-shrink: 0;
    display: block;
}
.p90.is-shrunk .p90-logo img { height: 72px; }
.p90-right {
    grid-column: 3;
    justify-self: end;
    display: flex; align-items: center; gap: var(--space-sm);
}
.p90-auth-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary);
    color: var(--color-bg);
    padding: 10px var(--space-md);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-sm);
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p90-auth-btn:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}
.p90-left {
    grid-column: 1;
    display: flex; align-items: center;
}

/* Desktop nav row (HEAD-06 magazine-style bottom row) */
.p90-nav-row {
    border-top: var(--border-w) solid var(--color-border);
    background: rgba(8, 33, 53, 0.4);
}
.p90-nav-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: flex; align-items: center; justify-content: center;
    min-height: 46px;
}
.p90-nav {
    display: flex; align-items: center; gap: var(--space-xs);
}
.p90-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3xs);
}
.p90-nav a {
    display: inline-block;
    padding: 12px var(--space-sm);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.p90-nav a:hover, .p90-nav a:focus-visible {
    color: var(--color-primary);
    background: rgba(41, 254, 173, 0.06);
}
[data-current='/'] .p90-nav a[href='/'],
[data-current='/promo/'] .p90-nav a[href='/promo/'],
[data-current='/app/'] .p90-nav a[href='/app/'],
[data-current='/bonus-code/'] .p90-nav a[href='/bonus-code/'],
[data-current='/login/'] .p90-nav a[href='/login/'],
[data-current='/il-team/'] .p90-nav a[href='/il-team/'],
[data-current='/aiuto/'] .p90-nav a[href='/aiuto/'] {
    color: var(--color-primary);
}

/* NAV-02 — More dropdown */
.p90-more { position: relative; }
.p90-more-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 12px var(--space-sm);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.p90-more-toggle:hover { color: var(--color-primary); background: rgba(41, 254, 173, 0.06); }
.p90-more-toggle::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform var(--dur-fast) var(--ease-out);
}
.p90-more-toggle[aria-expanded='true']::after { transform: rotate(-135deg); margin-top: 2px; }
.p90-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2xs);
    list-style: none;
    margin: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.p90-more-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s;
}
.p90-more-menu a {
    display: block;
    padding: 10px 14px;
    color: var(--color-text);
    font-size: var(--fs-sm);
    border-radius: var(--radius-xs);
}
.p90-more-menu a:hover { background: rgba(41, 254, 173, 0.08); color: var(--color-primary); }

/* Mobile toggle */
.p90-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-xs);
    background: rgba(255,255,255,0.04);
    margin-left: auto !important;
    color: var(--color-text);
}
.p90-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    position: relative;
}
.p90-toggle span::before, .p90-toggle span::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: currentColor;
}
.p90-toggle span::before { top: -7px; }
.p90-toggle span::after { top: 7px; }

/* Mobile drawer */
.p90-mobile {
    display: none;
    position: fixed;
    top: calc(var(--header-height-mobile) + var(--rg-banner-height));
    right: 0; left: 0;
    background: var(--color-bg-elevated);
    border-top: var(--border-w) solid var(--color-border);
    padding: var(--space-md) var(--container-padding-mobile);
    max-height: calc(100vh - var(--header-height-mobile) - var(--rg-banner-height));
    overflow-y: auto;
}
.p90-mobile.is-open { display: block; }
.p90-mobile ul { list-style: none; padding: 0; margin: 0; }
.p90-mobile li { border-bottom: var(--border-w) solid var(--color-border); }
.p90-mobile a {
    display: block;
    padding: 14px 4px;
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: 500;
}
.p90-mobile a:hover { color: var(--color-primary); }
.p90-mobile-auth {
    margin-top: var(--space-md);
    display: block;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-bg);
    padding: 14px;
    border-radius: var(--radius-pill);
    font-weight: 700;
}
.p90-mobile-auth:hover { background: var(--color-accent); color: #fff; }

@media (max-width: 980px) {
    .p90-inner {
        grid-template-columns: auto 1fr auto;
        padding: 12px var(--container-padding-mobile);
        min-height: var(--header-height-mobile);
    }
    .p90-logo { grid-column: 1; justify-self: start; }
    .p90-logo img { height: 60px; }
    .p90.is-shrunk .p90-logo img { height: 56px; }
    .p90-left { display: none; }
    .p90-right { grid-column: 3; }
    .p90-right .p90-auth-btn { display: none; }
    .p90-toggle { display: inline-flex; grid-column: 3; }
    .p90-nav-row { display: none; }
}

/* ==========================================================================
   HERO-09 — Split content / image hero with diagonal accent
   ========================================================================== */
.v20 {
    position: relative;
    padding: var(--space-2xl) 0 var(--space-xl);
    overflow: hidden;
}
.v20::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, var(--color-gradient-mid) 0%, var(--color-gradient-light) 100%);
    z-index: -2;
}
.v20::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -8%;
    width: 60%;
    height: 130%;
    background: radial-gradient(ellipse at center, rgba(41, 254, 173, 0.10) 0%, transparent 70%);
    z-index: -1;
}
.v20-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}
.v20-content { position: relative; z-index: 2; }
.v20-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.v20-eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px; height: 2px;
    background: var(--color-primary);
}
.v20-title {
    font-size: clamp(2rem, 4.4vw, var(--fs-4xl));
    line-height: 1.08;
    margin-bottom: var(--space-md);
}
.v20-title span { color: var(--color-primary); }
.v20-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    max-width: 580px;
    margin-bottom: var(--space-lg);
}
.v20-actions {
    display: flex; gap: var(--space-sm); flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.v20-btn-primary, .v20-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px var(--space-lg);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.v20-btn-primary { background: var(--color-accent); color: #fff; }
.v20-btn-primary:hover { background: #ff7c52; color: #fff; transform: translateY(-2px); }
.v20-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.v20-btn-secondary:hover { background: var(--color-primary); color: var(--color-bg); }
.v20-meta {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.v20-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 30px 90px rgba(0,0,0,0.5);
}
.v20-image img { width: 100%; height: 100%; object-fit: cover; }
.v20-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(2,13,25,0.6) 100%);
}
@media (max-width: 980px) {
    .v20 { padding: var(--space-xl) 0 var(--space-lg); }
    .v20-inner { grid-template-columns: 1fr; gap: var(--space-lg); padding: 0 var(--container-padding-mobile); }
    .v20-image { aspect-ratio: 16 / 11; max-height: 380px; }
}

/* ==========================================================================
   PHEAD-07 — Page header for non-home pages (banner with accent line)
   ========================================================================== */
.u28 {
    padding: var(--space-xl) 0 var(--space-lg);
    background: linear-gradient(180deg, var(--color-gradient-mid) 0%, transparent 100%);
    border-bottom: var(--border-w) solid var(--color-border);
}
.u28-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.u28-eyebrow {
    color: var(--color-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    display: inline-block;
}
.u28-title {
    font-size: clamp(1.85rem, 3.6vw, var(--fs-3xl));
    margin-bottom: var(--space-sm);
}
.u28-meta {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-sm);
}
.u28-meta time { color: var(--color-primary); }
@media (max-width: 720px) {
    .u28 { padding: var(--space-lg) 0 var(--space-md); }
    .u28-inner { padding: 0 var(--container-padding-mobile); }
}

/* ==========================================================================
   BREAD-05 — Breadcrumbs (slim, top-anchored)
   ========================================================================== */
.j32 {
    padding: var(--space-md) 0 var(--space-2xs);
    background: var(--color-bg);
}
.j32-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.j32 ol {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
}
.j32 li { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.j32 li:not(:last-child)::after {
    content: '›';
    color: var(--color-text-muted);
    opacity: 0.6;
}
.j32 a { color: var(--color-text-muted); text-transform: uppercase; }
.j32 a:hover { color: var(--color-primary); }
.j32 [aria-current='page'] { color: var(--color-primary); text-transform: uppercase; }
@media (max-width: 720px) {
    .j32-inner { padding: 0 var(--container-padding-mobile); }
}

/* ==========================================================================
   PROSE-06 — Body content
   ========================================================================== */
.u43 {
    padding: var(--space-xl) 0;
}
.u43-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.u43-section { margin-bottom: var(--space-xl); }
.u43-section:last-child { margin-bottom: 0; }
.u43-section h2 {
    font-size: clamp(1.45rem, 2.4vw, var(--fs-2xl));
    margin-bottom: var(--space-md);
    position: relative;
    padding-left: var(--space-md);
}
.u43-section h2::before {
    content: '';
    position: absolute;
    left: 0; top: 0.18em;
    width: 4px; height: 0.8em;
    background: var(--color-primary);
    border-radius: 2px;
}
.u43-section h3 {
    font-size: var(--fs-lg);
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--color-primary);
}
.u43-section p {
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-sm);
    color: rgba(255,255,255,0.86);
}
.u43-section p:last-child { margin-bottom: 0; }
.u43-section a {
    color: var(--color-primary);
    border-bottom: 1px dotted currentColor;
}
.u43-section a:hover { color: var(--color-accent); }
.u43-section strong { color: var(--color-text); }
.u43-section em { color: var(--color-primary); font-style: normal; }
.u43-section ul, .u43-section ol {
    margin: var(--space-sm) 0 var(--space-sm) var(--space-md);
    line-height: var(--lh-loose);
}
.u43-section li { margin-bottom: var(--space-2xs); }
.u43-figure {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--border-w) solid var(--color-border);
}
.u43-figure img {
    width: 100%; height: auto; display: block;
}
.u43-figure figcaption {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
@media (max-width: 720px) {
    .u43-inner { padding: 0 var(--container-padding-mobile); }
    .u43 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   GRID-09 — Items grid (3-column card with accent bar)
   ========================================================================== */
.z77 {
    padding: var(--space-xl) 0;
    background: linear-gradient(180deg, transparent 0%, var(--color-gradient-mid) 100%);
}
.z77-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.z77-header {
    margin-bottom: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-xs);
}
.z77-title {
    font-size: clamp(1.6rem, 3vw, var(--fs-2xl));
}
.z77-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    max-width: 640px;
}
.z77-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
.z77-card {
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md) var(--space-md);
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-2xs);
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.z77-card::before {
    content: '';
    position: absolute;
    left: 0; top: var(--space-md); bottom: var(--space-md);
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}
.z77-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
}
.z77-card-num {
    color: var(--color-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.z77-card h3 { font-size: var(--fs-md); line-height: 1.3; }
.z77-card p {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}
@media (max-width: 980px) { .z77-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .z77-list { grid-template-columns: 1fr; }
    .z77-inner { padding: 0 var(--container-padding-mobile); }
    .z77 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   FAQ-03 — Accordion FAQ
   ========================================================================== */
.f14 {
    padding: var(--space-xl) 0;
}
.f14-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.f14-header {
    margin-bottom: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-xs);
}
.f14-title {
    font-size: clamp(1.6rem, 3vw, var(--fs-2xl));
}
.f14-subtitle {
    color: var(--color-text-muted);
    max-width: 640px;
}
.f14-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.f14-item {
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    overflow: hidden;
}
.f14-q {
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md);
    text-align: left;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out);
}
.f14-q:hover { background: rgba(41, 254, 173, 0.04); }
.f14-q::after {
    content: '+';
    color: var(--color-primary);
    font-size: 1.6rem;
    font-weight: 300;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out);
}
.f14-q[aria-expanded='true']::after { content: '−'; }
.f14-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-mid) var(--ease-out);
}
.f14-a-inner {
    padding: 0 var(--space-md) var(--space-md);
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
}
.f14-item.is-open .f14-a { max-height: 600px; }
@media (max-width: 720px) {
    .f14-inner { padding: 0 var(--container-padding-mobile); }
    .f14 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   REV-03 — Reviews (stacked cards w/ rating)
   ========================================================================== */
.i82 {
    padding: var(--space-xl) 0;
    background: var(--color-gradient-mid);
}
.i82-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.i82-header {
    margin-bottom: var(--space-lg);
    display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.i82-title {
    font-size: clamp(1.6rem, 3vw, var(--fs-2xl));
}
.i82-rating-summary {
    background: var(--color-bg-elevated);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: var(--border-w) solid var(--color-border);
    display: flex; align-items: center; gap: var(--space-sm);
    font-size: var(--fs-sm);
}
.i82-rating-summary strong { color: var(--color-primary); font-size: var(--fs-lg); }
.i82-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}
.i82-card {
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: var(--space-xs);
}
.i82-card-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--fs-sm);
}
.i82-author { font-weight: 700; color: var(--color-text); }
.i82-date { color: var(--color-text-muted); font-size: var(--fs-xs); }
.i82-stars {
    display: flex; gap: 2px;
    color: var(--color-primary);
    font-size: var(--fs-sm);
}
.i82-stars::before {
    content: attr(data-rating) ' / 5';
    margin-right: 6px;
    color: var(--color-primary);
    font-weight: 700;
}
.i82-text {
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
    font-size: var(--fs-sm);
}
@media (max-width: 720px) {
    .i82-list { grid-template-columns: 1fr; }
    .i82-inner { padding: 0 var(--container-padding-mobile); }
    .i82 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   CTA-10 — Full-width banner CTA
   ========================================================================== */
.u62 {
    padding: var(--space-xl) 0;
}
.u62-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.u62-banner {
    background: linear-gradient(120deg, var(--color-gradient-light) 0%, var(--color-bg-elevated) 100%);
    border: var(--border-w) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.u62-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(253, 103, 54, 0.16) 0%, transparent 60%);
    pointer-events: none;
}
.u62-title {
    font-size: clamp(1.6rem, 3vw, var(--fs-3xl));
    margin-bottom: var(--space-sm);
    position: relative;
}
.u62-text {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    max-width: 640px;
    margin: 0 auto var(--space-lg);
    position: relative;
}
.u62-button {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-accent);
    color: #fff;
    padding: 18px var(--space-xl);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.u62-button:hover {
    background: #ff7c52;
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 720px) {
    .u62-inner { padding: 0 var(--container-padding-mobile); }
    .u62-banner { padding: var(--space-lg) var(--space-md); }
    .u62 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   TABLE-04 — Data table
   ========================================================================== */
.u35 {
    padding: var(--space-lg) 0;
}
.u35-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.u35-scroll { overflow-x: auto; border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); }
.u35 table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-elevated);
}
.u35 th, .u35 td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: var(--border-w) solid var(--color-border);
    font-size: var(--fs-sm);
}
.u35 th {
    background: var(--color-gradient-mid);
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
}
.u35 tr:last-child td { border-bottom: none; }
.u35 tr:hover td { background: rgba(41, 254, 173, 0.04); }
@media (max-width: 720px) {
    .u35-inner { padding: 0 var(--container-padding-mobile); }
}

/* ==========================================================================
   LEGAL-05 — Legal page sections
   ========================================================================== */
.m88 {
    padding: var(--space-xl) 0;
}
.m88-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
    align-items: start;
}
.m88-main { display: flex; flex-direction: column; gap: var(--space-lg); }
.m88-intro {
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    line-height: var(--lh-loose);
    padding-bottom: var(--space-md);
    border-bottom: var(--border-w) solid var(--color-border);
}
.m88-section h2 {
    font-size: var(--fs-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}
.m88-section p {
    color: rgba(255,255,255,0.86);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-xs);
}
.m88-aside {
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--rg-banner-height) + 20px);
}
.m88-aside h3 {
    color: var(--color-accent);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}
.m88-aside ul { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.m88-aside li {
    padding: var(--space-2xs) 0;
    border-bottom: var(--border-w) solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.m88-aside li:last-child { border-bottom: none; }
.m88-disclaimer {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    border-top: var(--border-w) solid var(--color-border);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    font-style: italic;
}
.m88-updated {
    color: var(--color-accent);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md);
}
@media (max-width: 900px) {
    .m88-inner { grid-template-columns: 1fr; padding: 0 var(--container-padding-mobile); }
    .m88-aside { position: static; }
    .m88 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   FORM-02 — Contact form
   ========================================================================== */
.c76 {
    padding: var(--space-xl) 0;
}
.c76-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.c76-wrap {
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 760px;
    margin: 0 auto;
}
.c76-intro {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    line-height: var(--lh-loose);
}
.c76 form { display: grid; gap: var(--space-md); }
.c76-field { display: flex; flex-direction: column; gap: 6px; }
.c76-field label {
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.c76-field input, .c76-field textarea {
    background: var(--color-bg);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px var(--space-sm);
    color: var(--color-text);
    font-size: var(--fs-base);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.c76-field input:focus, .c76-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}
.c76-field textarea { resize: vertical; min-height: 140px; }
.c76-submit {
    background: var(--color-accent);
    color: #fff;
    padding: 16px var(--space-lg);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    justify-self: start;
}
.c76-submit:hover { background: #ff7c52; color: #fff; transform: translateY(-2px); }
.c76-success {
    display: none;
    background: rgba(41, 254, 173, 0.1);
    border: var(--border-w) solid var(--color-primary);
    color: var(--color-primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-top: var(--space-md);
}
.c76-success.is-visible { display: block; }
@media (max-width: 720px) {
    .c76-wrap { padding: var(--space-lg) var(--space-md); }
    .c76-inner { padding: 0 var(--container-padding-mobile); }
}

/* ==========================================================================
   AUTH-01 — Author card on /il-team/
   ========================================================================== */
.f11 {
    padding: var(--space-xl) 0;
}
.f11-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.f11-card {
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-lg);
    align-items: start;
}
.f11-portrait {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-primary);
}
.f11-portrait img { width: 100%; height: 100%; object-fit: cover; }
.f11-name {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-2xs);
}
.f11-role {
    color: var(--color-accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.f11-bio {
    color: rgba(255,255,255,0.86);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-md);
}
.f11-expertise-title {
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}
.f11-expertise {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-wrap: wrap;
    gap: var(--space-2xs);
}
.f11-expertise li {
    background: var(--color-bg);
    border: var(--border-w) solid var(--color-border);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}
@media (max-width: 720px) {
    .f11-inner { padding: 0 var(--container-padding-mobile); }
    .f11-card { grid-template-columns: 1fr; padding: var(--space-lg) var(--space-md); text-align: center; }
    .f11-portrait { margin: 0 auto; width: 160px; height: 160px; }
    .f11-expertise { justify-content: center; }
    .f11 { padding: var(--space-lg) 0; }
}

/* ==========================================================================
   BYLINE-02 — Author byline (compact, end-of-content)
   ========================================================================== */
.g10 {
    padding: var(--space-lg) 0;
    border-top: var(--border-w) solid var(--color-border);
    margin-top: var(--space-xl);
}
.g10-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.g10-card {
    display: flex; align-items: center; gap: var(--space-md);
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.g10-portrait {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-primary);
    flex-shrink: 0;
}
.g10-portrait img { width: 100%; height: 100%; object-fit: cover; }
.g10-text { flex: 1; min-width: 0; }
.g10-label {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.g10-name { font-size: var(--fs-md); font-weight: 700; }
.g10-name a { color: var(--color-text); }
.g10-name a:hover { color: var(--color-primary); }
.g10-role { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.g10-date { color: var(--color-primary); font-size: var(--fs-xs); letter-spacing: 0.06em; }
@media (max-width: 720px) {
    .g10-inner { padding: 0 var(--container-padding-mobile); }
}

/* ==========================================================================
   COOK-04 — Cookie banner (pill-style bottom)
   ========================================================================== */
.s35 {
    position: fixed;
    bottom: 18px;
    left: 18px;
    right: 18px;
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    z-index: 95;
    display: none;
}
.s35.is-visible { display: block; }
.s35-inner {
    display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
}
.s35-text {
    flex: 1; min-width: 220px;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}
.s35-actions { display: flex; gap: var(--space-2xs); }
.s35-button, .s35 button {
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.s35-accept {
    background: var(--color-primary);
    color: var(--color-bg);
}
.s35-accept:hover { background: var(--color-accent); color: #fff; }
.s35-decline {
    background: transparent;
    color: var(--color-text-muted);
    border: var(--border-w) solid var(--color-border);
}
.s35-decline:hover { color: var(--color-text); border-color: var(--color-text); background: transparent; }
@media (max-width: 720px) {
    .s35, .s35-inner {
        padding: 12px 14px !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .s35-title, .s35-heading { display: none !important; }
    .s35-button, .s35 button {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    .s35 { bottom: 12px; left: 12px; right: 12px; }
}

/* ==========================================================================
   ERR-06 — 404 page
   ========================================================================== */
.i77 {
    min-height: calc(100vh - var(--header-height-desktop) - var(--rg-banner-height) - 300px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-2xl) 0;
}
.i77-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    text-align: center;
}
.i77-code {
    font-size: clamp(5rem, 12vw, 10rem);
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.04em;
    margin-bottom: var(--space-md);
}
.i77-title {
    font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
    margin-bottom: var(--space-sm);
}
.i77-text {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    max-width: 540px;
    margin: 0 auto var(--space-lg);
    line-height: var(--lh-loose);
}
.i77-button {
    display: inline-flex;
    background: var(--color-accent);
    color: #fff;
    padding: 16px var(--space-xl);
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.i77-button:hover { background: #ff7c52; color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   FOOT-03 — 4-column footer with bottom legal strip
   ========================================================================== */
.f02 {
    background: var(--color-gradient-mid);
    border-top: var(--border-w) solid var(--color-border);
    padding: var(--space-2xl) 0 var(--space-md);
    margin-top: var(--space-2xl);
}
.f02-inner {
    max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
}
.f02-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}
.f02-brand img {
    height: 64px; width: auto;
    margin-bottom: var(--space-md);
}
.f02-brand p {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-md);
}
.f02-licenses {
    display: flex; flex-wrap: wrap; gap: var(--space-2xs);
}
.f02-license-badge {
    background: var(--color-bg-elevated);
    border: var(--border-w) solid var(--color-border);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}
.f02-col h4 {
    color: var(--color-primary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: var(--space-md);
}
.f02-col ul { list-style: none; padding: 0; margin: 0; }
.f02-col li { margin-bottom: var(--space-2xs); }
.f02-col a {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    transition: color var(--dur-fast) var(--ease-out);
}
.f02-col a:hover { color: var(--color-primary); }
.f02-bottom {
    border-top: var(--border-w) solid var(--color-border);
    padding-top: var(--space-md);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}
.f02-bottom-r {
    display: flex; align-items: center; gap: var(--space-md);
}
.f02-18 {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-weight: 800;
    font-size: var(--fs-xs);
    letter-spacing: -0.04em;
}
@media (max-width: 900px) {
    .f02-grid { grid-template-columns: repeat(2, 1fr); }
    .f02-brand { grid-column: span 2; }
}
@media (max-width: 600px) {
    .f02-grid { grid-template-columns: 1fr; }
    .f02-brand { grid-column: span 1; }
    .f02-inner { padding: 0 var(--container-padding-mobile); }
    .f02-bottom { flex-direction: column; text-align: center; }
}