:root {
    --bg-deep:      #08080F;
    --bg-base:      #0D0D1A;
    --bg-elevated:  #131320;
    --bg-card:      #18182A;
    --border:       #222236;
    --border-light: #2C2C46;
    --accent:       #F5A623;
    --accent-dim:   rgba(245,166,35,0.12);
    --accent-glow:  rgba(245,166,35,0.25);
    --teal:         #34D399;
    --pink:         #FF4F8B;
    --blue:         #5B8DFF;
    --violet:       #A259FF;
    --orange:       #FF5E3A;
    --text-1:       #F2F0EB;
    --text-2:       #8A8AA8;
    --text-3:       #52526A;
    --radius:       12px;
    --radius-lg:    20px;
}

[data-theme="light"] {
    --bg-deep:      #F0F0EB;
    --bg-base:      #F8F8F4;
    --bg-elevated:  #EEEEEA;
    --bg-card:      #E4E4E0;
    --border:       #D0D0CA;
    --border-light: #BCBCB6;
    --text-1:       #111118;
    --text-2:       #44445A;
    --text-3:       #777788;
    --teal:         #059669;
}

[data-theme="light"] .nav {
    background: rgba(240,240,235,0.88);
}

[data-theme="light"] .ticker {
    background: var(--bg-elevated);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg-deep);
    color: var(--text-1);
    font-family: 'Manrope', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background .3s, color .3s;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* ─── NAV ─── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(8,8,15,0.88);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    transition: background .3s;
}
.nav-inner {
    max-width: 1300px; margin: 0 auto;
    display: flex; align-items: center;
    justify-content: space-between;
    height: 64px; padding: 0 2rem; gap: 1.5rem;
}
.nav-logo {
    font-family: 'Fraunces', serif;
    font-style: italic; font-weight: 900; font-size: 1.5rem;
    letter-spacing: -0.03em; color: var(--text-1);
    text-decoration: none; display: flex; align-items: center; gap: 0.5rem;
    flex-shrink: 0;
}
.nav-logo b { color: var(--accent); font-style: normal; }
.live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
    50%      { opacity: .5; box-shadow: 0 0 0 4px transparent; }
}
.nav-links {
    display: flex; align-items: center; gap: .125rem;
    flex: 1; justify-content: center;
}
.nav-link {
    font-size: .775rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .065em;
    color: var(--text-2); text-decoration: none;
    padding: .4rem .75rem; border-radius: 6px;
    transition: color .2s, background .2s;
}
.nav-link:hover  { color: var(--text-1); background: var(--bg-card); }
.nav-link.active { color: var(--accent); }
.nav-cta {
    background: var(--accent); color: #000;
    font-family: 'Manrope', sans-serif;
    font-size: .775rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .065em;
    padding: .5rem 1.125rem; border-radius: 6px;
    border: none; cursor: pointer; text-decoration: none;
    white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s;
    flex-shrink: 0;
}
.nav-cta:hover {
    background: #FFB83F;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px var(--accent-glow);
}

/* Theme Toggle */
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-elevated); border-color: var(--accent); }

/* ─── TICKER ─── */
.ticker {
    position: sticky; top: 64px; z-index: 199;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    height: 38px; display: flex; align-items: center; overflow: hidden;
    transition: background .3s;
}
.ticker-tag {
    background: var(--accent); color: #000;
    font-size: .65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 0 1rem; height: 100%;
    display: flex; align-items: center;
    white-space: nowrap; flex-shrink: 0;
}
.ticker-track {
    display: flex; gap: 3.5rem;
    white-space: nowrap; padding-left: 2rem;
    animation: scroll-ticker 35s linear infinite;
}
@keyframes scroll-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ticker-item {
    font-size: .78rem; font-weight: 500; color: var(--text-2);
    display: flex; align-items: center; gap: .5rem;
}
.ticker-item::before { content: '◆'; color: var(--accent); font-size: .45rem; }

/* ─── HERO ─── */
.hero {
    min-height: 92vh; padding: 8rem 2rem 5rem;
    position: relative; display: flex; align-items: center; overflow: hidden;
}
.hero-mesh {
    position: absolute; inset: -20%;
    background:
        radial-gradient(ellipse 75% 60% at 18% 28%, rgba(245,166,35,.11) 0%, transparent 55%),
        radial-gradient(ellipse 55% 75% at 82% 72%, rgba(61,255,208,.07) 0%, transparent 55%),
        radial-gradient(ellipse 45% 45% at 55% 8%,  rgba(91,141,255,.06) 0%, transparent 50%);
    animation: mesh 14s ease-in-out infinite alternate;
}
@keyframes mesh {
    0%   { transform: translate(0,0)    scale(1); }
    33%  { transform: translate(-2%,2%) scale(1.04); }
    66%  { transform: translate(2%,-1%) scale(.97); }
    100% { transform: translate(-1%,3%) scale(1.03); }
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px);
    background-size: 56px 56px;
}
.hero-inner {
    max-width: 1300px; margin: 0 auto; width: 100%;
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 1.75rem; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--accent-dim);
    border: 1px solid rgba(245,166,35,.3);
    border-radius: 100px; padding: .35rem .875rem;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--accent); width: fit-content;
}
.hero-badge .live-dot { width: 6px; height: 6px; }
.hero-h1 {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.6rem, 5.5vw, 4.75rem);
    font-weight: 900; line-height: 1.04;
    letter-spacing: -.035em; color: var(--text-1);
}
.hero-h1 em { font-style: italic; color: var(--accent); }
.hero-sub {
    font-size: 1.05rem; color: var(--text-2);
    line-height: 1.7; max-width: 460px;
}
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-main {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--accent); color: #000;
    font-family: 'Manrope', sans-serif;
    font-size: .875rem; font-weight: 700;
    padding: .85rem 1.875rem; border-radius: 8px;
    text-decoration: none; border: none; cursor: pointer;
    transition: background .25s, transform .25s, box-shadow .25s;
}
.btn-main:hover {
    background: #FFB83F; transform: translateY(-2px);
    box-shadow: 0 10px 32px var(--accent-glow);
}
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; color: var(--text-2);
    font-family: 'Manrope', sans-serif;
    font-size: .875rem; font-weight: 600;
    padding: .85rem 1.5rem; border-radius: 8px;
    text-decoration: none; cursor: pointer;
    border: 1px solid var(--border-light);
    transition: all .25s;
}
.btn-ghost:hover { color: var(--text-1); background: var(--bg-card); border-color: var(--border-light); }
.hero-stats { display: flex; gap: 2.25rem; }
.stat-val {
    font-family: 'Fraunces', serif;
    font-size: 1.875rem; font-weight: 800;
    color: var(--text-1); line-height: 1; display: block;
}
.stat-lbl {
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-3); margin-top: .2rem; display: block;
}

/* Hero card */
.hero-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 60px rgba(245,166,35,.05);
}
.hcard-img {
    width: 100%; aspect-ratio: 16/10;
    background: linear-gradient(135deg, #0D1B2E 0%, #1A0D35 55%, #0A1F1F 100%);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hcard-circuit { position: absolute; inset: 0; opacity: .22; }
.hcard-emoji {
    font-size: 3.75rem; position: relative; z-index: 1;
    filter: drop-shadow(0 0 24px rgba(245,166,35,.35));
}
.hcard-body { padding: 1.625rem; }

/* ─── TAGS ─── */
.tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.tag {
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    padding: .22rem .6rem; border-radius: 4px;
}
.tag-ai   { background: rgba(245,166,35,.14); color: var(--accent); }
.tag-hw   { background: rgba(61,255,208,.12);  color: var(--teal); }
.tag-sec  { background: rgba(255,79,139,.12);  color: var(--pink); }
.tag-sw   { background: rgba(91,141,255,.12);  color: var(--blue); }
.tag-mob  { background: rgba(162,89,255,.12);  color: var(--violet); }
.tag-fut  { background: rgba(255,94,58,.12);   color: var(--orange); }
.tag-dest { background: rgba(255,255,255,.07); color: var(--text-2); }

/* ─── ARTICLE COMMON ─── */
.art-title {
    font-family: 'Fraunces', serif;
    font-weight: 800; line-height: 1.25;
    letter-spacing: -.02em; color: var(--text-1);
}
.art-excerpt { font-size: .875rem; color: var(--text-2); line-height: 1.65; }
.art-meta {
    display: flex; align-items: center; gap: .625rem;
    font-size: .73rem; color: var(--text-3); flex-wrap: wrap;
}
.art-meta .sep::before { content: '·'; margin-right: .625rem; }
.read-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--accent); font-size: .775rem; font-weight: 700;
    text-decoration: none; text-transform: uppercase; letter-spacing: .05em;
    margin-top: .875rem; transition: gap .2s;
}
.read-link:hover { gap: .6rem; }

/* ─── LAYOUT ─── */
.wrap { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 4rem 0; }
.sec-head {
    display: flex; align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2.25rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.sec-title {
    font-family: 'Fraunces', serif; font-size: 1.5rem;
    font-weight: 800; letter-spacing: -.025em; color: var(--text-1);
    display: flex; align-items: center; gap: .75rem;
}
.sec-bar {
    width: 7px; height: 22px; background: var(--accent);
    border-radius: 3px; flex-shrink: 0;
}
.sec-link {
    font-size: .775rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .065em;
    color: var(--accent); text-decoration: none;
    transition: opacity .2s;
}
.sec-link:hover { opacity: .65; }

/* ─── FEATURED ─── */
.featured-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.375rem;
}
.feat-main {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .25s, box-shadow .25s; cursor: pointer;
}
.feat-main:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.feat-img {
    width: 100%; aspect-ratio: 16/9; overflow: hidden;
    background: linear-gradient(135deg, #0D1B35 0%, #1A0D35 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; transition: transform .3s;
}
.feat-main:hover .feat-img { transform: scale(1.03); }
.feat-body { padding: 2rem; }
.feat-title { font-size: 1.8rem; margin-bottom: .625rem; }
.feat-excerpt { font-size: .9375rem; color: var(--text-2); line-height: 1.65; margin-bottom: 1.125rem; }

.feat-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.side-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.125rem;
    display: flex; gap: .875rem; align-items: flex-start;
    transition: all .25s; cursor: pointer; text-decoration: none; color: inherit;
}
.side-card:hover { border-color: var(--border-light); background: var(--bg-elevated); }
.side-icon {
    width: 46px; height: 46px; border-radius: 8px;
    background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.side-title {
    font-family: 'Fraunces', serif; font-size: .9375rem;
    font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
    color: var(--text-1); margin-bottom: .25rem;
}
.side-meta { font-size: .73rem; color: var(--text-3); }

/* ─── LATEST GRID ─── */
.latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.375rem;
}
.art-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    cursor: pointer; text-decoration: none; color: inherit; display: block;
}
.art-card:hover {
    transform: translateY(-3px); border-color: var(--border-light);
    box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.art-card.hidden { display: none; }
.card-thumb {
    width: 100%; aspect-ratio: 16/9;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.75rem; transition: transform .3s;
}
.art-card:hover .card-thumb { transform: scale(1.06); }
.card-body { padding: 1.25rem; }
.card-title { font-size: 1.075rem; margin-bottom: .4rem; }
.card-excerpt { font-size: .83rem; }

/* thumb backgrounds */
.g1 { background: linear-gradient(135deg,#1C1A3E,#0D1B2A); }
.g2 { background: linear-gradient(135deg,#1A2A1A,#0A1E1A); }
.g3 { background: linear-gradient(135deg,#2A1A1A,#1E0A12); }
.g4 { background: linear-gradient(135deg,#1A1A2E,#1A0A2E); }
.g5 { background: linear-gradient(135deg,#2A2A0A,#1E1A0A); }
.g6 { background: linear-gradient(135deg,#0A2A2A,#0A1A28); }

/* ─── CATEGORIES ─── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .875rem;
}
.cat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem .875rem;
    text-align: center; cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s;
    text-decoration: none; display: block;
}
.cat-card:hover { transform: translateY(-2px); }
.cat-card.active { border-color: var(--accent); background: var(--accent-dim); }
.cat-icon { font-size: 1.875rem; display: block; margin-bottom: .5rem; }
.cat-name {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; display: block;
}
.cat-count { font-size: .68rem; color: var(--text-3); margin-top: .2rem; display: block; }

.c-ai:hover   { border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.04); }
.c-ai   .cat-name { color: var(--accent); }
.c-hw:hover   { border-color: rgba(61,255,208,.4);  background: rgba(61,255,208,.04); }
.c-hw   .cat-name { color: var(--teal); }
.c-sec:hover  { border-color: rgba(255,79,139,.4);  background: rgba(255,79,139,.04); }
.c-sec  .cat-name { color: var(--pink); }
.c-sw:hover   { border-color: rgba(91,141,255,.4);  background: rgba(91,141,255,.04); }
.c-sw   .cat-name { color: var(--blue); }
.c-mob:hover  { border-color: rgba(162,89,255,.4);  background: rgba(162,89,255,.04); }
.c-mob  .cat-name { color: var(--violet); }
.c-fut:hover  { border-color: rgba(255,94,58,.4);   background: rgba(255,94,58,.04); }
.c-fut  .cat-name { color: var(--orange); }

.c-ai.active  { border-color: var(--accent);  background: rgba(245,166,35,.1); }
.c-hw.active  { border-color: var(--teal);    background: rgba(61,255,208,.08); }
.c-sec.active { border-color: var(--pink);    background: rgba(255,79,139,.08); }
.c-sw.active  { border-color: var(--blue);    background: rgba(91,141,255,.08); }
.c-mob.active { border-color: var(--violet);  background: rgba(162,89,255,.08); }
.c-fut.active { border-color: var(--orange);  background: rgba(255,94,58,.08); }

/* ─── NEWSLETTER ─── */
.nl-wrap {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 4.5rem 2rem;
    margin: 4rem 0; position: relative; overflow: hidden; text-align: center;
}
.nl-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 65% 80% at 50% -5%, rgba(245,166,35,.09) 0%, transparent 60%);
}
.nl-content { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.nl-eyebrow {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--accent); margin-bottom: 1rem;
}
.nl-h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.875rem, 3.5vw, 2.625rem);
    font-weight: 900; line-height: 1.08;
    letter-spacing: -.035em; color: var(--text-1); margin-bottom: .75rem;
}
.nl-sub { font-size: 1rem; color: var(--text-2); line-height: 1.65; margin-bottom: 2rem; }
.nl-form { display: flex; gap: .75rem; max-width: 440px; margin: 0 auto 1rem; }
.nl-input {
    flex: 1; background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 8px; padding: .825rem 1.125rem;
    color: var(--text-1); font-family: 'Manrope', sans-serif;
    font-size: .875rem; outline: none; transition: border-color .2s;
}
.nl-input:focus { border-color: var(--accent); }
.nl-input::placeholder { color: var(--text-3); }
.nl-disclaimer { font-size: .73rem; color: var(--text-3); }
.nl-proof {
    display: flex; align-items: center; justify-content: center;
    gap: .875rem; margin-top: 1.625rem;
    font-size: .78rem; color: var(--text-3);
}
.av-group { display: flex; }
.av {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
}
.av + .av { margin-left: -8px; }
.av1{background:#1A3A5C;} .av2{background:#3A1A1A;} .av3{background:#1A3A1A;} .av4{background:#2A1A3A;}

/* ─── FOOTER ─── */
.footer {
    background: var(--bg-elevated); border-top: 1px solid var(--border);
    padding: 3.5rem 2rem 2rem;
}
.footer-grid {
    max-width: 1300px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem; padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
}
.f-logo {
    font-family: 'Fraunces', serif; font-style: italic;
    font-weight: 900; font-size: 1.875rem;
    letter-spacing: -.03em; color: var(--text-1);
}
.f-logo b { color: var(--accent); font-style: normal; }
.f-desc {
    font-size: .875rem; color: var(--text-2);
    line-height: 1.65; max-width: 280px; margin-top: .875rem;
}
.f-col-title {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-1); margin-bottom: 1.125rem;
}
.f-links { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.f-links a {
    font-size: .875rem; color: var(--text-2);
    text-decoration: none; transition: color .2s;
}
.f-links a:hover { color: var(--text-1); }
.footer-bottom {
    max-width: 1300px; margin: 1.5rem auto 0;
    display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem; color: var(--text-3); flex-wrap: wrap; gap: .5rem;
}

/* ─── SCROLL ANIMATION ─── */
.fu {
    opacity: 0; transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
.fu.in { opacity: 1; transform: none; }
.fu:nth-child(2){transition-delay:.08s}
.fu:nth-child(3){transition-delay:.16s}
.fu:nth-child(4){transition-delay:.24s}
.fu:nth-child(5){transition-delay:.32s}
.fu:nth-child(6){transition-delay:.40s}

/* ─── RESPONSIVE ─── */
@media(max-width:1100px){
    .hero-inner    { grid-template-columns: 1fr; }
    .hero-card     { display: none; }
    .featured-grid { grid-template-columns: 1fr; }
    .latest-grid   { grid-template-columns: repeat(2,1fr); }
    .cat-grid      { grid-template-columns: repeat(3,1fr); }
    .footer-grid   { grid-template-columns: 1fr 1fr; }
}
@media(max-width:680px){
    .nav-links { display: none; }
    .latest-grid { grid-template-columns: 1fr; }
    .cat-grid    { grid-template-columns: repeat(2,1fr); }
    .nl-form     { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}