/* ============================================================================
   SOKYO Analytics — SoC Detail (ENHANCED)
   Design fully unified with index.html — background lines, footer, sidebar,
   all animations & easing tokens matched.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Playfair+Display:wght@900&family=Bebas+Neue&family=Righteous&family=Orbitron:wght@900&family=Bungee&family=Abril+Fatface&display=swap');

/* ============================================================================
   M3 DESIGN TOKENS — EXACT MATCH WITH index.css
   ============================================================================ */
:root {
    /* === Primary Palette === */
    --md-sys-color-primary:              #3F6212;
    --md-sys-color-on-primary:           #FFFFFF;
    --md-sys-color-primary-container:    #C7D7B2;
    --md-sys-color-on-primary-container: #0F2000;

    /* === Secondary Palette === */
    --md-sys-color-secondary:            #556B2F;
    --md-sys-color-on-secondary:         #FFFFFF;
    --md-sys-color-secondary-container:  #DDE3D0;
    --md-sys-color-on-secondary-container: #141F00;

    /* === Tertiary Palette === */
    --md-sys-color-tertiary:             #6A7BFF;
    --md-sys-color-on-tertiary:          #FFFFFF;
    --md-sys-color-tertiary-container:   #E6E8FF;
    --md-sys-color-on-tertiary-container:#001160;

    /* === Error Palette === */
    --md-sys-color-error:                #BA1A1A;
    --md-sys-color-on-error:             #FFFFFF;
    --md-sys-color-error-container:      #FFDAD6;

    /* === Surface & Background === */
    --md-sys-color-background:           #F7F8F3;
    --md-sys-color-on-background:        #2F342C;
    --md-sys-color-surface:              #F7F8F3;
    --md-sys-color-on-surface:           #2F342C;
    --md-sys-color-surface-variant:      #EEF0E7;
    --md-sys-color-on-surface-variant:   #6E7566;

    /* === Surface Container Levels === */
    --md-sys-color-surface-container-lowest:  #FFFFFF;
    --md-sys-color-surface-container-low:     #F4F5F0;
    --md-sys-color-surface-container:         #EEF0E7;
    --md-sys-color-surface-container-high:    #E8EAE2;
    --md-sys-color-surface-container-highest: #E2E4DB;

    /* === Outline === */
    --md-sys-color-outline:              #C7D7B2;
    --md-sys-color-outline-variant:      #E5E7DE;

    /* === Inverse === */
    --md-sys-color-inverse-surface:      #2F342C;
    --md-sys-color-inverse-on-surface:   #F4F5F0;

    /* === Elevation === */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.08);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.10);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.08), 0 2px 3px rgba(0,0,0,.10);
    --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,.09), 0 4px 4px rgba(0,0,0,.10);

    /* === Shape Scale === */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small:       8px;
    --md-sys-shape-corner-medium:      12px;
    --md-sys-shape-corner-large:       16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full:        9999px;

    /* === Motion Durations (full set from index.css) === */
    --md-sys-motion-duration-short1:    50ms;
    --md-sys-motion-duration-short2:    100ms;
    --md-sys-motion-duration-short3:    150ms;
    --md-sys-motion-duration-short4:    200ms;
    --md-sys-motion-duration-medium1:   250ms;
    --md-sys-motion-duration-medium2:   300ms;
    --md-sys-motion-duration-medium3:   350ms;
    --md-sys-motion-duration-medium4:   400ms;
    --md-sys-motion-duration-long1:     450ms;
    --md-sys-motion-duration-long2:     500ms;
    --md-sys-motion-duration-long3:     550ms;
    --md-sys-motion-duration-long4:     600ms;
    --md-sys-motion-duration-extra-long1: 700ms;
    --md-sys-motion-duration-extra-long2: 800ms;

    /* === Motion Easings (full set from index.css) === */
    --md-sys-motion-easing-linear:              linear;
    --md-sys-motion-easing-standard:            cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-emphasized:          cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

    /* === Brand Colors === */
    --c-moss:       #AEBF96;
    --c-moss-light: #C7D7B2;
    --c-moss-dark:  #7F8C6D;
    --c-charcoal:   #2F342C;
    --c-slate:      #6E7566;

    /* === Data Visualization Colors (Light) — needed for background lines === */
    --data-viz-primary:    #D946EF;
    --data-viz-secondary:  #FB7185;
    --data-viz-accent:     #06B6D4;
    --data-viz-grid:       rgba(175, 191, 150, 0.15);
    --data-viz-grid-major: rgba(175, 191, 150, 0.25);
}

/* ── DARK MODE TOKENS ── */
body.dark {
    --md-sys-color-primary:              #A3C77E;
    --md-sys-color-on-primary:           #1B3700;
    --md-sys-color-primary-container:    #2B5000;
    --md-sys-color-on-primary-container: #BFDD9B;
    --md-sys-color-secondary:            #B7CCA0;
    --md-sys-color-on-secondary:         #233515;
    --md-sys-color-secondary-container:  #394C2A;
    --md-sys-color-on-secondary-container: #D3E8BA;
    --md-sys-color-tertiary:             #B8BFFF;
    --md-sys-color-on-tertiary:          #1A2876;
    --md-sys-color-tertiary-container:   #3140A0;
    --md-sys-color-background:           #1C2119;
    --md-sys-color-on-background:        #DDE3D0;
    --md-sys-color-surface:              #1C2119;
    --md-sys-color-on-surface:           #DDE3D0;
    --md-sys-color-surface-variant:      #343C30;
    --md-sys-color-on-surface-variant:   #8A9480;
    --md-sys-color-surface-container-lowest:  #161B14;
    --md-sys-color-surface-container-low:     #1C2119;
    --md-sys-color-surface-container:         #262B23;
    --md-sys-color-surface-container-high:    #2C332A;
    --md-sys-color-surface-container-highest: #343C30;
    --md-sys-color-outline:              #7F8C6D;
    --md-sys-color-outline-variant:      #3A4234;
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.35);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.35);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.35);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.32), 0 2px 3px rgba(0,0,0,.37);
    --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,.34), 0 4px 4px rgba(0,0,0,.39);

    /* === Data Visualization Colors (Dark) === */
    --data-viz-primary:    #E879F9;
    --data-viz-secondary:  #FDA4AF;
    --data-viz-accent:     #67E8F9;
    --data-viz-grid:       rgba(127, 140, 109, 0.12);
    --data-viz-grid-major: rgba(127, 140, 109, 0.2);
}

/* ============================================================================
   UNIFIED ADAPTIVE BACKGROUND SYSTEM — cloned from index.css
   Data-Inspired Grid & Curves
   ============================================================================ */

body {
    position: relative;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: 'Google Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background-color var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized),
        color var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
    margin: 0;
    min-height: 100vh;
}

/* Unified Background Canvas — vertical + horizontal grid lines */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        /* Vertical Grid Lines */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(100% / 12 - 1px),
            var(--data-viz-grid) calc(100% / 12 - 1px),
            var(--data-viz-grid) calc(100% / 12)
        ),
        /* Horizontal Grid Lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 79px,
            var(--data-viz-grid) 79px,
            var(--data-viz-grid) 80px
        ),
        /* Major Horizontal Lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 239px,
            var(--data-viz-grid-major) 239px,
            var(--data-viz-grid-major) 240px
        );
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard);
}

/* Data-Inspired Curved Lines — the signature "chart arcs" */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        /* Upper Curve - Primary */
        radial-gradient(
            ellipse 120% 50% at 50% -10%,
            transparent 49.5%,
            var(--data-viz-primary) 49.5%,
            var(--data-viz-primary) 50.5%,
            transparent 50.5%
        ),
        /* Mid Curve - Secondary */
        radial-gradient(
            ellipse 100% 60% at 70% 40%,
            transparent 49%,
            var(--data-viz-secondary) 49%,
            var(--data-viz-secondary) 51%,
            transparent 51%
        ),
        /* Lower Curve - Accent */
        radial-gradient(
            ellipse 90% 45% at 30% 85%,
            transparent 48.5%,
            var(--data-viz-accent) 48.5%,
            var(--data-viz-accent) 51.5%,
            transparent 51.5%
        );
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard);
}

body.dark::after {
    opacity: 0.25;
    mix-blend-mode: screen;
}

/* Gradient Overlay for Depth */
.md3-main::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        ellipse 120% 100% at 50% 0%,
        transparent 0%,
        var(--md-sys-color-background) 100%
    );
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================================================
   GLOBAL RESETS & BASE STYLES
   ============================================================================ */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:hover, a:visited, a:active, a:focus { text-decoration: none; }

::selection          { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
::-moz-selection     { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

::-webkit-scrollbar        { width: 12px; height: 12px; }
::-webkit-scrollbar-track  { background: var(--md-sys-color-surface-container); }
::-webkit-scrollbar-thumb  {
    background: var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    border: 3px solid var(--md-sys-color-surface-container);
    transition: background var(--md-sys-motion-duration-short4);
}
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-primary); }
* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline) var(--md-sys-color-surface-container); }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
    border-radius: var(--md-sys-shape-corner-extra-small);
}
*:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Image lazy-load fade — from index.css */
img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease-in; }
img[loading="lazy"].loaded { opacity: 1; }

/* ============================================================================
   TOP APP BAR — matched to index.css
   ============================================================================ */
.md3-top-app-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 64px;
    background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 85%, transparent);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    transition:
        background var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
        border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
        transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.md3-top-app-bar.scrolled {
    box-shadow: var(--md-sys-elevation-2);
    background: color-mix(in srgb, var(--md-sys-color-surface-container) 95%, transparent);
    border-bottom-color: transparent;
    transform: translateY(-1px);
}

.md3-top-app-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.md3-top-app-bar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition:
        opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.md3-top-app-bar__logo:hover { opacity: 0.88; transform: scale(1.02); }
.md3-top-app-bar__logo-img { height: 48px; width: auto; object-fit: contain; }

.md3-nav-tabs { display: none; align-items: center; gap: 4px; flex: 1; justify-content: center; }
@media (min-width: 768px) { .md3-nav-tabs { display: flex; } }

.md3-nav-tab {
    position: relative;
    padding: 10px 20px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    transition:
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}

.md3-nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--md-sys-color-primary);
    border-radius: 3px 3px 0 0;
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.md3-nav-tab:hover {
    color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
    transform: translateY(-1px);
}

.md3-nav-tab--active, .md3-nav-tab.active { color: var(--md-sys-color-primary); font-weight: 700; }
.md3-nav-tab--active::after, .md3-nav-tab.active::after { width: calc(100% - 40px); }

.md3-top-app-bar__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.md3-top-app-bar__menu-btn { display: flex; }
@media (min-width: 768px) { .md3-top-app-bar__menu-btn { display: none; } }

/* ============================================================================
   ICON BUTTONS — matched to index.css
   ============================================================================ */
.md3-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.md3-icon-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-icon-btn:hover::before  { opacity: 0.08; }
.md3-icon-btn:focus::before  { opacity: 0.12; }
.md3-icon-btn:active         { transform: scale(0.92); }
.md3-icon-btn:active::before { opacity: 0.16; }
.md3-icon-btn .material-symbols-rounded { font-size: 20px; line-height: 1; position: relative; z-index: 1; }

/* ============================================================================
   NAVIGATION DRAWER — matched to index.css
   ============================================================================ */
.md3-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
    z-index: 299;
    backdrop-filter: blur(4px);
}
.md3-scrim.active { opacity: 1; pointer-events: auto; }

.md3-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(360px, 90vw);
    background: var(--md-sys-color-surface-container-low);
    display: flex;
    flex-direction: column;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate);
    overflow: hidden;
    box-shadow: var(--md-sys-elevation-3);
}
.md3-drawer.active {
    transform: translateX(0);
    transition: transform var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md3-drawer__header {
    padding: 24px 16px 16px;
    background: var(--md-sys-color-surface-container-low);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.md3-drawer__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.md3-drawer__brand      { display: flex; align-items: center; gap: 12px; }
.md3-drawer__logo-wrap  { width: 56px; height: 56px; flex-shrink: 0; }
.md3-drawer__logo-img   { width: 100%; height: 100%; object-fit: contain; }
.md3-drawer__brand-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin: 0;
    line-height: 1.2;
}
.md3-drawer__brand-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0;
    line-height: 1.2;
}
.md3-drawer__tagline {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
    margin: 0;
}
.md3-drawer__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    background: var(--md-sys-color-surface-container);
}
.md3-drawer__footer {
    padding: 16px;
    background: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.md3-drawer__social     { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.md3-drawer__copyright  { font-size: 12px; color: var(--md-sys-color-on-surface-variant); text-align: center; margin: 0; }

.md3-nav-list { list-style: none; padding: 0; margin: 4px 0; }

.md3-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
    margin: 2px 12px 2px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    position: relative;
    overflow: hidden;
    transition:
        background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.md3-nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-nav-item:hover           { transform: translateX(4px); }
.md3-nav-item:hover::before   { opacity: 0.08; }
.md3-nav-item--active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 700;
}
.md3-nav-item__icon { font-size: 22px; }

.md3-divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: 8px 0; }

/* ============================================================================
   BUTTONS — matched to index.css (morphing border-radius on hover)
   ============================================================================ */
.md3-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition:
        background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized),
        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
        border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.md3-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-btn > * { position: relative; z-index: 1; }
.md3-btn:hover         { transform: translateY(-1px) scale(1.01); }
.md3-btn:hover::before { opacity: 0.08; }
.md3-btn:active        { transform: scale(0.97); }
.md3-btn:active::before { opacity: 0.16; }

.md3-btn--filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.md3-btn--filled:hover {
    box-shadow: var(--md-sys-elevation-1);
    border-radius: var(--md-sys-shape-corner-large); /* morph */
}
.md3-btn--tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.md3-btn--tonal:hover { box-shadow: var(--md-sys-elevation-1); }
.md3-btn .material-symbols-rounded { font-size: 18px; }

/* ============================================================================
   BREADCRUMB
   ============================================================================ */
.md3-breadcrumb { padding: 24px 24px 16px; max-width: 1280px; margin: 0 auto; }
.md3-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}
.md3-breadcrumb__item     { display: flex; align-items: center; gap: 8px; }
.md3-breadcrumb__link     { font-size: 14px; color: var(--md-sys-color-primary); transition: color .2s; }
.md3-breadcrumb__link:hover { color: var(--md-sys-color-on-primary-container); }
.md3-breadcrumb__item--current span { font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.md3-breadcrumb__separator { font-size: 18px; color: var(--md-sys-color-on-surface-variant); }

/* ============================================================================
   MAIN CONTENT WRAPPER
   ============================================================================ */
.md3-main { position: relative; }

/* ============================================================================
   SOC DETAIL HERO
   ============================================================================ */
.md3-soc-detail-hero {
    padding: 24px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

/* ── Hero Card ── */
.md3-hero-card {
    background: linear-gradient(
        135deg,
        var(--md-sys-color-surface-container-low) 0%,
        color-mix(in srgb, var(--md-sys-color-surface-container) 95%, var(--c-moss) 5%) 100%
    );
    border-radius: var(--md-sys-shape-corner-extra-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-sys-elevation-1);
    padding: 32px;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
    transition:
        transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.md3-hero-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--md-sys-elevation-4);
    border-radius: var(--md-sys-shape-corner-medium);
}

/* Animated blobs behind the hero card */
.md3-hero-card::before,
.md3-hero-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-moss-light) 0%, transparent 70%);
    opacity: 0.15;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    animation: blobFloat 20s ease-in-out infinite;
}
.md3-hero-card::before { width: 400px; height: 400px; top: -100px; right: -100px; animation-delay: 0s; }
.md3-hero-card::after  { width: 300px; height: 300px; bottom: -80px; left: -80px; animation-delay: 10s; }

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -30px) scale(1.1); }
    66%       { transform: translate(-20px, 20px) scale(0.9); }
}

.md3-hero-card__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 1024px) {
    .md3-hero-card__inner { grid-template-columns: 300px 1fr; }
    .md3-soc-logo-card { max-width: 100%; aspect-ratio: 16 / 9; }
}

/* ── SoC Showcase ── */
.md3-soc-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.md3-soc-showcase__ambient {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.md3-showcase-glow {
    position: absolute;
    width: 220px; height: 220px;
    background: radial-gradient(circle, var(--c-moss) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(40px);
    animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1);   opacity: 0.3; }
    50%       { transform: scale(1.2); opacity: 0.5; }
}

/* ── 16:9 Brand Logo Card (replaces the old square icon) ── */
.md3-soc-logo-card {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 6;
    background: linear-gradient(
        135deg,
        var(--md-sys-color-surface-container-high) 0%,
        color-mix(in srgb, var(--c-moss) 12%, var(--md-sys-color-surface-container)) 100%
    );
    border-radius: var(--md-sys-shape-corner-extra-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transition:
        transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
        border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* Shimmer sweep on parent card hover */
.md3-soc-logo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.10) 50%,
        transparent 100%
    );
    transform: translateX(-150%);
    transition: transform 0.7s var(--md-sys-motion-easing-standard);
    pointer-events: none;
}
.md3-hero-card:hover .md3-soc-logo-card::after {
    transform: translateX(150%);
}
.md3-hero-card:hover .md3-soc-logo-card {
    transform: scale(1.02);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.12);
    border-radius: var(--md-sys-shape-corner-large);
}

/* The brand logo image inside the card */
.md3-soc-logo-img {
    width: 65%;
    height: 65%;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
    position: relative;
    z-index: 1;
    /* subtle drop-shadow so logos pop on both light & dark backgrounds */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
}
.md3-soc-logo-img.loaded {
    opacity: 1;
}

/* Fallback shown when no logo is available */
.md3-soc-logo-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    inset: 0;
    color: var(--md-sys-color-on-surface-variant);
}
.md3-soc-logo-fallback .material-symbols-rounded {
    font-size: 40px;
    opacity: 0.5;
}
.md3-soc-logo-fallback span:not(.material-symbols-rounded) {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

/* ── SoC Info column ── */
.md3-brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    border: 1px solid var(--md-sys-color-outline-variant);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: fit-content;
    margin-bottom: 12px;
}

.md3-soc-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 8px;
}
.md3-soc-subtitle {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 16px;
}

/* ── Specs Chips Card with animated watermark ── */
.md3-specs-chips-card {
    position: relative;
    padding: 24px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-extra-large);
    overflow: hidden;
    margin-bottom: 20px;
}
/* Animated text shadow watermark */
.md3-specs-chips-card::before {
    content: attr(data-brand);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(60px, 12vw, 120px);
    font-weight: 900;
    font-family: 'Orbitron', 'Bebas Neue', 'Montserrat', sans-serif;
    color: transparent;
    background: linear-gradient(
        135deg,
        var(--md-sys-color-on-surface) 0%,
        var(--md-sys-color-on-surface-variant) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.06;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    letter-spacing: 0.05em;
    animation: brandPulse 8s ease-in-out infinite;
}
@keyframes brandPulse {
    0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 0.10; transform: translate(-50%, -50%) scale(1.05); }
}
.md3-specs-chips-card:hover::before { opacity: 0.12; animation-play-state: paused; }

.md3-specs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.md3-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    transition:
        transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
        background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-spec-chip:hover {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
    transform: translateY(-2px);
}
.md3-spec-chip .material-symbols-rounded { font-size: 16px; color: var(--md-sys-color-primary); }
.md3-spec-chip--primary {
    background: var(--md-sys-color-primary-container);
    border-color: transparent;
    color: var(--md-sys-color-on-primary-container);
    font-weight: 700;
}
.md3-spec-chip--primary .material-symbols-rounded { color: var(--md-sys-color-primary); }

.md3-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ── Info Cards ── */

/* ============================================================================
   QUICK SPECS — SQUARE TILES (replaces old md3-spec-chip rectangles)
   ============================================================================ */

/* Remove old spec chips */
.md3-specs-chips-card { display: none; }

/* New square-tile grid */
.md3-quick-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 16px 0 20px;
    position: relative;
}

/* Watermark from brand */
.md3-quick-specs::after {
    content: attr(data-brand);
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 42px;
    font-weight: 900;
    color: var(--md-sys-color-primary);
    opacity: 0.05;
    letter-spacing: -2px;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.md3-qs-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-align: center;
    transition:
        transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-qs-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--md-sys-elevation-2);
    border-color: var(--md-sys-color-primary);
}
.md3-qs-tile--accent {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}
.md3-qs-tile__icon {
    font-size: 18px;
    color: var(--md-sys-color-primary);
}
.md3-qs-tile--accent .md3-qs-tile__icon {
    color: var(--md-sys-color-on-primary-container);
}
.md3-qs-tile__value {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md3-qs-tile--accent .md3-qs-tile__value {
    color: var(--md-sys-color-on-primary-container);
}
.md3-qs-tile__label {
    font-size: 9px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.md3-qs-tile--accent .md3-qs-tile__label {
    color: var(--md-sys-color-on-primary-container);
    opacity: 0.8;
}

/* On wider screens allow more columns */
@media (min-width: 480px) {
    .md3-quick-specs { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .md3-qs-tile__value { font-size: 12px; }
    .md3-qs-tile__label { font-size: 10px; }
}

/* ============================================================================
   BENCHMARK INFO CARDS — compact, replaces old md3-info-cards-grid
   ============================================================================ */
.md3-bench-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
@media (max-width: 480px) {
    .md3-bench-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.md3-bench-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-sys-elevation-1);
    transition:
        transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-bench-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--md-sys-elevation-3);
    border-color: var(--md-sys-color-primary);
}
.md3-bench-card__icon {
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-small);
    flex-shrink: 0;
}
.md3-bench-card__icon .material-symbols-rounded { font-size: 20px; color: var(--md-sys-color-on-primary-container); }
.md3-bench-card__body { flex: 1; min-width: 0; }
.md3-bench-card__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    white-space: nowrap;
}
.md3-bench-card__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   FULL SPECS SECTION — straight card grid, NO TABS
   ============================================================================ */
.md3-specs-section { padding: 0 16px 40px; max-width: 1280px; margin: 0 auto; }

.md3-section-header { margin-bottom: 20px; }
.md3-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin: 0;
}
.md3-section-title__icon { font-size: 26px; color: var(--md-sys-color-primary); }

/* Grid of spec cards */
.md3-all-specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    /* Explicit row-gap and column-gap to be safe */
    row-gap: 14px;
    column-gap: 14px;
}
@media (min-width: 560px)  { .md3-all-specs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .md3-all-specs-grid { grid-template-columns: repeat(3, 1fr); } }

.md3-spec-card {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    box-shadow: var(--md-sys-elevation-1);
    transition:
        transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    will-change: transform;
    backface-visibility: hidden;
}
.md3-spec-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--md-sys-elevation-3);
    border-color: var(--md-sys-color-primary);
}

/* Benchmarks card spans full width on its row */
.md3-spec-card--bench {
    grid-column: 1 / -1;
}
@media (min-width: 1024px) {
    .md3-spec-card--bench { grid-column: span 2; }
}

/* Features card always full width */
.md3-spec-card--full { grid-column: 1 / -1; }

.md3-spec-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin: 0;
}
.md3-spec-card__header .material-symbols-rounded {
    font-size: 16px;
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    padding: 4px;
    border-radius: var(--md-sys-shape-corner-small);
}

.md3-spec-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    /* Clamp card height — rows now wrap so allow more space */
    max-height: 360px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.05, 0.7, 0.1, 1);
}
.md3-spec-list.expanded {
    max-height: 9999px;
}

.md3-spec-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    flex-shrink: 0;
    border-radius: var(--md-sys-shape-corner-small);
}
.md3-spec-row:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent); }

.md3-spec-row__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    min-width: 80px;
    max-width: 110px;
    line-height: 1.4;
    padding-top: 1px; /* optical alignment with value */
}
.md3-spec-row__value {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    text-align: right;
    flex: 1;
    min-width: 0;
    cursor: default;
    /* Allow long values to wrap naturally — classic Android Settings look */
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}
.md3-spec-row__value--hi { color: var(--md-sys-color-primary); }

/* Show-more toggle button at bottom of card */
.md3-spec-card__toggle {
    display: none; /* shown by JS when list overflows */
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 16px;
    background: var(--md-sys-color-surface-container);
    border: none;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    font-size: 11px;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.md3-spec-card__toggle:hover { background: var(--md-sys-color-primary-container); }
.md3-spec-card__toggle .material-symbols-rounded {
    font-size: 16px;
    transition: transform 0.3s var(--md-sys-motion-easing-emphasized);
}
.md3-spec-card__toggle.active .material-symbols-rounded { transform: rotate(180deg); }

/* Features body */
.md3-features-body {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.6;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.05, 0.7, 0.1, 1);
}
.md3-features-body.expanded { max-height: 600px; }

/* Fade gradient at bottom of clamped list to hint there's more */
.md3-spec-list-wrap {
    position: relative;
    /* No margin/padding — sits flush inside the card */
}
.md3-spec-list-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px;
    background: linear-gradient(to bottom,
        transparent,
        var(--md-sys-color-surface-container-low) 90%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 1;
    z-index: 1;
}
.md3-spec-list-wrap.expanded::after  { opacity: 0; pointer-events: none; }
.md3-spec-list-wrap:not(.has-overflow)::after { display: none; }

/* ============================================================================
   HIDE OLD TAB SYSTEM (no longer used)
   ============================================================================ */
.md3-tabs, .md3-tab-panels { display: none !important; }


/* ============================================================================
   RELATED PHONES SECTION
   ============================================================================ */
.md3-related-section { padding: 32px 24px; max-width: 1280px; margin: 0 auto; }

.md3-related-section__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.md3-related-section__accent {
    width: 3px;
    height: 40px;
    background: linear-gradient(to bottom, var(--md-sys-color-primary), transparent);
    border-radius: var(--md-sys-shape-corner-full);
}
.md3-related-section__title {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 2px;
}
.md3-related-section__sub { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin: 0; }

.md3-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.md3-related-card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    box-shadow: var(--md-sys-elevation-1);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    transition:
        transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized),
        box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.md3-related-card:hover {
    box-shadow: var(--md-sys-elevation-3);
    transform: translateY(-6px);
    border-color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-medium);
}
.md3-related-card__image-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: var(--md-sys-color-surface-container-high);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.md3-related-card__image { width: 100%; height: 100%; object-fit: cover; }
.md3-related-card__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md3-related-card__fallback .material-symbols-rounded { font-size: 56px; color: var(--md-sys-color-on-surface-variant); opacity: 0.4; }
.md3-related-card__content { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.md3-related-card__name  { font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface); line-height: 1.3; margin: 0; }
.md3-related-card__brand { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.md3-related-card__price { font-size: 16px; font-weight: 700; color: var(--md-sys-color-primary); margin-top: auto; }

/* ============================================================================
   FOOTER — matched to index.css
   ============================================================================ */
.md3-footer {
    background: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 64px 24px 40px;
    position: relative;
}

.md3-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* Centred logo block — bigger, with drop-shadow */
.md3-footer__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}
.md3-footer__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}
.md3-footer__logo-wrap:hover { transform: scale(1.06); }
.md3-footer__logo-img {
    width: 128px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.10));
}

/* 2-col mobile → 4-col desktop, centred on mobile */
.md3-footer__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 48px;
    text-align: center;
    margin-bottom: 64px;
}
@media (min-width: 768px) {
    .md3-footer__links { grid-template-columns: repeat(4, 1fr); text-align: left; }
}

.md3-footer__col-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 16px;
}

.md3-footer__link {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    padding: 5px 0;
    display: block;
    transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md3-footer__link:hover { color: var(--md-sys-color-primary); }

/* Gradient divider — from index.css */
.md3-footer__divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--md-sys-color-outline-variant),
        transparent
    );
    margin-bottom: 48px;
}

/* Bottom row — col on mobile, row on desktop */
.md3-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
@media (min-width: 768px) {
    .md3-footer__bottom { flex-direction: row; justify-content: space-between; }
}

.md3-footer__copyright { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin: 0; }
.md3-footer__social     { display: flex; align-items: center; gap: 8px; }

/* Social icon buttons */
.social-icon-btn {
    color: var(--md-sys-color-on-surface-variant);
    transition:
        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.social-icon-btn:hover { color: var(--md-sys-color-primary); transform: scale(1.15); }

/* ============================================================================
   WILL-CHANGE PERFORMANCE HINTS
   ============================================================================ */
.md3-info-card,
.md3-spec-section,
.md3-related-card,
.md3-hero-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden   { display: none !important; }
.text-sm  { font-size: 13px; }
.text-xs  { font-size: 11px; }
.font-bold { font-weight: 700; }
.nav-link    { color: var(--md-sys-color-on-surface-variant); }
.nav-link.active { color: var(--md-sys-color-primary); }
.sidebar-link { color: var(--md-sys-color-on-surface-variant); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 640px) {
    .md3-hero-card { padding: 24px; }
    .md3-soc-icon-large { width: 140px; height: 140px; }
    .md3-soc-icon-large .md3-brand-text-logo { font-size: 28px; }
    .md3-related-grid { grid-template-columns: repeat(2, 1fr); }
    .md3-footer { padding: 48px 24px 32px; }
    .md3-footer__brand { margin-bottom: 40px; }
    .md3-footer__logo-img { width: 96px; }
    .md3-footer__links { margin-bottom: 40px; }
}

@media print {
    .md3-top-app-bar, .md3-drawer, .md3-scrim, button { display: none !important; }
}