/* ═══════════════════════════════════════════════════════════
   IONIK — ionik-styles.css
   Premium Digital Agency · Full Redesign
   Sections:
     Reset · Tokens · Base · Preloader · Cursor ·
     Sidebar · Mobile Drawer · Layout · Hero ·
     Services · About · Buttons · Contact · Form ·
     Footer · Responsive
═══════════════════════════════════════════════════════════ */


/* ─── RESET & TOKENS ─────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Palette */
    --c-bg:       #000000;
    --c-surface:  #080808;
    --c-border:   rgba(255,255,255,0.07);
    --c-text:     #ffffff;
    --c-muted:    rgba(255, 255, 255, 0.582);
    --c-faint:    rgba(255,255,255,0.10);
    --c-offwhite: #e8e8e0;

    /* Glows */
    --glow-sm: 0 0 10px rgba(255,255,255,0.40), 0 0 36px rgba(255,255,255,0.12);
    --glow-md: 0 0 18px rgba(255,255,255,0.55), 0 0 60px rgba(255,255,255,0.18), 0 0 110px rgba(255,255,255,0.06);

    /* Accent — white in dark mode, black in light mode */
    --c-teal:         rgba(255,255,255,0.88);
    --c-teal-dim:     rgba(255,255,255,0.40);
    --glow-teal-sm:   0 0 12px rgba(255,255,255,0.14);
    --glow-teal-md:   0 0 28px rgba(255,255,255,0.18), 0 0 60px rgba(255,255,255,0.06);

    /* Typography */
    --ff-display: 'Barlow Condensed', sans-serif;
    --ff-body:    'Space Grotesk', sans-serif;

    /* Easing */
    --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-circ:   cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --sidebar-w: 220px;
    --max-w:     980px;
    --section-pad: 120px;
}

html { font-size: 16px; overflow-x: hidden; overflow-anchor: none; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-body);
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
    cursor: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; }

a       { color: inherit; text-decoration: none; }
ul      { list-style: none; }
img,svg { display: block; max-width: 100%; }
button  { cursor: none; background: none; border: none; font: inherit; }
textarea { font: inherit; }

/* ─── 3D GEAR BACKGROUND CANVAS ────────────────────────────
   z-index: -1  →  above body background, below all page content.
   pointer-events: none  →  clicks pass through to the page.
──────────────────────────────────────────────────────────── */
#gearCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* ── Scroll-exit veil ──
   Fixed overlay at viewport top. Opacity driven by JS (0 at rest,
   1 once scrolled). Blurs + fades content as it exits the top. */
.scroll-exit-veil {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 220px;
    z-index: 900;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom,
        rgba(2,2,2,1)   0%,
        rgba(2,2,2,0.55) 45%,
        rgba(2,2,2,0)   100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
}
body[data-theme="light"] .scroll-exit-veil {
    background: linear-gradient(to bottom,
        rgba(245,245,242,1)   0%,
        rgba(245,245,242,0.55) 45%,
        rgba(245,245,242,0)   100%);
}

/* Subtle film-grain overlay via SVG filter */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* Thin scrollbar */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Touch devices — restore cursor */
@media (hover: none) {
    body, button, a { cursor: auto; }
}


/* ─── PRELOADER ──────────────────────────────────────────── */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pre-scanline {
    position: absolute;
    top: -2px; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.4) 35%,
        rgba(255,255,255,1)   50%,
        rgba(255,255,255,0.4) 65%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(255,255,255,0.5);
    animation: scanDrop 1.1s var(--ease-expo) 0.1s both;
    z-index: 2;
    pointer-events: none;
}
@keyframes scanDrop {
    0%   { top: -2px;   opacity: 0; }
    8%   {              opacity: 1; }
    92%  {              opacity: 0.4; }
    100% { top: 100vh;  opacity: 0; }
}

.pre-rays {
    position: absolute;
    width: 860px; height: 860px;
    max-width: 130vw; max-height: 130vw;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: raysReveal 2.2s ease-out 0.9s forwards;
}
.pre-rays::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,   rgba(255,255,255,0.055) 4deg,  transparent 8deg,
        transparent 22deg,  rgba(255,255,255,0.040) 26deg, transparent 30deg,
        transparent 44deg,  rgba(255,255,255,0.072) 48deg, transparent 52deg,
        transparent 65deg,  rgba(255,255,255,0.045) 69deg, transparent 73deg,
        transparent 88deg,  rgba(255,255,255,0.060) 92deg, transparent 96deg,
        transparent 110deg, rgba(255,255,255,0.038) 114deg,transparent 118deg,
        transparent 130deg, rgba(255,255,255,0.055) 134deg,transparent 138deg,
        transparent 150deg, rgba(255,255,255,0.042) 154deg,transparent 158deg,
        transparent 172deg, rgba(255,255,255,0.068) 176deg,transparent 180deg,
        transparent 192deg, rgba(255,255,255,0.050) 196deg,transparent 200deg,
        transparent 212deg, rgba(255,255,255,0.038) 216deg,transparent 220deg,
        transparent 232deg, rgba(255,255,255,0.062) 236deg,transparent 240deg,
        transparent 252deg, rgba(255,255,255,0.044) 256deg,transparent 260deg,
        transparent 272deg, rgba(255,255,255,0.058) 276deg,transparent 280deg,
        transparent 292deg, rgba(255,255,255,0.040) 296deg,transparent 300deg,
        transparent 312deg, rgba(255,255,255,0.055) 316deg,transparent 320deg,
        transparent 332deg, rgba(255,255,255,0.070) 336deg,transparent 340deg,
        transparent 352deg, rgba(255,255,255,0.042) 356deg,transparent 360deg
    );
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 62%);
    mask-image:         radial-gradient(circle, black 0%, transparent 62%);
}
@keyframes raysReveal {
    0%   { opacity: 0; transform: scale(0.65) rotate(-8deg); }
    40%  { opacity: 1; }
    100% { opacity: 0.88; transform: scale(1) rotate(0deg); }
}

.pre-glow {
    position: absolute;
    width: 320px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 150, 0.18) 0%,
        rgba(255, 255, 255, 0.10) 35%,
        transparent 70%
    );
    opacity: 0;
    pointer-events: none;
    animation: glowReveal 2.0s ease-out 0.95s forwards;
}
@keyframes glowReveal {
    0%   { opacity: 0; transform: scale(0.5); }
    45%  { opacity: 1; }
    100% { opacity: 0.82; transform: scale(1); }
}

.pre-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pre-logo-img {
    width: min(340px, 60vw);
    height: auto;
    display: block;
    opacity: 0;
    filter: blur(14px) brightness(2.5) drop-shadow(0 0 40px rgba(255,255,255,0.9));
    animation: logoImgReveal 1.1s var(--ease-expo) 0.65s forwards;
}
@keyframes logoImgReveal {
    0%   { opacity: 0; transform: scale(0.92) translateY(8px);  filter: blur(14px) brightness(2.5) drop-shadow(0 0 40px rgba(255,255,255,0.9)); }
    55%  { opacity: 1; transform: scale(1.025) translateY(-3px);filter: blur(0) brightness(1.15) drop-shadow(0 0 18px rgba(255,255,255,0.65)) drop-shadow(0 0 55px rgba(255,255,255,0.22)); }
    100% { opacity: 1; transform: scale(1) translateY(0);       filter: brightness(1) drop-shadow(0 0 10px rgba(255,255,255,0.40)) drop-shadow(0 0 32px rgba(255,255,255,0.14)); }
}
.pre-logo-img.breathing {
    opacity: 1;
    animation: logoBreath 2.8s ease-in-out infinite !important;
}
@keyframes logoBreath {
    0%, 100% { filter: brightness(1)    drop-shadow(0 0 8px  rgba(255,255,255,0.32)) drop-shadow(0 0 28px rgba(255,255,255,0.12)); }
    50%       { filter: brightness(1.08) drop-shadow(0 0 16px rgba(255,255,255,0.62)) drop-shadow(0 0 52px rgba(255,255,255,0.22)) drop-shadow(0 0 90px rgba(255,255,255,0.07)); }
}

.pre-logo-img.mega-glitch {
    opacity: 1;
    animation: preLogoMegaGlitch 0.22s steps(1) forwards !important;
}
@keyframes preLogoMegaGlitch {
    0%   { transform: none;                            filter: brightness(1.5) drop-shadow(0 0 20px rgba(255,255,255,0.9)); }
    10%  { transform: translateX(-9px) skewX(-3deg) scaleY(1.02); filter: drop-shadow(-9px 0 0 rgba(255,0,80,1))  drop-shadow(8px 0 0 rgba(0,255,200,0.9)) brightness(2.2); }
    22%  { transform: translateX(9px)  skewX(3deg);   filter: drop-shadow(8px 0 0 rgba(255,0,80,0.9))  drop-shadow(-8px 0 0 rgba(0,255,200,0.8)) brightness(2); }
    35%  { transform: translateX(-6px) scaleX(1.03);  filter: drop-shadow(-6px 0 0 rgba(255,0,80,0.8)) drop-shadow(5px 0 0 rgba(0,200,255,0.7)) brightness(2.5); }
    48%  { transform: translateX(7px)  skewX(-2deg);  filter: drop-shadow(7px 0 0 rgba(255,0,80,1))    drop-shadow(-5px 0 0 rgba(0,255,200,0.8)) brightness(1.8); }
    62%  { transform: translateX(-5px);               filter: drop-shadow(-7px 0 0 rgba(255,0,80,0.6)) drop-shadow(5px 0 0 rgba(0,255,200,0.5)) brightness(3); }
    78%  { transform: translateX(4px)  scaleX(0.98);  filter: drop-shadow(4px 0 0 rgba(255,60,60,0.7)) drop-shadow(-4px 0 0 rgba(60,255,220,0.7)) brightness(2.2); }
    92%  { transform: scale(1.02);                    filter: brightness(4.5) blur(1px); }
    100% { transform: scale(0.95);                    filter: brightness(5) blur(3px); }
}

.pre-tagline {
    font-family: var(--ff-body);
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 300;
    letter-spacing: 0.5em;
    color: rgba(255,255,255,0.35);
    opacity: 0;
    transform: translateY(8px);
    animation: fadeSlide 0.7s var(--ease-expo) 1.25s both;
}
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pre-streak {
    position: absolute;
    top: 50%; left: -70%;
    width: 55%; height: 160px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,0.015) 30%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.015) 70%, transparent 100%
    );
    transform: translateY(-50%) skewX(-18deg);
    animation: streakPass 0.55s ease-out 1.55s both;
    z-index: 2;
    pointer-events: none;
}
@keyframes streakPass {
    0%   { left: -70%; opacity: 0; }
    15%  {              opacity: 1; }
    85%  {              opacity: 0.8; }
    100% { left: 115%;  opacity: 0; }
}

/* ── Glass shatter exit ── */

/* Hide logo+tagline instantly when exit starts */
.preloader.is-leaving .pre-body { opacity: 0; transition: none; }

/* Full preloader fades out after shards have flown */
.preloader.is-leaving {
    animation: preloaderFadeOut 0.45s ease-out 0.68s forwards;
    pointer-events: none;
}
@keyframes preloaderFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Individual shard — position:fixed, clip-path, size set inline by JS; appended to body */
.pre-shard {
    will-change: transform, opacity;
}
.pre-shard.exploding {
    animation: shardFly var(--shard-dur, 0.85s) var(--ease-expo) var(--shard-delay, 0ms) forwards;
}
@keyframes shardFly {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1);
                       filter: brightness(2.0) drop-shadow(0 0 12px rgba(255,255,255,0.9)); }
    18%  {             filter: brightness(2.5) drop-shadow(0 0 18px rgba(255,255,255,1)); }
    60%  {             filter: brightness(1.2) drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
    100% { opacity: 1; transform: translate(var(--shard-tx,0px), var(--shard-ty,-100px))
                                  rotate(var(--shard-rot,45deg))
                                  scale(var(--shard-sc,0.2));
                       filter: brightness(1.0) drop-shadow(0 0 4px rgba(255,255,255,0.2)); }
}

/* Shockwave ring */
.pre-shockwave {
    position: absolute;
    top: 50%; left: 50%;
    width: 90px; height: 46px;
    margin-left: -45px; margin-top: -23px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.75);
    box-shadow: 0 0 18px rgba(255,255,255,0.55), inset 0 0 10px rgba(255,255,255,0.2);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 7;
}
.preloader.is-leaving .pre-shockwave {
    animation: shockwave 0.88s var(--ease-expo) 0.06s forwards;
}
@keyframes shockwave {
    0%   { transform: scale(0); opacity: 1; }
    20%  { opacity: 0.85; }
    100% { transform: scale(10); opacity: 0; }
}

/* Central flash burst */
.pre-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(255,255,255,1)   0%,
        rgba(255,255,255,0.5) 22%,
        transparent           62%
    );
    transform: scale(0.08);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}
.preloader.is-leaving .pre-flash {
    animation: flashBurst 0.6s var(--ease-expo) 0.04s forwards;
}
@keyframes flashBurst {
    0%   { transform: scale(0.08); opacity: 0; }
    10%  { opacity: 1; }
    32%  { transform: scale(1.1);  opacity: 0.95; }
    100% { transform: scale(2.8);  opacity: 0; }
}

.preloader.is-gone { display: none; }


/* ─── CURSOR ─────────────────────────────────────────────── */

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    transform: translate(-200px, -200px);
}

/* Small dot — difference blend inverts backgrounds for a cool effect,
   but disabled while hovering interactive elements to keep them readable */
.cursor-dot {
    width: 8px; height: 8px;
    background: #ffffff;
    mix-blend-mode: difference;
    transition: opacity 0.3s ease, transform 0.06s linear;
}
/* Drop the invert on hover so buttons / links stay readable */
.cursor-dot.hov {
    mix-blend-mode: normal;
    background: var(--c-teal);
    opacity: 1;
}

/* Ring: neon white glow, no blend mode (stays visible) */
.cursor-ring {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(255,255,255,0.60);
    background: rgba(255,255,255,0.02);
    box-shadow:
        0 0  8px rgba(255,255,255,0.30),
        0 0 18px rgba(255,255,255,0.10),
        inset 0 0 6px rgba(255,255,255,0.03);
    transition:
        width   0.28s var(--ease-expo),
        height  0.28s var(--ease-expo),
        border  0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease,
        opacity 0.3s ease;
}

/* Hover state */
.cursor-ring.hov {
    width: 54px; height: 54px;
    border-color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.03);
    box-shadow:
        0 0 14px rgba(255,255,255,0.55),
        0 0 30px rgba(255,255,255,0.20),
        0 0 50px rgba(255,255,255,0.08),
        inset 0 0 10px rgba(255,255,255,0.05);
}

/* Click */
.cursor-ring.click {
    width: 22px; height: 22px;
    background: rgba(255,255,255,0.12);
}

/* .cursor-dot.hov — handled above (mix-blend switched to teal dot) */

@media (hover: none) {
    .cursor-dot, .cursor-ring { display: none; }
}

/* ── Touch scroll-driven "hover" effects ──────────────────
   On touch devices there is no cursor hover. Instead, the
   same visual effects fire when elements scroll into view
   (.in-view class added by IntersectionObserver). */
@media (hover: none) {

    /* Service cards */
    .scard.in-view {
        background: rgba(255,255,255,0.032);
        border-color: rgba(255,255,255,0.13);
    }
    .scard.in-view .scard__num {
        color: var(--c-teal);
        text-shadow: 0 0 32px rgba(255,255,255,0.12);
    }
    .scard.in-view .scard__title   { color: var(--c-text); }
    .scard.in-view .scard__desc    { color: rgba(255,255,255,0.58); }
    .scard.in-view .scard__arrow   { color: rgba(255,255,255,0.7); transform: translate(3px,-3px); }
    .scard.in-view .scard__glow-line { transform: scaleX(1); }

    /* How-step cards */
    .how-step.in-view {
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.03);
    }
    .how-step.in-view .how-step__num  {
        color: var(--c-teal);
        text-shadow: 0 0 40px rgba(255,255,255,0.12);
    }
    .how-step.in-view .how-step__line { transform: scaleX(1); }

    /* Light mode overrides */
    body[data-theme="light"] .scard.in-view {
        background: rgba(0,0,0,0.034);
        border-color: rgba(0,0,0,0.14);
    }
    body[data-theme="light"] .scard.in-view .scard__num  { color: rgba(0,0,0,0.70); text-shadow: none; }
    body[data-theme="light"] .scard.in-view .scard__title { color: #0d0d0d; }
    body[data-theme="light"] .scard.in-view .scard__desc  { color: rgba(0,0,0,0.76); }
    body[data-theme="light"] .scard.in-view .scard__arrow { color: rgba(0,0,0,0.70); }
    body[data-theme="light"] .scard.in-view .scard__glow-line {
        background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18), transparent);
    }
    body[data-theme="light"] .how-step.in-view {
        border-color: rgba(0,0,0,0.18);
        background: rgba(0,0,0,0.03);
    }
    body[data-theme="light"] .how-step.in-view .how-step__num { color: rgba(0,0,0,0.70); text-shadow: none; }
}


/* ─── SIDEBAR ────────────────────────────────────────────── */

.sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: rgba(2, 2, 2, 0.88);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 36px 0 32px;
    transition: transform 0.42s var(--ease-expo);
}

/* Sidebar logo */
.sidebar__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px 26px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 10px;
    line-height: 0;
}

.sidebar__logo-img {
    width: min(138px, calc(var(--sidebar-w) - 48px));
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity   0.85s var(--ease-expo),
        transform 0.85s var(--ease-expo),
        filter    0.3s ease;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.18));
}

body.content-ready .sidebar__logo-img {
    opacity: 0.82;
    transform: translateY(0);
}

/* Fallback for when the preloader/shard animation is skipped
   entirely (e.g. navigating back from kth.html) — without this,
   .mobile-logo would stay at opacity:0 since only the reassembly
   animation normally reveals it. */
body.content-ready .mobile-logo {
    opacity: 0.82;
    transform: translateY(0);
}

.sidebar__logo-img.breathing {
    animation: sidebarLogoBreath 3.2s ease-in-out infinite;
}
@keyframes sidebarLogoBreath {
    0%, 100% {
        filter:  drop-shadow(0 0 6px  rgba(255,255,255,0.28))
                 drop-shadow(0 0 22px rgba(255,255,255,0.10));
        opacity: 0.82;
    }
    50% {
        filter:  drop-shadow(0 0 13px rgba(255,255,255,0.58))
                 drop-shadow(0 0 42px rgba(255,255,255,0.18))
                 drop-shadow(0 0 72px rgba(255,255,255,0.06));
        opacity: 0.96;
    }
}

.sidebar__logo-img.glitch {
    animation: sidebarLogoGlitch 0.5s steps(1) forwards !important;
}
@keyframes sidebarLogoGlitch {
    0%   { transform: none;                          filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); }
    8%   { transform: translateX(-4px) skewX(-1.5deg); filter: drop-shadow(-5px 0 0 rgba(255,0,80,0.9))  drop-shadow(5px 0 0 rgba(0,255,200,0.7)); }
    18%  { transform: translateX(4px)  scaleX(1.01);   filter: drop-shadow(4px 0 0 rgba(255,0,80,0.7))   drop-shadow(-4px 0 0 rgba(0,255,200,0.6)); }
    28%  { transform: translateX(-2px);                filter: drop-shadow(-2px 0 0 rgba(255,0,80,0.5))  drop-shadow(2px 0 0 rgba(0,255,200,0.5)); }
    38%  { transform: translateX(3px)  skewX(1deg);    filter: drop-shadow(3px 0 0 rgba(255,0,80,0.4))   drop-shadow(-3px 0 0 rgba(0,255,200,0.4)); }
    48%  { transform: none;                            filter: drop-shadow(0 0 12px rgba(255,255,255,0.5)); }
    60%  { transform: translateX(-1px);                filter: drop-shadow(-2px 0 0 rgba(255,0,80,0.3))  drop-shadow(2px 0 0 rgba(0,255,200,0.3)); }
    72%  { transform: translateX(1px);                 filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)); }
    85%  { transform: none;                            filter: drop-shadow(0 0 10px rgba(255,255,255,0.35)); }
    100% { transform: none;                            filter: drop-shadow(0 0 6px rgba(255,255,255,0.28)) drop-shadow(0 0 22px rgba(255,255,255,0.10)); }
}

/* Scroll progress track (right edge of sidebar) */
.sidebar__track {
    position: absolute;
    right: 0; top: 100px; bottom: 80px;
    width: 1px;
    background: rgba(255,255,255,0.05);
}
.sidebar__fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: height 0.15s linear;
}

/* Nav — scrolls internally so the bottom CTA/email stay pinned
   and reachable even when the "IONIK Web" sub-menu is expanded
   and the list grows taller than the sidebar's fixed height
   (this was previously pushing the CTA off-screen on mobile). */
.sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
}
.sidebar__nav ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Nav link */
.sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 28px;
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.30);
    position: relative;
    transition: color 0.28s ease, padding-left 0.28s var(--ease-expo);
}

/* Left accent bar */
.sidebar__link-bar {
    display: block;
    width: 1.5px;
    height: 0;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent);
    border-radius: 1px;
    flex-shrink: 0;
    transition: height 0.3s var(--ease-expo);
}

.sidebar__link:hover,
.sidebar__link.active {
    color: rgba(255,255,255,0.88);
    padding-left: 36px;
}
.sidebar__link:hover .sidebar__link-bar,
.sidebar__link.active .sidebar__link-bar {
    height: 16px;
}
.sidebar__link.active {
    color: var(--c-text);
}
.sidebar__link.active .sidebar__link-bar {
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.95), transparent);
    height: 18px;
}

/* Bottom section */
.sidebar__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 28px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.sidebar__cta {
    font-family: var(--ff-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-bg);
    background: rgba(255,255,255,0.92);
    padding: 9px 18px;
    border-radius: 100px;
    white-space: nowrap;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s var(--ease-spring);
}
.sidebar__cta:hover {
    background: var(--c-text);
    box-shadow: 0 0 16px rgba(255,255,255,0.20);
    transform: scale(1.04);
}

.sidebar__email {
    font-size: 9.5px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.22);
    transition: color 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sidebar__email:hover { color: rgba(255,255,255,0.55); }


/* ─── MOBILE TOGGLE & DRAWER ─────────────────────────────── */

.s-toggle {
    display: none;
    position: fixed;
    top: 18px; left: 18px;
    z-index: 1100;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: background 0.3s ease;
}
.s-toggle span {
    display: block;
    width: 20px; height: 1.5px;
    background: var(--c-text);
    border-radius: 1px;
    transform-origin: center;
    transition: transform 0.35s var(--ease-expo), opacity 0.3s ease, width 0.3s ease;
}
.s-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.s-toggle.open span:nth-child(2) { opacity: 0; width: 10px; }
.s-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile backdrop */
.s-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.s-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Mobile top logo — reassembly target for the preloader shard
   animation when the sidebar (and its logo) is off-canvas.
   Hidden on desktop where the sidebar logo is always visible. */
.mobile-logo {
    display: none;
    position: fixed;
    top: 16px;
    left: 50%;
    margin-left: -46px; /* half of width — transform is reserved for the reveal animation */
    transform: translateY(10px);
    width: 92px;
    height: auto;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.18));
}

@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0,0,0,0.6);
    }
    .s-toggle      { display: flex; }
    .s-overlay     { display: block; }
    .mobile-logo   { display: block; }
    .sidebar__logo-wrap { display: none; }
}


/* ─── LAYOUT ─────────────────────────────────────────────── */

.main-wrap {
    margin-left: var(--sidebar-w);
}

@media (max-width: 860px) {
    .main-wrap { margin-left: 0; }
}

.section-wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 48px;
}
@media (max-width: 600px) {
    .section-wrap { padding: 0 24px; }
}


/* ─── SHARED SECTION TYPOGRAPHY ─────────────────────────── */

.eyebrow {
    font-family: var(--ff-body);
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 0.46em;
    color: var(--c-muted);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--ff-display);
    font-size: clamp(52px, 8.5vw, 96px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.92;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.section-lead {
    font-size: 15px;
    font-weight: 300;
    color: var(--c-muted);
    line-height: 1.75;
    max-width: 400px;
    margin-bottom: 4.5rem;
}

.section-header {
    margin-bottom: 0;
}

.stroke-text {
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.52);
    color: transparent;
}


/* ─── HERO ───────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vmin, 80px) 48px;
    text-align: center;
    overflow: hidden;
}

/* Radial dot grid background */
.hero__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 25%, transparent 100%);
    mask-image:         radial-gradient(ellipse 80% 80% at 50% 50%, black 25%, transparent 100%);
    pointer-events: none;
}

/* Icon watermark background */
.hero__icon-bg {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
@media (max-width: 860px) {
    .hero__icon-bg { left: 0; }
}
.hero__icon-bg-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    opacity: 0.22;
}
.hero__icon-bg-img--light { display: none; }
body[data-theme="light"] .hero__icon-bg-img--dark  { display: none; }
body[data-theme="light"] .hero__icon-bg-img--light { display: block; }

/* Hero content */
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
}

.hero__eyebrow {
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.42em;
    color: var(--c-muted);
    margin-bottom: clamp(12px, 3vmin, 32px);
}

.hero__title {
    font-family: var(--ff-display);
    font-size: clamp(36px, 9vmin, 92px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.96;
    text-transform: uppercase;
    margin-bottom: clamp(12px, 3vmin, 40px);
    white-space: nowrap;
}
.hero__title span { display: block; }

.hero__sub {
    font-size: clamp(13px, 1.6vmin, 16.5px);
    font-weight: 300;
    color: var(--c-muted);
    max-width: 500px;
    margin: 0 auto clamp(16px, 3.5vmin, 48px);
    line-height: 1.75;
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: clamp(16px, 3vmin, 40px);
}

.hero__foot {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.03em;
}
.hero__email {
    color: var(--c-text);
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    transition: border-color 0.25s ease;
}
.hero__email:hover { border-color: var(--c-text); }

/* Hero entrance animations */
.hero__eyebrow,
.hero__title span,
.hero__sub,
.hero__actions,
.hero__foot {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--ease-expo), transform 0.85s var(--ease-expo);
}
body.content-ready .hero__eyebrow              { opacity: 1; transform: none; transition-delay: 0.06s; }
body.content-ready .hero__title span:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.14s; }
body.content-ready .hero__title span:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.22s; }
body.content-ready .hero__sub                  { opacity: 1; transform: none; transition-delay: 0.38s; }
body.content-ready .hero__actions              { opacity: 1; transform: none; transition-delay: 0.46s; }
body.content-ready .hero__foot                 { opacity: 1; transform: none; transition-delay: 0.54s; }


/* ─── BUTTONS ────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 15px 34px;
    position: relative;
    overflow: hidden;
    transition: color 0.3s var(--ease-expo);
}

.btn-fill {
    background: var(--c-text);
    color: var(--c-bg);
    border: 1px solid var(--c-text);
}
.btn-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--c-bg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-expo);
}
.btn-fill:hover::before { transform: scaleX(1); }
.btn-fill:hover         { color: #ffffff; }
.btn-fill .btn-label    { position: relative; z-index: 1; }

.btn-ghost {
    color: var(--c-muted);
    padding-left: 0;
    padding-right: 0;
}
.btn-ghost:hover { color: #ffffff; }

.btn-arrow {
    font-size: 17px;
    transition: transform 0.3s var(--ease-expo);
}
.btn-ghost:hover .btn-arrow { transform: translateX(5px); }

.btn-send {
    background: var(--c-text);
    color: var(--c-bg);
    font-family: var(--ff-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 17px 44px;
    border-radius: 100px;
    border: 1px solid var(--c-text);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: color 0.3s var(--ease-expo);
}
.btn-send::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-bg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-expo);
    z-index: 0;
}
.btn-send:hover::before { transform: scaleX(1); }
.btn-send:hover         { color: var(--c-text); }
.btn-label, .btn-sending, .btn-ico { position: relative; z-index: 1; }
.btn-sending                        { display: none; }
.btn-send.loading .btn-label        { display: none; }
.btn-send.loading .btn-ico          { display: none; }
.btn-send.loading .btn-sending      { display: inline; }
.btn-send:disabled                  { opacity: 0.55; pointer-events: none; }


/* ─── SERVICES ───────────────────────────────────────────── */

.services {
    padding: var(--section-pad) 0;
    position: relative;
}
.services::before {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--c-border);
}
@media (max-width: 800px) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .services__grid { grid-template-columns: 1fr; }
}

/* Service card */
.scard {
    position: relative;
    padding: 2.5rem 2rem 2rem;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--c-border);
    margin: -1px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Entrance: hidden by default, revealed by JS IntersectionObserver */
    opacity: 0;
    transform: translateY(28px);
    /* Hover transition (fast) — entrance transition applied inline by JS */
    transition: background 0.35s ease, border-color 0.35s ease;
}
.scard.in-view {
    opacity: 1;
    transform: none;
    /* hover only once in-view */
}
.scard.in-view:hover {
    background: rgba(255,255,255,0.032);
    border-color: rgba(255,255,255,0.13);
    transform: translateY(-4px);
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s var(--ease-expo);
}

/* Ghost number */
.scard__num {
    display: block;
    font-family: var(--ff-display);
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255,255,255,0.04);
    letter-spacing: -0.02em;
    position: absolute;
    top: 1rem; right: 1.2rem;
    transition: color 0.35s ease;
    pointer-events: none;
    user-select: none;
}
.scard.in-view:hover .scard__num {
    color: var(--c-teal);
    text-shadow: 0 0 32px rgba(255,255,255,0.12);
}

/* Card content */
.scard__body {
    flex: 1;
    padding-top: 0.25rem;
}
.scard__title {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    margin-bottom: 1rem;
    transition: color 0.25s ease;
}
.scard.in-view:hover .scard__title { color: var(--c-text); }

.scard__desc {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.40);
    line-height: 1.7;
    transition: color 0.3s ease;
}
.scard.in-view:hover .scard__desc { color: rgba(255,255,255,0.58); }

/* Arrow icon */
.scard__arrow {
    display: block;
    font-size: 18px;
    color: rgba(255,255,255,0.22);
    margin-top: 1.5rem;
    align-self: flex-end;
    transition: transform 0.3s var(--ease-expo), color 0.3s ease;
}
.scard.in-view:hover .scard__arrow {
    transform: translate(3px, -3px);
    color: rgba(255,255,255,0.7);
}

/* Bottom glow line */
.scard__glow-line {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-expo);
}
.scard.in-view:hover .scard__glow-line { transform: scaleX(1); }


/* ─── ABOUT ──────────────────────────────────────────────── */

.about {
    padding: var(--section-pad) 0;
    position: relative;
}
.about::before {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 6rem;
    align-items: start;
}
@media (max-width: 860px) {
    .about__grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

.about__body {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255,255,255,0.52);
    line-height: 1.8;
    max-width: 520px;
    margin-bottom: 1.25rem;
}

.about__cta {
    margin-top: 2rem;
}

/* Stats grid */
.about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--c-border);
}

.stat {
    padding: 2rem 1.8rem;
    border: 1px solid var(--c-border);
    margin: -1px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.stat:hover {
    background: rgba(255,255,255,0.025);
}
.stat::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-expo);
}
.stat:hover::before { transform: scaleX(1); }

.stat__num {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(42px, 5vw, 58px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.stat__sup {
    font-size: 0.40em;
    vertical-align: super;
    letter-spacing: 0;
    color: var(--c-muted);
}
/* Prefix variant (#, $, etc.) — align to top rather than super */
.stat__sup--pre {
    vertical-align: top;
    line-height: 1.4;
}
.stat__label {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}


/* ─── CONTACT ────────────────────────────────────────────── */

.contact {
    padding: var(--section-pad) 0;
    position: relative;
}
.contact::before {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}

.contact__body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 5rem;
    align-items: start;
}
@media (max-width: 860px) {
    .contact__body { grid-template-columns: 1fr; gap: 3.5rem; }
    .cinfo { order: -1; }
}


/* ─── FORM ───────────────────────────────────────────────── */

.cform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
    position: relative;
}
@media (max-width: 560px) {
    .cform { grid-template-columns: 1fr; }
}

.field { position: relative; }
.field--wide { grid-column: 1 / -1; }

.field__input {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    color: var(--c-text);
    font-family: var(--ff-body);
    font-size: 15px;
    font-weight: 400;
    padding: 14px 0 10px;
    outline: none;
    appearance: none;
    resize: none;
    transition: border-color 0.3s ease;
    caret-color: var(--c-text);
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset;
    -webkit-text-fill-color: var(--c-text);
    caret-color: var(--c-text);
}
.field__textarea { min-height: 96px; line-height: 1.6; overflow: hidden; }

/* Select variant */
.field--select { padding-bottom: 2px; }
.field--select select.field__input {
    cursor: pointer;
    padding-right: 22px;
    background-color: transparent;
    color: var(--c-text);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
}
select.field__input option {
    background: #0d0d0d;
    color: #ffffff;
}
.field--select::after {
    content: '▾';
    position: absolute;
    right: 0; bottom: 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.32);
    pointer-events: none;
    transition: color 0.26s ease;
}
.field--select:focus-within::after { color: rgba(255,255,255,0.72); }
select.field__input:not(:invalid) ~ .field__label,
select.field__input:focus ~ .field__label {
    top: -6px;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.52);
    text-transform: uppercase;
}

.field__label {
    position: absolute;
    top: 14px; left: 0;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.35);
    pointer-events: none;
    transition: top 0.26s var(--ease-expo), font-size 0.26s var(--ease-expo), letter-spacing 0.26s var(--ease-expo), color 0.26s ease;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
    top: -6px;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.52);
    text-transform: uppercase;
}

.field__bar {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1.5px;
    background: var(--c-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.38s var(--ease-expo);
    pointer-events: none;
}
.field__input:focus ~ .field__label ~ .field__bar,
.field__input:focus ~ .field__bar { transform: scaleX(1); }

.field__err {
    position: absolute;
    bottom: -22px; left: 0;
    font-size: 10.5px;
    color: rgba(255,75,75,0.85);
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    white-space: nowrap;
}
.field.invalid .field__err        { opacity: 1; transform: translateY(0); }
.field.invalid .field__input      { border-bottom-color: rgba(255,75,75,0.45); }
.field.invalid .field__bar        { background: rgba(255,75,75,0.7); }

.cform__row { grid-column: 1 / -1; padding-top: 0.5rem; }

.cform__success,
.cform__fail {
    grid-column: 1 / -1;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
}
.cform__success[hidden], .cform__fail[hidden] { display: none; }

.success-ring {
    width: 52px; height: 52px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: rgba(255,255,255,0.7);
    margin: 0 auto 1.5rem;
}
.success-head {
    font-family: var(--ff-display);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.success-body, .cform__fail p {
    font-size: 14px;
    font-weight: 300;
    color: var(--c-muted);
}
.cform__fail a { color: var(--c-text); border-bottom: 1px solid rgba(255,255,255,0.22); }


/* ─── CONTACT INFO ───────────────────────────────────────── */

.cinfo {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 4px;
}
.cinfo__list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}
.cinfo__label {
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 6px;
}
.cinfo__val {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    transition: color 0.22s ease;
}
a.cinfo__val:hover { color: var(--c-text); }

.cinfo__deco {
    font-family: var(--ff-display);
    font-size: clamp(56px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.05);
    user-select: none;
    pointer-events: none;
}


/* ─── FOOTER ─────────────────────────────────────────────── */

.footer {
    padding: 36px 48px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
@media (max-width: 600px) {
    .footer { padding: 32px 24px; }
}

.footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer__brand {
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
}
.footer__links {
    display: flex;
    gap: 2rem;
}
.footer__links a {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    transition: color 0.22s ease;
}
.footer__links a:hover { color: rgba(255,255,255,0.6); }
.footer__copy {
    font-size: 11.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.18);
}
@media (max-width: 600px) {
    .footer__links { display: none; }
}


/* ─── SUBMIT BUTTON — SENT STATE ────────────────────────── */

.btn-tick {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.1) rotate(-30deg);
    opacity: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
    z-index: 2;
}

.btn-send.sent {
    width:         56px !important;
    height:        56px !important;
    padding:       0    !important;
    background:    #16a34a !important;
    border-color:  #16a34a !important;
    color:         #fff;
    border-radius: 50%  !important;
    pointer-events: none;
    transition:
        width         0.62s var(--ease-expo),
        height        0.56s var(--ease-expo),
        padding       0.40s ease,
        background    0.48s ease,
        border-color  0.48s ease,
        border-radius 0.58s var(--ease-expo) !important;
    animation: sentPulse 0.78s ease-out 0.66s forwards;
}

@keyframes sentPulse {
    0%   { box-shadow: 0 0 0 0    rgba(22,163,74,0.60); }
    55%  { box-shadow: 0 0 0 20px rgba(22,163,74,0);    }
    100% { box-shadow: 0 0 0 0    rgba(22,163,74,0);    }
}

.btn-send.sent .btn-label,
.btn-send.sent .btn-ico,
.btn-send.sent .btn-sending { display: none; }

.btn-send.sent .btn-tick {
    transition:
        opacity   0.32s ease               0.46s,
        transform 0.52s var(--ease-spring) 0.43s;
    opacity:   1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}


/* ─── ACTIVE NAV INDICATOR — ENHANCED ───────────────────── */

.sidebar__link {
    transition: color 0.28s ease, padding-left 0.28s var(--ease-expo), background 0.30s ease;
}

.sidebar__link.active {
    background:    rgba(255,255,255,0.055);
    border-radius: 0 8px 8px 0;
    margin-right:  8px;
}

.sidebar__link.active .sidebar__link-bar {
    height:     22px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.95), transparent);
    box-shadow: 0 0 10px rgba(255,255,255,0.45);
}

.sidebar__link.active::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    box-shadow:
        0 0  6px rgba(255,255,255,0.72),
        0 0 14px rgba(255,255,255,0.38);
}


/* ─── THEME TOGGLE BUTTON ────────────────────────────────── */

.sidebar__theme-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.42);
    color: rgba(255,255,255,0.70);
    background-color: rgba(255,255,255,0.05);
    margin-bottom: 6px;
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.sidebar__theme-btn:hover {
    color:            rgba(255,255,255,0.95);
    border-color:     rgba(255,255,255,0.80);
    background-color: rgba(255,255,255,0.10);
    box-shadow:       0 0 10px rgba(255,255,255,0.15), 0 0 20px rgba(255,255,255,0.06);
}

.theme-icon              { display: block; pointer-events: none; flex-shrink: 0; }
.theme-icon--moon        { display: none; }

body[data-theme="light"] .theme-icon--sun  { display: none; }
body[data-theme="light"] .theme-icon--moon { display: block; }


/* ─── SMOOTH THEME-SWITCH TRANSITIONS ───────────────────── */

/* Body + section backgrounds always animate */
body      { transition: background-color 0.50s ease, color 0.45s ease; }
.hero, .services, .about, .contact, .footer { transition: background-color 0.50s ease; }

/* During the switch, force smooth transitions on all key elements  */
body.is-switching .section-title,
body.is-switching .eyebrow,
body.is-switching .section-lead,
body.is-switching .hero__eyebrow,
body.is-switching .hero__sub,
body.is-switching .hero__foot,
body.is-switching .about__body,
body.is-switching .stroke-text,
body.is-switching .scard,
body.is-switching .scard__num,
body.is-switching .scard__title,
body.is-switching .scard__desc,
body.is-switching .scard__arrow,
body.is-switching .services__grid,
body.is-switching .about__stats,
body.is-switching .stat,
body.is-switching .stat__label,
body.is-switching .field__input,
body.is-switching .field__label,
body.is-switching .field__bar,
body.is-switching .btn-send,
body.is-switching .btn-ghost,
body.is-switching .cinfo__label,
body.is-switching .cinfo__val,
body.is-switching .cinfo__deco,
body.is-switching .cform__success,
body.is-switching .cform__fail,
body.is-switching .success-ring,
body.is-switching .success-head,
body.is-switching .success-body,
body.is-switching .footer__brand,
body.is-switching .footer__links a,
body.is-switching .footer__copy,
body.is-switching .cursor-ring,
body.is-switching .s-toggle,
body.is-switching .s-toggle span {
    transition:
        background-color          0.50s ease,
        color                     0.45s ease,
        border-color              0.45s ease,
        -webkit-text-stroke-color 0.45s ease !important;
}


/* ─── LIGHT MODE ─────────────────────────────────────────── */

body[data-theme="light"] {
    background: #f5f5f2;
    color:      #0d0d0d;
    --c-teal:         rgba(0,0,0,0.82);
    --c-teal-dim:     rgba(0,0,0,0.40);
    --glow-teal-sm:   0 0 12px rgba(0,0,0,0.10);
    --glow-teal-md:   0 0 28px rgba(0,0,0,0.12), 0 0 60px rgba(0,0,0,0.05);
}

/* Scrollbar */
body[data-theme="light"] ::-webkit-scrollbar-track { background: #f5f5f2; }
body[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); }

/* Custom cursor ring on light page */
body[data-theme="light"] .cursor-ring {
    border-color: rgba(0,0,0,0.40);
    background:   rgba(0,0,0,0.015);
    box-shadow:   0 0 8px rgba(0,0,0,0.08), 0 0 18px rgba(0,0,0,0.03), inset 0 0 6px rgba(0,0,0,0.02);
}
body[data-theme="light"] .cursor-ring.hov {
    border-color: rgba(0,0,0,0.60);
    background:   rgba(0,0,0,0.025);
    box-shadow:   0 0 14px rgba(0,0,0,0.12), 0 0 30px rgba(0,0,0,0.05), inset 0 0 10px rgba(0,0,0,0.02);
}

/* Mobile hamburger on light page */
body[data-theme="light"] .s-toggle            { background: rgba(242,242,238,0.90); border-color: rgba(0,0,0,0.12); }
body[data-theme="light"] .s-toggle span       { background: #0d0d0d; }

/* ── Hero ── */
body[data-theme="light"] .hero__dots {
    background-image: radial-gradient(circle, rgba(0,0,0,0.055) 1px, transparent 1px);
}
body[data-theme="light"] .hero__eyebrow   { color: rgba(0,0,0,0.58); }
body[data-theme="light"] .hero__sub       { color: rgba(0,0,0,0.62); }
body[data-theme="light"] .hero__foot      { color: rgba(0,0,0,0.48); }
body[data-theme="light"] .hero__email     { color: #0d0d0d; border-bottom-color: rgba(0,0,0,0.22); }

/* ── Shared section typography ── */
body[data-theme="light"] .eyebrow         { color: rgba(0,0,0,0.58); }
body[data-theme="light"] .section-lead    { color: rgba(0,0,0,0.64); }
body[data-theme="light"] .stroke-text     { -webkit-text-stroke-color: rgba(0,0,0,0.56); }

/* ── Buttons ── */
body[data-theme="light"] .btn-ghost       { color: rgba(0,0,0,0.62); }
body[data-theme="light"] .btn-ghost:hover { color: #0d0d0d; }

/* ── Section divider lines ── */
body[data-theme="light"] .services::before,
body[data-theme="light"] .about::before,
body[data-theme="light"] .contact::before {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07), transparent);
}

/* ── Service cards ── */
body[data-theme="light"] .services__grid                     { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .scard                              { background: rgba(0,0,0,0.018); border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .scard.in-view:hover                { background: rgba(0,0,0,0.034); border-color: rgba(0,0,0,0.14); }
body[data-theme="light"] .scard__num                         { color: rgba(0,0,0,0.08); }
body[data-theme="light"] .scard.in-view:hover .scard__num   { color: rgba(0,0,0,0.70); text-shadow: none; }
body[data-theme="light"] .scard__title                       { color: rgba(0,0,0,0.82); }
body[data-theme="light"] .scard.in-view:hover .scard__title  { color: #0d0d0d; }
body[data-theme="light"] .scard__desc                        { color: rgba(0,0,0,0.60); }
body[data-theme="light"] .scard.in-view:hover .scard__desc   { color: rgba(0,0,0,0.76); }
body[data-theme="light"] .scard__arrow                       { color: rgba(0,0,0,0.38); }
body[data-theme="light"] .scard.in-view:hover .scard__arrow  { color: rgba(0,0,0,0.70); }
body[data-theme="light"] .scard__glow-line {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18), transparent);
}

/* ── About ── */
body[data-theme="light"] .about__body    { color: rgba(0,0,0,0.68); }
body[data-theme="light"] .about__stats   { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .stat           { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .stat:hover     { background: rgba(0,0,0,0.025); }
body[data-theme="light"] .stat::before   { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); }
body[data-theme="light"] .stat__label    { color: rgba(0,0,0,0.62); }

/* ── Contact form ── */
body[data-theme="light"] .field__input {
    border-bottom-color: rgba(0,0,0,0.14);
    color:       #0d0d0d;
    caret-color: #0d0d0d;
}
body[data-theme="light"] .field__input:-webkit-autofill,
body[data-theme="light"] .field__input:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 1000px #f5f5f2 inset;
    -webkit-text-fill-color: #0d0d0d;
    caret-color:             #0d0d0d;
}
body[data-theme="light"] .field__label { color: rgba(0,0,0,0.54); }
body[data-theme="light"] .field__input:focus ~ .field__label,
body[data-theme="light"] .field__input:not(:placeholder-shown) ~ .field__label { color: rgba(0,0,0,0.54); }
body[data-theme="light"] select.field__input:not(:invalid) ~ .field__label,
body[data-theme="light"] select.field__input:focus ~ .field__label { color: rgba(0,0,0,0.54); }
body[data-theme="light"] .field--select::after { color: rgba(0,0,0,0.30); }
body[data-theme="light"] .field--select:focus-within::after { color: rgba(0,0,0,0.60); }
body[data-theme="light"] select.field__input option { background: #f5f5f2; color: #0d0d0d; }
body[data-theme="light"] .field__bar                   { background: #0d0d0d; }
body[data-theme="light"] .field.invalid .field__input  { border-bottom-color: rgba(185,28,28,0.40); }
body[data-theme="light"] .field.invalid .field__bar    { background: rgba(185,28,28,0.65); }
body[data-theme="light"] .field.invalid .field__err    { color: rgba(185,28,28,0.88); }

body[data-theme="light"] .btn-send         { background: #0d0d0d; color: #f5f5f2; border-color: #0d0d0d; }
body[data-theme="light"] .btn-send::before { background: #f5f5f2; }
body[data-theme="light"] .btn-send:hover   { color: #0d0d0d; }

body[data-theme="light"] .cform__success,
body[data-theme="light"] .cform__fail  { border-color: rgba(0,0,0,0.09); }
body[data-theme="light"] .success-ring { border-color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.60); }
body[data-theme="light"] .success-head { color: #0d0d0d; }
body[data-theme="light"] .success-body,
body[data-theme="light"] .cform__fail p { color: rgba(0,0,0,0.48); }
body[data-theme="light"] .cform__fail a { color: #0d0d0d; border-bottom-color: rgba(0,0,0,0.22); }

/* ── Contact info ── */
body[data-theme="light"] .cinfo__label      { color: rgba(0,0,0,0.48); }
body[data-theme="light"] .cinfo__val        { color: rgba(0,0,0,0.70); }
body[data-theme="light"] a.cinfo__val:hover  { color: #0d0d0d; }
body[data-theme="light"] .cinfo__deco       { -webkit-text-stroke-color: rgba(0,0,0,0.05); }

/* ── Footer ── */
body[data-theme="light"] .footer              { border-top-color: rgba(0,0,0,0.07); }
body[data-theme="light"] .footer__brand       { color: rgba(0,0,0,0.56); }
body[data-theme="light"] .footer__links a     { color: rgba(0,0,0,0.46); }
body[data-theme="light"] .footer__links a:hover { color: rgba(0,0,0,0.76); }
body[data-theme="light"] .footer__copy        { color: rgba(0,0,0,0.38); }


/* ─── SIDEBAR — GROUP LABEL & SEPARATOR ─────────────────── */

.sidebar__nav {
    align-items: flex-start;
}

.sidebar__group {
    padding: 14px 28px 5px;
    pointer-events: none;
    user-select: none;
}
.sidebar__group-label {
    display: block;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.sidebar__sep {
    display: block;
    height: 1px;
    background: rgba(255,255,255,0.04);
    margin: 8px 28px;
}

/* Subsidiary links — slightly tighter tracking so text fits */
.sidebar__link--sub {
    letter-spacing: 0.1em;
    font-size: 10.5px;
}

body[data-theme="light"] .sidebar__group-label { color: rgba(255,255,255,0.45); }
body[data-theme="light"] .sidebar__sep         { background: rgba(0,0,0,0.06); }


/* ─── SUBSIDIARY — BASE ──────────────────────────────────── */

.subsidiary {
    padding: var(--section-pad) 0;
    position: relative;
}
.subsidiary::before {
    content: '';
    position: absolute;
    top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}
body[data-theme="light"] .subsidiary::before {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07), transparent);
}


/* ─── IONIK GEAR ─────────────────────────────────────────── */

.gear-drop__header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 3rem;
}

.gear-tag {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid;
}
.gear-tag--live  { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.04); }
.gear-tag--event { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.42); }
.gear-tag--first { border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.28); }

/* Two-column: info + visual */
.gear-drop__body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 5rem;
    align-items: start;
    margin-bottom: 4.5rem;
}

.gear-drop__title {
    font-family: var(--ff-display);
    font-size: clamp(52px, 7vw, 84px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.88;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 1.75rem;
}

.gear-drop__desc {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.48);
    line-height: 1.82;
    max-width: 480px;
    margin-bottom: 2.5rem;
}

.gear-drop__cta {
    display: inline-flex;
}

/* Specs grid */
.gear-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid var(--c-border);
    margin-bottom: 2.5rem;
}
.gear-spec {
    padding: 0.9rem 1.1rem;
    background: rgba(255,255,255,0.012);
    border: 1px solid var(--c-border);
    margin: -1px;
}
.gear-spec__key {
    display: block;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.24);
    margin-bottom: 4px;
}
.gear-spec__val {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.64);
}

/* Visual product card */
.gear-drop__visual {
    position: sticky;
    top: 40px;
}

.gear-visual {
    position: relative;
    background: rgba(255,255,255,0.022);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 2.5rem;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}
.gear-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(255,255,255,0.035) 0%, transparent 65%);
    pointer-events: none;
}
.gear-visual::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
}

.gear-visual__top {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
}
.gear-visual__year {
    font-family: var(--ff-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.24);
}
.gear-visual__event {
    font-family: var(--ff-body);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: rgba(255,255,255,0.16);
    text-transform: uppercase;
}

.gear-visual__name {
    font-family: var(--ff-display);
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.9;
    text-transform: uppercase;
    color: rgba(255,255,255,0.84);
    position: relative;
    z-index: 1;
    text-shadow: 0 0 48px rgba(255,255,255,0.07);
}

.gear-visual__bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.gear-visual__sub {
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.18);
}
.gear-visual__dot {
    width: 2px; height: 2px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

/* Ghost number watermark */
.gear-visual__ghost {
    position: absolute;
    bottom: -0.12em; right: -0.08em;
    font-family: var(--ff-display);
    font-size: 140px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: rgba(255,255,255,0.035);
    pointer-events: none;
    user-select: none;
}

.gear-visual__glow {
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: gearGlowPulse 3.8s ease-in-out infinite;
}
@keyframes gearGlowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}

/* Package tier cards */
.gear-tiers {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 3rem;
}
.gear-tiers__label {
    font-size: 9.5px;
    font-weight: 300;
    letter-spacing: 0.4em;
    color: rgba(255,255,255,0.22);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem;
}
.gear-tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--c-border);
}
.gear-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--c-border);
    margin: -1px;
    gap: 0.35rem;
    transition: background 0.3s ease;
    position: relative;
}
.gear-tier:hover { background: rgba(255,255,255,0.03); }

.gear-tier--hero {
    background: rgba(255,255,255,0.03);
}
.gear-tier--hero::before {
    content: 'Most Popular';
    position: absolute;
    top: -10px;
    left: 50%; transform: translateX(-50%);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    background: var(--c-bg);
    padding: 0 10px;
    white-space: nowrap;
}

.gear-tier__num {
    font-family: var(--ff-display);
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.05em;
}
.gear-tier__name {
    font-family: var(--ff-display);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    line-height: 1;
}
.gear-tier--hero .gear-tier__name { color: var(--c-text); }

.gear-tier__edition {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.26);
    margin-bottom: 0.5rem;
}
.gear-tier__price {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.72);
}
.gear-tier--hero .gear-tier__price { color: var(--c-text); }

.gear-tier__moq {
    font-size: 9.5px;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.2);
}


/* ─── IONIK EVENTS ───────────────────────────────────────── */

.events-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 340px;
}

.events-content { position: relative; z-index: 1; }

.events-coming {
    display: inline-flex;
    margin-top: 2.25rem;
    border: 1px solid rgba(255,255,255,0.10);
    padding: 10px 22px;
    border-radius: 2px;
}
.events-coming__text {
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
}

.events-bg {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.events-bg__word {
    font-family: var(--ff-display);
    font-size: clamp(80px, 12vw, 156px);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.05);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}


/* ─── LIGHT MODE — GEAR & EVENTS ─────────────────────────── */

body[data-theme="light"] .gear-tag--live  { border-color: rgba(0,0,0,0.22); color: rgba(0,0,0,0.58); background: rgba(0,0,0,0.03); }
body[data-theme="light"] .gear-tag--event { border-color: rgba(0,0,0,0.10); color: rgba(0,0,0,0.38); }
body[data-theme="light"] .gear-tag--first { border-color: rgba(0,0,0,0.07); color: rgba(0,0,0,0.28); }

body[data-theme="light"] .gear-drop__title { color: #0d0d0d; }
body[data-theme="light"] .gear-drop__desc  { color: rgba(0,0,0,0.48); }

body[data-theme="light"] .gear-specs        { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gear-spec         { background: rgba(0,0,0,0.018); border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gear-spec__key    { color: rgba(0,0,0,0.28); }
body[data-theme="light"] .gear-spec__val    { color: rgba(0,0,0,0.60); }

body[data-theme="light"] .gear-visual {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.08);
}
body[data-theme="light"] .gear-visual::before {
    background:
        linear-gradient(135deg, rgba(0,0,0,0.02) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(0,0,0,0.02) 0%, transparent 65%);
}
body[data-theme="light"] .gear-visual::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.15), transparent);
}
body[data-theme="light"] .gear-visual__year  { color: rgba(0,0,0,0.26); }
body[data-theme="light"] .gear-visual__event { color: rgba(0,0,0,0.18); }
body[data-theme="light"] .gear-visual__name  { color: rgba(0,0,0,0.78); }
body[data-theme="light"] .gear-visual__sub   { color: rgba(0,0,0,0.18); }
body[data-theme="light"] .gear-visual__ghost { color: rgba(0,0,0,0.04); }

body[data-theme="light"] .gear-tiers       { border-top-color: rgba(0,0,0,0.07); }
body[data-theme="light"] .gear-tiers__label { color: rgba(0,0,0,0.24); }
body[data-theme="light"] .gear-tiers__grid  { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gear-tier         { background: rgba(0,0,0,0.018); border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gear-tier:hover   { background: rgba(0,0,0,0.034); }
body[data-theme="light"] .gear-tier--hero   { background: rgba(0,0,0,0.03); }
body[data-theme="light"] .gear-tier--hero::before { background: #f5f5f2; color: rgba(0,0,0,0.38); }
body[data-theme="light"] .gear-tier__num    { color: rgba(0,0,0,0.18); }
body[data-theme="light"] .gear-tier__name   { color: rgba(0,0,0,0.78); }
body[data-theme="light"] .gear-tier--hero .gear-tier__name  { color: #0d0d0d; }
body[data-theme="light"] .gear-tier__edition { color: rgba(0,0,0,0.28); }
body[data-theme="light"] .gear-tier__price  { color: rgba(0,0,0,0.68); }
body[data-theme="light"] .gear-tier--hero .gear-tier__price { color: #0d0d0d; }
body[data-theme="light"] .gear-tier__moq    { color: rgba(0,0,0,0.22); }

body[data-theme="light"] .events-coming     { border-color: rgba(0,0,0,0.10); }
body[data-theme="light"] .events-coming__text { color: rgba(0,0,0,0.50); }
body[data-theme="light"] .events-bg__word   { -webkit-text-stroke-color: rgba(0,0,0,0.05); }


/* ─── RESPONSIVE — SUBSIDIARIES ─────────────────────────── */

@media (max-width: 860px) {
    .gear-drop__body {
        grid-template-columns: 1fr;
    }
    .gear-drop__visual {
        position: static;
        max-width: 480px;
    }
    .events-wrap {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .events-bg { display: none; }
}

@media (max-width: 680px) {
    .gear-tiers__grid { grid-template-columns: 1fr; }
    .gear-tier--hero::before { display: none; }
}

@media (max-width: 520px) {
    .gear-specs { grid-template-columns: 1fr; }
}


/* ─── SIDEBAR — DROPDOWN ─────────────────────────────────── */

.sidebar__item--has-sub {
    display: flex;
    flex-direction: column;
}

.sidebar__link--parent {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: inherit;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0;
}

.sidebar__chevron {
    margin-left: auto;
    margin-right: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.22);
    transition: transform 0.28s var(--ease-expo), color 0.2s ease;
    display: inline-block;
    line-height: 1;
}

.sidebar__item--has-sub.open .sidebar__chevron {
    transform: rotate(90deg);
    color: rgba(255,255,255,0.50);
}

.sidebar__sub {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s var(--ease-expo);
}

.sidebar__item--has-sub.open .sidebar__sub {
    max-height: 200px;
}

.sidebar__sublink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 28px 7px 38px;
    text-decoration: none;
    font-family: var(--ff-body);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
    transition: color 0.2s ease;
}

.sidebar__sublink:hover,
.sidebar__sublink.active {
    color: rgba(255,255,255,0.72);
}

.sidebar__sublink-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.5;
}

body[data-theme="light"] .sidebar__chevron          { color: rgba(0,0,0,0.22); }
body[data-theme="light"] .sidebar__item--has-sub.open .sidebar__chevron { color: rgba(0,0,0,0.50); }
body[data-theme="light"] .sidebar__sublink          { color: rgba(0,0,0,0.30); }
body[data-theme="light"] .sidebar__sublink:hover,
body[data-theme="light"] .sidebar__sublink.active   { color: rgba(0,0,0,0.70); }


/* ─── STRAP CANVAS (3D viewer inside gp-card) ────────────── */

.strap-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    cursor: grab;
}
.strap-canvas:active { cursor: grabbing; }

.gp-card__model-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ff-body);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.6s ease;
}

body[data-theme="light"] .gp-card__model-hint { color: rgba(0,0,0,0.22); }


/* ─── IONIK GEAR — PROJECT CARD ──────────────────────────── */

.gear-projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* gp-card: two-column card — 3D placeholder left, info right */
.gp-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.018);
    position: relative;
    transition: border-color 0.3s ease;
}

.gp-card:hover { border-color: rgba(255,255,255,0.14); }

/* 3D model placeholder */
.gp-card__model {
    min-height: 420px;
    background: rgba(255,255,255,0.012);
    border-right: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.gp-card__model::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.025) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.015) 0%, transparent 60%);
    pointer-events: none;
}

.gp-card__model-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Three animated concentric rings — placeholder for 3D viewer */
.gp-card__model-rings {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 8px;
}

.gp-card__model-rings span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    animation: ringPulse 3.6s ease-in-out infinite;
}

.gp-card__model-rings span:nth-child(1) {
    inset: 28px;
    border-color: rgba(255,255,255,0.18);
    animation-delay: 0s;
}
.gp-card__model-rings span:nth-child(2) {
    inset: 14px;
    border-color: rgba(255,255,255,0.09);
    animation-delay: 0.4s;
}
.gp-card__model-rings span:nth-child(3) {
    inset: 0;
    border-color: rgba(255,255,255,0.05);
    animation-delay: 0.8s;
}

@keyframes ringPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.05); }
}

.gp-card__model-label {
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
}

.gp-card__model-sub {
    font-size: 9.5px;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.16);
}

/* Info panel */
.gp-card__info {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.gp-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 1.5rem;
}

.gp-card__title {
    font-family: var(--ff-display);
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.88;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 2rem;
}

.gp-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--c-border);
    margin-bottom: 2rem;
}

.gp-card__meta-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: baseline;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--c-border);
}

.gp-card__meta-row:last-child { border-bottom: none; }

.gp-card__meta-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
}

.gp-card__meta-val {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.58);
    line-height: 1.5;
}

.gp-card__cta {
    align-self: flex-start;
    margin-top: auto;
}

.gp-card__desc {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.54);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.gp-card__cta-btn {
    align-self: flex-start;
    font-size: 12px;
    padding: 10px 20px;
    white-space: normal;
    text-align: center;
}

body[data-theme="light"] .gp-card__desc { color: rgba(0,0,0,0.50); }

/* Ambient glow */
.gp-card__glow {
    position: absolute;
    pointer-events: none;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    top: 50%; left: 25%;
    transform: translate(-50%, -50%);
    animation: gearGlowPulse 4s ease-in-out infinite;
}

/* Light mode */
body[data-theme="light"] .gp-card        { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.018); }
body[data-theme="light"] .gp-card:hover  { border-color: rgba(0,0,0,0.14); }
body[data-theme="light"] .gp-card__model { background: rgba(0,0,0,0.012); border-right-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gp-card__model-rings span:nth-child(1) { border-color: rgba(0,0,0,0.14); }
body[data-theme="light"] .gp-card__model-rings span:nth-child(2) { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gp-card__model-rings span:nth-child(3) { border-color: rgba(0,0,0,0.05); }
body[data-theme="light"] .gp-card__model-label { color: rgba(0,0,0,0.28); }
body[data-theme="light"] .gp-card__model-sub   { color: rgba(0,0,0,0.18); }
body[data-theme="light"] .gp-card__meta        { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gp-card__meta-row    { border-bottom-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .gp-card__meta-label  { color: rgba(0,0,0,0.24); }
body[data-theme="light"] .gp-card__meta-val    { color: rgba(0,0,0,0.56); }

@media (max-width: 700px) {
    .gp-card { grid-template-columns: 1fr; }
    .gp-card__model { min-height: 260px; border-right: none; border-bottom: 1px solid var(--c-border); }
    body[data-theme="light"] .gp-card__model { border-bottom-color: rgba(0,0,0,0.08); }
}


/* ─── KTH SECTION ────────────────────────────────────────── */

/* Identity block (event header) */
.kth-identity {
    margin-bottom: 5rem;
}

.kth-identity__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.75rem;
}

.kth-tag {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.65);
}

.kth-tag--dim   { border-color: rgba(255,255,255,0.09); color: rgba(255,255,255,0.28); }
.kth-tag--first { border-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.22); }

.kth-title {
    font-family: var(--ff-display);
    font-size: clamp(56px, 9vw, 108px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.88;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 2rem;
}

.kth-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.kth-meta__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kth-meta__label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
}

.kth-meta__val {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.62);
}

.kth-meta__sep {
    font-size: 20px;
    color: rgba(255,255,255,0.10);
    line-height: 1;
    align-self: center;
}

/* Product intro (two-column) */
.kth-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
    margin-bottom: 5rem;
}

.kth-product__name {
    font-family: var(--ff-display);
    font-size: clamp(40px, 5.5vw, 68px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.88;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 1.75rem;
    margin-top: 0.5rem;
}

.kth-product__desc {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.46);
    line-height: 1.82;
    max-width: 480px;
    margin-bottom: 1.25rem;
}

.kth-first-badge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 2rem;
    padding: 16px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: rgba(255,255,255,0.018);
}

.kth-first-badge__num {
    font-family: var(--ff-display);
    font-size: 28px;
    font-weight: 900;
    color: rgba(255,255,255,0.62);
    line-height: 1;
    flex-shrink: 0;
}

.kth-first-badge__title {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.kth-first-badge__sub {
    display: block;
    font-size: 10px;
    font-weight: 300;
    color: rgba(255,255,255,0.34);
    letter-spacing: 0.02em;
}

/* Specs grid */
.kth-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid var(--c-border);
}

.kth-spec {
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.012);
    border: 1px solid var(--c-border);
    margin: -1px;
}

.kth-spec dt {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.24);
    margin-bottom: 4px;
}

.kth-spec dd {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.60);
}

/* Card row */
.kth-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.kcard {
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.018);
    overflow: hidden;
    position: relative;
}

.kcard__eyebrow {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.24);
    margin-bottom: 0.6rem;
}

.kcard__title {
    font-family: var(--ff-display);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 2rem;
}

/* Size Chart Card */
.kcard--chart {
    padding: 2.25rem;
}

.size-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.size-chart__row {
    display: grid;
    grid-template-columns: 100px 1fr 52px;
    align-items: center;
    gap: 12px;
}

.size-chart__label {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.36);
    white-space: nowrap;
}

.size-chart__track {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 100px;
    overflow: hidden;
}

.size-chart__fill {
    height: 100%;
    width: var(--w, 50%);
    background: rgba(255,255,255,0.45);
    border-radius: 100px;
    transition: width 0.6s var(--ease-expo);
}

.size-chart__val {
    font-family: var(--ff-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.52);
    text-align: right;
}

.size-chart__note {
    font-size: 10.5px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,0.24);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 1rem;
    line-height: 1.6;
}

/* In-Action Card */
.kcard--action {
    display: flex;
    flex-direction: column;
}

.kcard__img-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 260px;
}

.kcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease-expo);
}

.kcard--action:hover .kcard__img {
    transform: scale(1.04);
}

.kcard__img-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kcard__img-tag {
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.44);
}

.kcard__img-title {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    line-height: 1;
}

.kcard__img-sub {
    font-size: 9.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.06em;
}

.kcard__body {
    padding: 1.5rem;
    border-top: 1px solid var(--c-border);
}

.kcard__body-title {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 0.4rem;
}

.kcard__body-desc {
    font-size: 11.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.40);
    line-height: 1.7;
}

/* Carousel section */
.kth-carousel-wrap {
    margin-bottom: 4rem;
}

.kth-cta {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
}

/* ─── PRODUCT CAROUSEL ───────────────────────────────────── */

.carousel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.012);
    margin-top: 1rem;
}

.carousel__track {
    display: flex;
    transition: transform 0.42s var(--ease-expo);
    will-change: transform;
}

.carousel__slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 340px;
}

.carousel__img-wrap {
    overflow: hidden;
}

.carousel__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel__caption {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--c-border);
}

.carousel__cap-title {
    font-family: var(--ff-display);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--c-text);
    line-height: 0.9;
    margin-bottom: 1rem;
}

.carousel__cap-desc {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.42);
    line-height: 1.8;
}

.carousel__prev,
.carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.carousel__prev { left: 12px; }
.carousel__next { right: 12px; }

.carousel__prev:hover,
.carousel__next:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.carousel__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 14px;
    border-top: 1px solid var(--c-border);
}

.carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.18);
    cursor: pointer;
    padding: 0;
    transition: background 0.22s ease, transform 0.22s ease;
}

.carousel__dot.active {
    background: rgba(255,255,255,0.72);
    transform: scale(1.25);
}


/* ─── CAROUSEL — INLINE (inside kcard) ──────────────────── */

/* The chart card grows to fill its grid cell when gallery is inside */
.kcard--chart-gallery {
    display: flex;
    flex-direction: column;
}

.kcard__gallery-sep {
    height: 1px;
    background: var(--c-border);
    margin: 1.5rem 0 0;
    flex-shrink: 0;
}

body[data-theme="light"] .kcard__gallery-sep { background: rgba(0,0,0,0.08); }

/* Inline carousel: no outer border, blends into card */
.carousel--inline {
    border: none;
    border-radius: 0;
    background: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.carousel--inline .carousel__track {
    flex: 1;
    align-items: stretch;
}

/* Inline slide: fills track height, image grows within it */
.carousel__slide--inline {
    flex-direction: column;
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

.carousel__slide--inline .carousel__img-wrap {
    flex: 1;
    min-height: 160px;
    height: 0;           /* let flex-grow drive the height, not content */
}

/* Compact caption row inside card */
.carousel__inline-cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2.25rem 0;
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
}

.carousel__inline-cap .carousel__cap-title {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--c-text);
}

.carousel__inline-cap .carousel__cap-sub {
    font-size: 9.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.34);
    letter-spacing: 0.06em;
    text-align: right;
}

.carousel--inline .carousel__dots {
    border-top: none;
    padding: 10px 2.25rem 1.5rem;
    justify-content: flex-start;
    gap: 6px;
}

body[data-theme="light"] .carousel__inline-cap { border-top-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .carousel__inline-cap .carousel__cap-sub { color: rgba(0,0,0,0.34); }


/* ─── EVENTS DECO (renamed from events-bg) ───────────────── */

.events-deco {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.events-deco__word {
    font-family: var(--ff-display);
    font-size: clamp(80px, 12vw, 156px);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.05);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}


/* ─── LIGHT MODE — KTH & CAROUSEL ───────────────────────── */

body[data-theme="light"] .kth-tag            { border-color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.58); }
body[data-theme="light"] .kth-tag--dim       { border-color: rgba(0,0,0,0.09); color: rgba(0,0,0,0.28); }
body[data-theme="light"] .kth-tag--first     { border-color: rgba(0,0,0,0.07); color: rgba(0,0,0,0.22); }

body[data-theme="light"] .kth-meta__label    { color: rgba(0,0,0,0.24); }
body[data-theme="light"] .kth-meta__val      { color: rgba(0,0,0,0.58); }
body[data-theme="light"] .kth-meta__sep      { color: rgba(0,0,0,0.10); }

body[data-theme="light"] .kth-product__desc  { color: rgba(0,0,0,0.48); }
body[data-theme="light"] .kth-first-badge    { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.018); }
body[data-theme="light"] .kth-first-badge__num   { color: rgba(0,0,0,0.60); }
body[data-theme="light"] .kth-first-badge__title { color: rgba(0,0,0,0.70); }
body[data-theme="light"] .kth-first-badge__sub   { color: rgba(0,0,0,0.36); }

body[data-theme="light"] .kth-specs         { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .kth-spec          { background: rgba(0,0,0,0.018); border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .kth-spec dt       { color: rgba(0,0,0,0.28); }
body[data-theme="light"] .kth-spec dd       { color: rgba(0,0,0,0.58); }

body[data-theme="light"] .kcard             { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.018); }
body[data-theme="light"] .kcard__eyebrow    { color: rgba(0,0,0,0.26); }
body[data-theme="light"] .size-chart__label { color: rgba(0,0,0,0.38); }
body[data-theme="light"] .size-chart__track { background: rgba(0,0,0,0.07); }
body[data-theme="light"] .size-chart__fill  { background: rgba(0,0,0,0.40); }
body[data-theme="light"] .size-chart__val   { color: rgba(0,0,0,0.52); }
body[data-theme="light"] .size-chart__note  { color: rgba(0,0,0,0.26); border-top-color: rgba(0,0,0,0.06); }
body[data-theme="light"] .kcard__body       { border-top-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .kcard__body-desc  { color: rgba(0,0,0,0.42); }

body[data-theme="light"] .carousel          { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.018); }
body[data-theme="light"] .carousel__caption { border-left-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .carousel__cap-desc { color: rgba(0,0,0,0.44); }
body[data-theme="light"] .carousel__prev,
body[data-theme="light"] .carousel__next    { background: rgba(255,255,255,0.72); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.64); }
body[data-theme="light"] .carousel__prev:hover,
body[data-theme="light"] .carousel__next:hover { background: #fff; color: #0d0d0d; }
body[data-theme="light"] .carousel__dots    { border-top-color: rgba(0,0,0,0.07); }
body[data-theme="light"] .carousel__dot     { background: rgba(0,0,0,0.18); }
body[data-theme="light"] .carousel__dot.active { background: rgba(0,0,0,0.65); }

body[data-theme="light"] .events-deco__word { -webkit-text-stroke-color: rgba(0,0,0,0.05); }
body[data-theme="light"] .gear-project-tag  { color: rgba(0,0,0,0.28); }
body[data-theme="light"] .kth-section .subsidiary::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07), transparent); }


/* ─── RESPONSIVE — KTH & CAROUSEL ───────────────────────── */

@media (max-width: 860px) {
    .kth-product {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .kth-cards {
        grid-template-columns: 1fr;
    }
    .carousel__slide {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .carousel__img-wrap {
        min-height: 200px;
    }
    .carousel__caption {
        border-left: none;
        border-top: 1px solid var(--c-border);
        padding: 1.5rem;
    }
    .events-deco { display: none; }
    .events-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .kth-title { font-size: clamp(44px, 11vw, 72px); }
    .kth-specs { grid-template-columns: 1fr; }
    .size-chart__row { grid-template-columns: 80px 1fr 48px; }
    .kth-carousel-wrap .kcard__eyebrow { margin-bottom: 0.75rem; }
}


/* ═══════════════════════════════════════════════════════════
   KTH — TEAL ACCENT SYSTEM
   Subtle glowing teal across all Key to Happiness components.
   Applied on index.html (gp-card) and kth.html (all blocks).
═══════════════════════════════════════════════════════════ */

/* ── Sidebar sublink teal active state ── */
.sidebar__sublink.active {
    color: var(--c-teal) !important;
}
.sidebar__sublink.active .sidebar__sublink-dot {
    background: var(--c-teal);
    box-shadow: 0 0 6px rgba(0, 201, 177, 0.55);
}

/* ── gp-card (project card on index.html) ── */
.gp-card {
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.gp-card:hover {
    border-color: rgba(0, 201, 177, 0.28) !important;
    box-shadow: var(--glow-teal-sm), inset 0 0 40px rgba(0, 201, 177, 0.03);
}

/* Model rings → teal tint on hover */
.gp-card:hover .gp-card__model-rings span:nth-child(1) {
    border-color: rgba(0, 201, 177, 0.35);
    box-shadow: 0 0 14px rgba(0, 201, 177, 0.18);
}
.gp-card:hover .gp-card__model-rings span:nth-child(2) {
    border-color: rgba(0, 201, 177, 0.18);
}
.gp-card:hover .gp-card__model-rings span:nth-child(3) {
    border-color: rgba(0, 201, 177, 0.10);
}

/* Glow orb → teal on hover */
.gp-card:hover .gp-card__glow {
    background: radial-gradient(circle, rgba(0, 201, 177, 0.07) 0%, transparent 70%);
}

/* "#1 Sri Lanka" tag → teal */
.kth-tag--first {
    border-color: rgba(0, 201, 177, 0.28) !important;
    color: var(--c-teal-dim) !important;
}

/* View Project button → teal color on hover (border handled by trace animation) */
.gp-card:hover .gp-card__cta {
    color: var(--c-teal) !important;
}

/* ── KTH page: identity block ── */

/* First tag (primary) → teal */
.kth-identity__tags .kth-tag:first-child {
    border-color: rgba(0, 201, 177, 0.38);
    color: var(--c-teal);
}

/* Title: subtle teal text-shadow */
.kth-title {
    text-shadow: 0 0 80px rgba(0, 201, 177, 0.06);
    transition: text-shadow 0.4s ease;
}
.kth-title:hover {
    text-shadow: 0 0 60px rgba(0, 201, 177, 0.14), 0 0 120px rgba(0, 201, 177, 0.06);
}

/* Meta values → teal on hover */
.kth-meta__item {
    cursor: default;
    transition: opacity 0.2s ease;
}
.kth-meta__item:hover .kth-meta__val {
    color: var(--c-teal);
}
.kth-meta__item:hover .kth-meta__label {
    color: rgba(0, 201, 177, 0.38);
}

/* ── Product name ── */
.kth-product__name {
    transition: text-shadow 0.4s ease;
}
.kth-product__name:hover {
    text-shadow: 0 0 60px rgba(0, 201, 177, 0.12);
}

/* ── Specs grid: teal left border + value on hover ── */
.kth-spec {
    transition: background 0.25s ease, border-left-color 0.25s ease;
    border-left: 2px solid transparent;
}
.kth-spec:hover {
    background: rgba(0, 201, 177, 0.04) !important;
    border-left-color: rgba(0, 201, 177, 0.45);
}
.kth-spec:hover dd {
    color: var(--c-teal-dim);
}

/* ── First badge → teal #1 + teal border glow ── */
.kth-first-badge {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border-left: 2px solid rgba(0, 201, 177, 0.28);
}
.kth-first-badge__num {
    color: var(--c-teal) !important;
    text-shadow: 0 0 20px rgba(0, 201, 177, 0.40);
}
.kth-first-badge:hover {
    border-color: rgba(0, 201, 177, 0.45);
    box-shadow: var(--glow-teal-sm);
    background: rgba(0, 201, 177, 0.04) !important;
}

/* ── Size chart fills → teal gradient + animation ── */
.size-chart__fill {
    background: linear-gradient(90deg, rgba(0, 201, 177, 0.55) 0%, var(--c-teal) 100%);
    box-shadow: 0 0 8px rgba(0, 201, 177, 0.30);
    width: 0;
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
/* Animate bars in once content is ready */
.content-ready .size-chart__fill {
    width: var(--w, 50%);
}

/* Bar track: faint teal background */
.size-chart__track {
    background: rgba(0, 201, 177, 0.07);
}

/* Size chart row hover: value brightens to teal */
.size-chart__row {
    transition: opacity 0.2s ease;
    cursor: default;
}
.size-chart__row:hover .size-chart__val {
    color: var(--c-teal);
}
.size-chart__row:hover .size-chart__label {
    color: rgba(0, 201, 177, 0.55);
}

/* ── kcard hover → teal border glow ── */
.kcard {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.kcard:hover {
    border-color: rgba(0, 201, 177, 0.22) !important;
    box-shadow: var(--glow-teal-sm);
}

/* In-action overlay tag → teal */
.kcard__img-tag {
    color: var(--c-teal-dim);
}

/* In-action card body title → teal shimmer on hover */
.kcard--action:hover .kcard__body-title {
    color: var(--c-teal);
    text-shadow: 0 0 20px rgba(0, 201, 177, 0.25);
}

/* ── Carousel: teal active dot + arrow hover ── */
.carousel__dot.active {
    background: var(--c-teal) !important;
    box-shadow: 0 0 8px rgba(0, 201, 177, 0.50);
}

.carousel__prev:hover,
.carousel__next:hover {
    background: rgba(0, 201, 177, 0.15) !important;
    border-color: rgba(0, 201, 177, 0.30) !important;
    color: var(--c-teal) !important;
}

/* Caption title → teal shimmer */
.carousel__cap-title,
.carousel__inline-cap .carousel__cap-title {
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
.carousel__slide--inline:hover .carousel__cap-title {
    color: var(--c-teal);
}

/* ── KTH section: subtle teal ambient background ── */
.kth-section,
.kth-page-hero,
.kth-section-block {
    position: relative;
}
.kth-section::after,
.kth-page-hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 201, 177, 0.028) 0%, transparent 100%);
    z-index: 0;
}
.kth-section > *,
.kth-page-hero > * {
    position: relative;
    z-index: 1;
}

/* ── Light mode overrides for teal ── */
body[data-theme="light"] .kth-tag--first {
    border-color: rgba(0, 180, 160, 0.30) !important;
    color: rgba(0, 160, 143, 0.80) !important;
}
body[data-theme="light"] .kth-identity__tags .kth-tag:first-child {
    border-color: rgba(0, 180, 160, 0.35);
    color: rgba(0, 150, 134, 0.90);
}
body[data-theme="light"] .kth-first-badge {
    border-left-color: rgba(0, 180, 160, 0.28);
}
body[data-theme="light"] .kth-first-badge__num {
    color: rgba(0, 160, 143, 0.90) !important;
    text-shadow: 0 0 20px rgba(0, 180, 160, 0.22);
}
body[data-theme="light"] .size-chart__fill {
    background: linear-gradient(90deg, rgba(0, 180, 160, 0.50) 0%, rgba(0, 160, 143, 0.80) 100%);
    box-shadow: 0 0 8px rgba(0, 180, 160, 0.18);
}
body[data-theme="light"] .size-chart__track {
    background: rgba(0, 180, 160, 0.07);
}
body[data-theme="light"] .carousel__dot.active {
    background: rgba(0, 160, 143, 0.85) !important;
    box-shadow: 0 0 8px rgba(0, 180, 160, 0.28);
}
body[data-theme="light"] .gp-card:hover {
    border-color: rgba(0, 180, 160, 0.24) !important;
    box-shadow: 0 0 18px rgba(0, 180, 160, 0.14);
}
body[data-theme="light"] .sidebar__sublink.active {
    color: rgba(0, 150, 134, 0.90) !important;
}
body[data-theme="light"] .sidebar__sublink.active .sidebar__sublink-dot {
    background: rgba(0, 150, 134, 0.90);
    box-shadow: 0 0 6px rgba(0, 180, 160, 0.30);
}


/* ═══════════════════════════════════════════════════════════
   KTH — BORDER TRACE ANIMATION
   Glowing teal arc sweeps around the "View Full Project" CTA
   when the user hovers the project card.
═══════════════════════════════════════════════════════════ */

/* Animatable CSS custom property for the conic-gradient angle */
@property --kth-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Give the button a visible presence: padding + transparent border */
.gp-card__cta {
    padding: 11px 26px !important;       /* restore padding stripped by btn-ghost */
    border: 1.5px solid rgba(255,255,255,0.07) !important; /* faint border at rest */
    border-radius: 100px !important;
    overflow: visible !important;        /* allow glow to bleed outside btn overflow:hidden */
    isolation: isolate;                  /* local stacking context for z-index */
    color: rgba(255,255,255,0.46) !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    background: transparent !important;
}

/* On card hover: border shifts to faint teal, breathing glow starts after trace completes */
.gp-card:hover .gp-card__cta {
    border-color: rgba(0, 201, 177, 0.18) !important;
    animation: kthBreathing 2.4s ease-in-out 1.35s infinite;
}

/* ── ::before — the rotating teal arc ── */
.gp-card__cta::before {
    content: '';
    position: absolute;
    inset: -2px;                         /* slightly larger than the button */
    border-radius: 100px;
    --kth-angle: 0deg;
    background: conic-gradient(
        from var(--kth-angle),
        transparent          0deg,
        rgba(0,201,177,0.10) 8deg,       /* approaching glow */
        rgba(0,201,177,0.90) 16deg,      /* bright leading edge */
        rgba(0,201,177,0.55) 24deg,      /* body */
        rgba(0,201,177,0.18) 36deg,      /* fading tail */
        transparent          52deg,
        transparent          360deg
    );
    opacity: 0;
    z-index: -2;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

/* ── ::after — center mask, leaves only the border ring visible ── */
.gp-card__cta::after {
    content: '';
    position: absolute;
    inset: 1.5px;                        /* matches border width — masks the interior */
    border-radius: 100px;
    background: var(--c-bg);             /* dark fill hides the gradient inside */
    z-index: -1;
    pointer-events: none;
}

/* ── Trigger: fire when the card is hovered ── */
.gp-card:hover .gp-card__cta::before {
    opacity: 1;
    animation: kthBorderTrace 1.35s linear forwards;
}

/* Arc sweeps once, then fades out in the final 12% */
@keyframes kthBorderTrace {
    0%   { --kth-angle:   0deg; opacity: 1; }
    88%  { --kth-angle: 317deg; opacity: 1; }
    100% { --kth-angle: 360deg; opacity: 0; }
}

/* Breathing glow — begins after trace finishes (delay = trace duration) */
@keyframes kthBreathing {
    0%, 100% {
        box-shadow:
            0 0  5px 0px rgba(0, 201, 177, 0.08),
            0 0 10px 0px rgba(0, 201, 177, 0.04);
    }
    50% {
        box-shadow:
            0 0 10px 2px rgba(0, 201, 177, 0.22),
            0 0 22px 4px rgba(0, 201, 177, 0.08),
            0 0 40px 6px rgba(0, 201, 177, 0.03);
    }
}

/* ── Web project card button — teal text at rest ── */
.web-project-card .gp-card__cta {
    color: var(--c-teal) !important;
}

/* ── Same trigger for the Web featured project card ── */
.web-project-card:hover .gp-card__cta {
    border-color: rgba(0, 201, 177, 0.18) !important;
    animation: kthBreathing 2.4s ease-in-out 1.35s infinite;
}
.web-project-card:hover .gp-card__cta::before {
    opacity: 1;
    animation: kthBorderTrace 1.35s linear forwards;
}
body[data-theme="light"] .web-project-card:hover .gp-card__cta {
    border-color: rgba(0, 160, 143, 0.22) !important;
    color: rgba(0, 150, 134, 0.90) !important;
    animation: kthBreathingLight 2.4s ease-in-out 1.35s infinite;
}

/* ── Light mode overrides ── */
body[data-theme="light"] .gp-card__cta {
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(0,0,0,0.42) !important;
    background: transparent !important;
}
body[data-theme="light"] .gp-card:hover .gp-card__cta {
    border-color: rgba(0, 160, 143, 0.22) !important;
    color: rgba(0, 150, 134, 0.90) !important;
    animation: kthBreathingLight 2.4s ease-in-out 1.35s infinite;
}

@keyframes kthBreathingLight {
    0%, 100% {
        box-shadow:
            0 0  5px 0px rgba(0, 180, 160, 0.10),
            0 0 10px 0px rgba(0, 180, 160, 0.05);
    }
    50% {
        box-shadow:
            0 0 10px 2px rgba(0, 180, 160, 0.20),
            0 0 20px 3px rgba(0, 180, 160, 0.08);
    }
}
body[data-theme="light"] .gp-card__cta::after {
    background: #f5f5f2;                 /* light page bg for the center mask */
}
body[data-theme="light"] .gp-card__cta::before {
    background: conic-gradient(
        from var(--kth-angle),
        transparent             0deg,
        rgba(0,160,143,0.10)    8deg,
        rgba(0,160,143,0.82)   16deg,
        rgba(0,160,143,0.45)   24deg,
        rgba(0,160,143,0.15)   36deg,
        transparent            52deg,
        transparent           360deg
    );
}


/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITION — CINEMATIC CURTAIN
   Dark panel with teal neon leading edge sweeps up to cover
   the page on exit, then continues up to reveal on enter.
═══════════════════════════════════════════════════════════ */
.pt-curtain {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #050505;
    transform: translateY(100%);
    pointer-events: none;
    will-change: transform;
}
.pt-curtain__edge {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent              0%,
        rgba(0,201,177,0.25)     8%,
        rgba(0,201,177,0.90)    30%,
        #00ffe8                 50%,
        rgba(0,201,177,0.90)    70%,
        rgba(0,201,177,0.25)    92%,
        transparent            100%
    );
    box-shadow:
        0 0 20px rgba(0,201,177,1.00),
        0 0 55px rgba(0,201,177,0.50),
        0 0 90px rgba(0,201,177,0.20);
}
/* On the enter sweep the neon trails at the BOTTOM of the curtain */
.pt-curtain.pt-entering .pt-curtain__edge {
    top: auto;
    bottom: 0;
    box-shadow:
        0 0 20px rgba(0,201,177,0.80),
        0 0 50px rgba(0,201,177,0.35);
}


/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   Elements start invisible + offset and transition in as
   they scroll into view. Four directions + a scale variant.
═══════════════════════════════════════════════════════════ */
.sr {
    opacity: 0;
    transition:
        opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.sr-up    { transform: translateY(54px); }
.sr-left  { transform: translateX(-54px); }
.sr-right { transform: translateX(54px); }
.sr-scale { transform: scale(0.86) translateY(18px); }

.sr.in {
    opacity: 1;
    transform: none;
}

/* Honour OS-level reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .sr                { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pt-curtain        { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE — ≤480px comprehensive fixes
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Hero title floor too high on 320px */
    .hero__title span { font-size: clamp(34px, 11vw, 64px); white-space: normal; }

    /* Hero buttons stack full-width */
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .hero__actions .btn { text-align: center; justify-content: center; }

    /* Service cards — tighter padding + scalable ghost number */
    .scard           { padding: 1.5rem 1.25rem 1.25rem; }
    .scard__num      { font-size: clamp(44px, 12vw, 72px); }

    /* About stats — 1 column so numbers don't squish */
    .about__stats    { grid-template-columns: 1fr; gap: 1.5rem; }

    /* Gear card model — less towering on mobile */
    .gp-card__model  { min-height: 260px; }

    /* Scroll-reveal side offsets — prevent horizontal overflow flash */
    .sr-left         { transform: translateX(-28px); }
    .sr-right        { transform: translateX(28px); }
    .sr-up           { transform: translateY(36px); }
    .sr-scale        { transform: scale(0.90) translateY(12px); }
}

/* ── Web featured project card (added to IONIK Web section) ── */
.web-featured { margin-bottom: 3rem; }

.web-project-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,0.018);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.web-project-card:hover {
    border-color: rgba(0,201,177,0.30);
    box-shadow: 0 0 40px rgba(0,201,177,0.05);
}
.web-project-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}
.web-project-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.web-project-card:hover .web-project-card__media img { transform: scale(1.04); }

.web-project-card__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem 2rem;
}
.web-project-card__view {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-teal);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s, transform 0.3s;
}
.web-project-card:hover .web-project-card__view { opacity: 1; transform: none; }

.web-project-card__info {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    border-left: 1px solid var(--c-border);
}
.web-project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.web-project-card__tag {
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-teal-dim);
    border: 1px solid rgba(0,201,177,0.20);
    padding: 3px 10px;
    border-radius: 100px;
}
.web-project-card__title {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 0.9;
    color: var(--c-text);
}
.web-project-card__sub {
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
}
.web-project-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-top: 0.5rem;
    transition: color 0.2s;
}
.web-project-card:hover .web-project-card__cta { color: var(--c-teal); }

body[data-theme="light"] .web-project-card { background: rgba(0,0,0,0.018); border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .web-project-card:hover { border-color: rgba(0,180,160,0.30); }
body[data-theme="light"] .web-project-card__info { border-left-color: rgba(0,0,0,0.06); }
body[data-theme="light"] .web-project-card__sub { color: rgba(0,0,0,0.45); }

@media (max-width: 700px) {
    .web-project-card { grid-template-columns: 1fr; }
    .web-project-card__media { aspect-ratio: 16/9; }
    .web-project-card__info { border-left: none; border-top: 1px solid var(--c-border); padding: 1.75rem 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════
   MARQUEE TICKER
═══════════════════════════════════════════════════════════ */
.marquee {
    overflow: hidden;
    border-top:    1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 14px 0;
    background: rgba(255,255,255,0.012);
    user-select: none;
}
.marquee__track {
    display: inline-flex;
    white-space: nowrap;
    animation: marqueeRun 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    padding: 0 2.5rem;
}
.marquee__dot {
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-teal);
    margin: 0 2.5rem;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(255,255,255,0.25);
}
@keyframes marqueeRun {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
body[data-theme="light"] .marquee { background: rgba(0,0,0,0.015); border-color: rgba(0,0,0,0.06); }
body[data-theme="light"] .marquee__item { color: rgba(0,0,0,0.58); }


/* ═══════════════════════════════════════════════════════════
   HOW WE WORK
═══════════════════════════════════════════════════════════ */
.how-section {
    padding: var(--section-pad) 0;
    border-top: 1px solid var(--c-border);
    overflow: hidden;
}
.how-section .section-wrap { max-width: calc(var(--max-w) + 96px); margin: 0 auto; padding: 0 48px; }

.how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 3.5rem;
}
.how-step {
    padding: 2.5rem 2rem 2rem;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.012);
    position: relative;
    overflow: hidden;
    transition: border-color 0.35s ease, background 0.35s ease;
    cursor: default;
}
.how-step:hover {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
}
.how-step__num {
    font-family: var(--ff-display);
    font-size: clamp(52px, 6vw, 80px);
    font-weight: 900;
    line-height: 1;
    color: rgba(255,255,255,0.04);
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    transition: color 0.35s ease, text-shadow 0.35s ease;
    user-select: none;
}
.how-step:hover .how-step__num {
    color: var(--c-teal);
    text-shadow: 0 0 40px rgba(255,255,255,0.12);
}
.how-step__title {
    font-family: var(--ff-display);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}
.how-step__desc {
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.38);
    line-height: 1.7;
}
.how-step__line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c-teal), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-expo);
}
.how-step:hover .how-step__line { transform: scaleX(1); }

/* Arrow connector between steps */
.how-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 2.5rem;
    right: -14px;
    font-size: 16px;
    color: rgba(255,255,255,0.20);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 860px) {
    .how-steps { grid-template-columns: 1fr 1fr; }
    .how-step:not(:last-child)::after { display: none; }
    .how-section .section-wrap { padding: 0 24px; }
}
@media (max-width: 520px) {
    .how-steps { grid-template-columns: 1fr; }
}
body[data-theme="light"] .how-step { background: rgba(0,0,0,0.018); border-color: rgba(0,0,0,0.07); }
body[data-theme="light"] .how-step:hover { border-color: rgba(0,0,0,0.18); background: rgba(0,0,0,0.03); }
body[data-theme="light"] .how-step__num   { color: rgba(0,0,0,0.08); }
body[data-theme="light"] .how-step__title { color: rgba(0,0,0,0.88); }
body[data-theme="light"] .how-step__desc  { color: rgba(0,0,0,0.62); }


/* ═══════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.faq-section {
    border-top: 1px solid var(--c-border);
    padding: var(--section-pad) 0;
}
.faq-section .section-wrap { max-width: calc(var(--max-w) + 96px); margin: 0 auto; padding: 0 48px; }

.faq-section .section-header { margin-bottom: 3rem; }

.faq-list { list-style: none; }

.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }

.faq-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: color 0.2s ease;
}
.faq-trigger:hover { color: rgba(255,255,255,0.95); }
.faq-trigger__q {
    font-size: clamp(14px, 1.6vw, 17px);
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    transition: color 0.2s ease;
}
.faq-trigger:hover .faq-trigger__q,
.faq-item.open .faq-trigger__q  { color: rgba(255,255,255,0.95); }
.faq-item.open  .faq-trigger__q { color: var(--c-text); }

.faq-trigger__icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: rgba(255,255,255,0.35);
    transition: transform 0.35s var(--ease-expo), border-color 0.25s, color 0.25s;
    line-height: 1;
}
.faq-item.open .faq-trigger__icon {
    transform: rotate(45deg);
    border-color: rgba(255,255,255,0.30);
    color: var(--c-teal);
}

.faq-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.42s cubic-bezier(0.16,1,0.3,1);
}
.faq-body__inner {
    padding-bottom: 1.5rem;
    padding-right: 3rem;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.50);
    line-height: 1.82;
}
.faq-body__inner a { color: var(--c-teal); text-decoration: none; }
.faq-body__inner a:hover { text-decoration: underline; }

@media (max-width: 860px) { .faq-section .section-wrap { padding: 0 24px; } }

body[data-theme="light"] .faq-trigger__q { color: rgba(0,0,0,0.60); }
body[data-theme="light"] .faq-item.open .faq-trigger__q { color: rgba(0,0,0,0.90); }
body[data-theme="light"] .faq-trigger__icon { border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.35); }
body[data-theme="light"] .faq-item.open .faq-trigger__icon { border-color: rgba(0,0,0,0.30); }
body[data-theme="light"] .faq-body__inner { color: rgba(0,0,0,0.50); }
body[data-theme="light"] .faq-item { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .how-step:not(:last-child)::after { color: rgba(0,0,0,0.20); }