/*
 * CyberRamen.com — Main Stylesheet
 *
 * Professional security tools site with warm cream + red accent.
 * Clean, minimal, content-first.
 *
 * Evidence: Lingaard 2022 (16px+ body), NNGroup (50-75ch line length),
 * Shift eLearning (1.5-1.7 line height), WCAG 2.2 (AA 4.5:1 contrast),
 * Gullikson IA study, Shaikh & Lenz (search placement).
 */

:root {
    --cream:        #f2ebe0;
    --cream-dark:   #e8e0d2;
    --cream-darker: #d8cebb;
    --red:          #b83224;
    --red-hover:    #9c2a1e;
    --red-dim:      rgba(184, 50, 36, 0.08);
    --ink:          #1a1210;
    --ink-light:    #4a3e38;
    --ink-muted:    #7a6e66;
    --ink-faint:    #a89e94;

    --font-display: 'Syne', 'Orbitron', sans-serif;
    --font-mono:    'IBM Plex Mono', 'Share Tech Mono', monospace;

    /* tools.css / themes.css contract */
    --bg-deep: var(--cream);
    --bg-primary: var(--cream);
    --bg-card: var(--cream);
    --bg-card-hover: var(--cream-dark);
    --bg-elevated: var(--cream);
    --neon-pink: var(--red); --neon-cyan: var(--red); --neon-yellow: var(--red);
    --neon-green: var(--red); --neon-orange: var(--red); --neon-purple: var(--red);
    --text-primary: var(--ink); --text-secondary: var(--ink-light);
    --text-muted: var(--ink-muted); --text-dim: var(--ink-faint);
    --border-subtle: var(--cream-darker); --border-glow: var(--red);
    --glow-pink: none; --glow-cyan: none; --glow-yellow: none; --glow-green: none;
    --font-body: var(--font-mono); --font-heading: var(--font-display);
    --font-accent: var(--font-display);
    --color-bg: var(--cream); --color-bg-secondary: var(--cream-dark);
    --color-bg-tertiary: var(--cream-darker); --color-bg-card: var(--cream);
    --color-border: var(--cream-darker); --color-border-input: var(--cream-darker);
    --color-border-hover: var(--red);
    --color-text: var(--ink); --color-text-muted: var(--ink-muted);
    --color-accent: var(--red); --color-accent-hover: var(--red-hover);
    --color-accent-strong: var(--red);
    --color-error: #b71c1c; --color-success: #2e7d32;
    --color-warning: #e65100; --color-info: var(--red);
    --color-link: var(--red); --color-link-hover: var(--red-hover);
    --color-success-bg: rgba(46,125,50,0.08);
    --color-error-bg: rgba(183,28,28,0.08);
    --color-error-bg-strong: rgba(183,28,28,0.15);
    --color-warning-bg: rgba(230,81,0,0.08);
    --color-accent-bg: var(--red-dim);
    --color-accent-bg-subtle: rgba(184,50,36,0.04);
}


/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--red-hover); }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip-link {
    position: absolute; top: -100%; left: 1rem;
    background: var(--red); color: var(--cream);
    padding: 0.5rem 1rem; font-weight: 700; z-index: 9999;
}
.skip-link:focus { top: 0.5rem; }

.container { max-width: 1060px; margin: 0 auto; padding: 0 2rem; }


/* === Header === */
.header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1.5rem 0 1.2rem;
    border-bottom: 1px solid var(--cream-darker);
}

.header h1 {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
}
.header h1 a { color: var(--ink); }
.header h1 a:hover { color: var(--ink); }
.header h1 .cyber { color: var(--red); }
.header h1 .dot-com { color: var(--ink); }

.subtitle {
    font-size: 0.68rem; color: var(--ink-faint);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-top: 0.15rem;
}

.nav { display: flex; gap: 0.1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.nav a {
    padding: 0.35rem 0.65rem; font-size: 0.76rem;
    color: var(--ink-muted); letter-spacing: 0.02em;
}
.nav a:hover { color: var(--red); }
.nav a.active { color: var(--red); font-weight: 600; }


/* === Hero === */
.cyber-hero { text-align: center; padding: 3.5rem 0 2rem; }
.cyber-hero::before, .cyber-hero::after { display: none; }
.hero-content { max-width: 620px; margin: 0 auto; }

.steam-container { position: relative; display: inline-block; margin-bottom: 0.5rem; }
.steam {
    position: absolute; width: 3px; height: 20px;
    background: linear-gradient(transparent, rgba(184,50,36,0.08));
    border-radius: 50%; animation: steam 3s ease-out infinite; opacity: 0;
}
.steam:nth-child(1) { left: 25%; animation-delay: 0s; }
.steam:nth-child(2) { left: 40%; animation-delay: 0.6s; }
.steam:nth-child(3) { left: 55%; animation-delay: 1.2s; }
.steam:nth-child(4) { left: 70%; animation-delay: 0.4s; }
.steam:nth-child(5) { left: 85%; animation-delay: 1s; }
@keyframes steam {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 0.3; }
    100% { transform: translateY(-40px); opacity: 0; }
}

.ramen-ascii {
    font-family: var(--font-mono);
    font-size: clamp(0.48rem, 1vw, 0.72rem);
    line-height: 1.3; color: var(--red); opacity: 0.35; white-space: pre;
}

.shop-sign {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 2.8rem);
    font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.1; margin: 0.6rem 0 0.2rem;
}
.shop-sign .cyber { color: var(--red); }
.shop-sign .ramen { color: var(--ink); }

.shop-tagline { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.shop-subtitle {
    font-size: 0.88rem; color: var(--ink-muted); line-height: 1.7;
    max-width: 50ch; margin: 0 auto 1.5rem;
}

/* Trust badges */
.trust-strip { margin-bottom: 1.5rem; }
.trust-strip-tagline { font-size: 0.72rem; color: var(--ink-faint); margin-bottom: 0.5rem; }
.trust-strip-badges { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; }
.trust-badge {
    font-size: 0.68rem; color: var(--ink-muted);
    background: var(--cream-dark); padding: 0.3rem 0.7rem;
    border-radius: 3px; letter-spacing: 0.02em;
}

/* Stats */
.hero-stats { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat-num {
    font-family: var(--font-display); font-size: 1.6rem;
    font-weight: 800; color: var(--red); line-height: 1.2;
}
.hero-stat-label { font-size: 0.7rem; color: var(--ink-faint); }


/* === Dividers === */
.jp-divider {
    text-align: center; padding: 1rem 0; font-size: 0.75rem;
    color: var(--ink-faint); letter-spacing: 0.25em;
}
.jp-divider::before, .jp-divider::after { display: none; }


/* === Quick links === */
.quick-links {
    display: flex; justify-content: center; gap: 0.5rem;
    flex-wrap: wrap; padding: 0.5rem 0 2rem;
}
.quick-links a {
    padding: 0.45rem 1.1rem; font-size: 0.78rem;
    color: var(--red); border: 1px solid var(--red);
    border-radius: 4px; min-height: 44px;
    display: inline-flex; align-items: center;
    font-weight: 500; transition: background 0.15s, color 0.15s;
}
.quick-links a::before { display: none; }
.quick-links a:hover { background: var(--red); color: var(--cream); }


/* === Menu sections === */
.menu-section { margin-bottom: 2.5rem; }

.menu-header {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding-bottom: 0.6rem; border-bottom: 2px solid var(--red);
    margin-bottom: 1rem;
}
.menu-header::before { display: none; }
.menu-icon { font-size: 1.1rem; }
.menu-title {
    font-family: var(--font-display); font-size: 1.1rem;
    font-weight: 800; color: var(--ink);
}
.menu-jp { font-size: 0.9rem; color: var(--ink-faint); letter-spacing: 0.06em; }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.5rem;
}

.menu-item {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1rem 1.1rem; border-radius: 6px;
    text-decoration: none; transition: background 0.15s;
    border: 1px solid transparent;
}
.menu-item::before { display: none; }
.menu-item:hover { background: var(--cream-dark); border-color: var(--cream-darker); }
.menu-item:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.menu-item-top { display: flex; align-items: center; gap: 0.4rem; }
.menu-item-icon { font-size: 1rem; }
.menu-item-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.menu-item-desc { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.65; flex: 1; }
.menu-item-price { font-size: 0.68rem; color: var(--ink-faint); font-style: italic; }

.browse-all { text-align: center; padding: 1.2rem 0; }
.browse-all a { font-size: 0.85rem; color: var(--red); font-weight: 600; }


/* === Home info === */
.home-info {
    background: var(--cream-dark); border-radius: 6px;
    padding: 1.2rem 1.5rem; text-align: center; margin-bottom: 2rem;
}
.home-info p { font-size: 0.82rem; color: var(--ink-muted); margin: 0 auto; }
.home-info p + p { margin-top: 0.25rem; }


/* === Buttons === */
.btn, button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 44px; padding: 0.5rem 1.2rem;
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
    background: var(--cream); border: 1px solid var(--cream-darker);
    color: var(--ink-light); cursor: pointer; text-decoration: none;
    border-radius: 4px; transition: border-color 0.15s, color 0.15s;
}
.btn::before, button::before { display: none; }
.btn:hover, button:hover { border-color: var(--red); color: var(--red); }
.btn:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.btn-primary { background: var(--red); color: var(--cream); border-color: var(--red); }
.btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--cream); }


/* === Forms === */
input, select, textarea {
    font-family: var(--font-mono); font-size: 0.88rem;
    color: var(--ink); background: var(--cream);
    border: 1px solid var(--cream-darker); padding: 0.55rem 0.8rem;
    border-radius: 4px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--red); outline: none;
    box-shadow: 0 0 0 3px var(--red-dim);
}

.search-box {
    width: 100%; max-width: 480px; display: block; margin: 0 auto;
    padding: 0.6rem 0.9rem; background: var(--cream-dark);
    border: 1px solid var(--cream-darker); border-radius: 5px;
    font-family: var(--font-mono); font-size: 0.88rem;
    color: var(--ink); min-height: 44px;
}
.search-box::placeholder { color: var(--ink-faint); }
.search-box:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px var(--red-dim); }


/* === Footer === */
.footer {
    border-top: 1px solid var(--cream-darker);
    padding: 2rem 0 1.5rem; text-align: center; margin-top: 3rem;
}
.footer::before { display: none; }
.footer-ramen { font-size: 1.3rem; margin-bottom: 0.5rem; opacity: 0.5; }
.footer-badges { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.footer-badge {
    font-size: 0.65rem; color: var(--ink-faint);
    background: var(--cream-dark); padding: 0.2rem 0.55rem;
    border-radius: 3px;
}
.footer-privacy-note {
    font-size: 0.75rem; color: var(--ink-muted); line-height: 1.7;
    max-width: 58ch; margin: 0 auto 0.75rem;
}
.footer-links { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.footer-links a { font-size: 0.75rem; color: var(--ink-muted); }
.footer-links a:hover { color: var(--red); }
.footer p { font-size: 0.72rem; color: var(--ink-faint); }
.footer a { color: var(--red); }


/* === Tools page === */
.menu-banner { text-align: center; padding: 2.5rem 0 1rem; }
.menu-banner-ascii {
    font-family: var(--font-mono); font-size: clamp(0.42rem, 0.85vw, 0.65rem);
    line-height: 1.25; color: var(--red); opacity: 0.25;
    white-space: pre; margin-bottom: 0.75rem;
}
.t-pink, .t-cyan { color: var(--red); }
.menu-count { font-size: 0.82rem; color: var(--ink-muted); margin-bottom: 1rem; }
.menu-divider { border: none; border-top: 1px solid var(--cream-darker); margin: 1rem 0; }

.filter-pills {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    justify-content: center; margin-bottom: 1.5rem;
}
.filter-pill {
    padding: 0.35rem 0.8rem; font-size: 0.72rem;
    font-family: var(--font-mono); font-weight: 500;
    color: var(--ink-muted); background: var(--cream-dark);
    border: 1px solid transparent; border-radius: 4px;
    cursor: pointer; min-height: 34px;
    display: inline-flex; align-items: center;
    transition: all 0.15s;
}
.filter-pill:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.filter-pill.active { background: var(--red); color: var(--cream); border-color: var(--red); }
.filter-pill-count { font-size: 0.65rem; opacity: 0.6; margin-left: 0.25rem; }

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.5rem; margin-bottom: 2rem;
}

.tool-card {
    padding: 1rem 1.1rem; border-radius: 6px;
    text-decoration: none; border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.tool-card::before { display: none; }
.tool-card:hover { background: var(--cream-dark); border-color: var(--cream-darker); }
.tool-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tool-card-link { text-decoration: none; color: inherit; }
.tool-card-link:hover { text-decoration: none; }
.tool-icon { font-size: 1.1rem; margin-bottom: 0.35rem; }
.tool-card h3 { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; line-height: 1.3; }
.tool-card p { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; }

.hidden-by-filter, .hidden-by-search { display: none !important; }
.no-results, .empty-state { text-align: center; padding: 2.5rem 1rem; }
.empty-state-icon { font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.3; }
.empty-state-text { color: var(--ink-light); }
.empty-state-hint { font-size: 0.82rem; color: var(--ink-muted); }

.menu-categories { margin-bottom: 2rem; }
.menu-cat { margin-bottom: 1.5rem; }
.menu-cat-header {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding-bottom: 0.4rem; border-bottom: 2px solid var(--red); margin-bottom: 0.5rem;
}
.menu-cat-icon { font-size: 1rem; }
.menu-cat-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.menu-cat-jp { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.06em; }
.menu-cat-sub { font-size: 0.75rem; color: var(--ink-muted); margin-left: auto; }

.menu-dish {
    display: flex; align-items: baseline; gap: 0.4rem;
    padding: 0.4rem 0; font-size: 0.82rem;
    color: var(--ink-light); text-decoration: none;
}
.menu-dish:hover { color: var(--red); }
.menu-dish-icon { flex-shrink: 0; }
.menu-dish-name { white-space: nowrap; }
.menu-dish-dots { flex: 1; border-bottom: 1px dotted var(--cream-darker); min-width: 1.5rem; margin: 0 0.2rem; position: relative; top: -0.15em; }
.menu-dish-price { font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; }
.ramen-deco { text-align: center; font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.15em; padding: 0.5rem 0; }


/* === Cheatsheets === */
.cheatsheet-header { margin-bottom: 1rem; }
.cheatsheet-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 0.4rem; }
.cheatsheet-meta { font-size: 0.78rem; color: var(--ink-muted); }
.cheatsheet-actions { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.cheatsheet-content {
    background: var(--cream-dark); border-radius: 6px;
    padding: 1.5rem; font-size: 0.85rem; line-height: 1.8; overflow-x: auto;
}
.cheatsheet-card { background: var(--cream); border: 1px solid var(--cream-darker); border-radius: 6px; padding: 1rem; transition: border-color 0.15s; }
.cheatsheet-card:hover { border-color: var(--red); }
.search-hint { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.4rem; text-align: center; }
.search-results { margin-top: 0.75rem; }
.search-result-item { padding: 0.5rem 0; border-bottom: 1px solid var(--cream-darker); }
.search-snippet { font-size: 0.78rem; color: var(--ink-muted); }
.list { list-style: none; }
.list-item { padding: 0.55rem 0; border-bottom: 1px solid var(--cream-darker); }
.list-item:last-child { border-bottom: none; }
.back-link { display: inline-block; margin-bottom: 0.75rem; font-size: 0.78rem; color: var(--ink-muted); }
.back-link:hover { color: var(--red); }


/* === About === */
.about-hero { text-align: center; padding: 2.5rem 0 1rem; }
.about-ascii {
    font-family: var(--font-mono); font-size: clamp(0.42rem, 0.85vw, 0.6rem);
    line-height: 1.25; color: var(--red); opacity: 0.2;
    white-space: pre; margin-bottom: 0.75rem;
}
.about-ascii .t-pink, .about-ascii .t-cyan { color: var(--red); }
.about-tagline { font-size: 0.9rem; color: var(--ink-muted); max-width: 48ch; margin: 0 auto; }
.about-section { margin-bottom: 1.5rem; }
.about-section h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
.about-badge-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.about-badge { font-size: 0.68rem; color: var(--ink-muted); background: var(--cream-dark); padding: 0.2rem 0.55rem; border-radius: 3px; }
.about-contact { font-size: 0.88rem; color: var(--ink-light); }
.about-divider { border: none; border-top: 1px solid var(--cream-darker); margin: 1.2rem 0; }


/* === Awareness & Phishing === */
.awareness-hero, .phishing-hero { text-align: center; padding: 2.5rem 0 1rem; }
.ascii-title {
    font-family: var(--font-mono); font-size: clamp(0.42rem, 0.85vw, 0.6rem);
    line-height: 1.25; color: var(--red); opacity: 0.2;
    white-space: pre; margin-bottom: 0.75rem;
}
.hub-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 0.2rem; }
.jp-label { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.tagline { font-size: 0.88rem; color: var(--ink-muted); max-width: 48ch; margin: 0 auto 0.3rem; }
.sub-line { font-size: 0.78rem; color: var(--ink-faint); }

.hub-grid, .module-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem; margin: 1.5rem 0 2rem;
}
.hub-card, .module-card {
    padding: 1rem 1.1rem; border-radius: 6px;
    text-decoration: none; display: flex; flex-direction: column; gap: 0.3rem;
    border: 1px solid transparent; transition: background 0.15s, border-color 0.15s;
}
.hub-card:hover, .module-card:hover { background: var(--cream-dark); border-color: var(--cream-darker); }
.card-icon { font-size: 1.1rem; }
.card-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.card-desc { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; flex: 1; }
.card-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
.format-badge, .difficulty-chip {
    font-size: 0.62rem; padding: 0.15rem 0.4rem;
    background: var(--cream-dark); color: var(--ink-muted);
    border-radius: 3px;
}
.card-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.card-cta { font-size: 0.75rem; color: var(--red); font-weight: 500; margin-top: 0.3rem; }
.explore-more { text-align: center; margin: 1rem 0; }
.privacy-notice {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1rem; background: var(--cream-dark);
    border-left: 3px solid var(--red); border-radius: 0 5px 5px 0;
    font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; margin-bottom: 1rem;
}
.scroll-reveal { opacity: 1; }


/* === Generic === */
.card, .featured-card, .content-box { background: var(--cream); border: 1px solid var(--cream-darker); border-radius: 6px; padding: 1rem; }
.card:hover, .featured-card:hover { border-color: var(--red); }
.stat-box { background: var(--cream-dark); border-radius: 6px; padding: 1rem; text-align: center; }

table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--cream-darker); }
th { color: var(--red); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.03em; }
td { color: var(--ink-light); }

pre {
    background: var(--cream-dark); border-radius: 6px; padding: 1rem;
    overflow-x: auto; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7;
}
code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--red-dim); color: var(--red);
    padding: 0.1em 0.35em; border-radius: 3px;
}
code::before { display: none; }
img { max-width: 100%; height: auto; }

.feed-item, .exploit-item, .vulnerability-item, .cve-item { padding: 0.5rem 0; border-bottom: 1px solid var(--cream-darker); }
.result-block { background: var(--cream-dark); border-radius: 6px; padding: 0.8rem; margin-bottom: 0.5rem; }
.qr-code-display { background: #fff; padding: 1rem; display: inline-block; border-radius: 6px; }
.qr-code-display::after { display: none; }

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


/* === Responsive === */
@media (max-width: 768px) {
    .container { padding: 0 1.2rem; }
    .header { flex-direction: column; gap: 0.5rem; }
    .nav a { padding: 0.25rem 0.45rem; font-size: 0.7rem; }
    .cyber-hero { padding: 2rem 0 1.5rem; }
    .shop-sign { font-size: 1.8rem; }
    .menu-grid, .tools-grid, .hub-grid, .module-cards { grid-template-columns: 1fr; }
    .hero-stats { gap: 1.2rem; }
}

@media (max-width: 480px) {
    .quick-links { flex-direction: column; align-items: center; }
    .ramen-ascii, .menu-banner-ascii { font-size: 0.42rem; }
    .trust-strip-badges { gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

@media print {
    body { background: #fff; color: #000; }
    .header, .footer, .cyber-hero, .trust-strip, .quick-links, .jp-divider { display: none; }
}