/* Theme tokens */
:root{
  --bg:#ffffff;
  --ink:#1f2430;
  --muted:#4a5563;
  --subtle:#6b7280;
  --line:#e7edf5;
  --surface:#ffffff;
  --surface-alt:#f7f9ff;
  --accent:#6c5ce7;        /* indigo */
  --accent-2:#00c2ff;      /* cyan */
  --accent-3:#ff8c42;      /* orange */
  --accent-4:#22c55e;      /* mint */
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-hot: linear-gradient(135deg, var(--accent-3), var(--accent));
  --gradient-cool: linear-gradient(135deg, var(--accent-2), var(--accent-4));
  --radius:18px;
  --shadow:0 10px 30px rgba(13, 29, 54, .10);
  --max:1120px;
}

/* Dark theme overrides */
html[data-theme="dark"]{
  --bg:#0b1220;
  --ink:#e6eef7;
  --muted:#c3cfdd;
  --subtle:#9fb0c5;
  --line:#1d2a3b;
  --surface:#0f172a;
  --surface-alt:#0d1426;
  --accent:#8b7cf6;
  --accent-2:#2bc7ff;
  --accent-3:#ffa368;
  --accent-4:#3ddc84;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}


/* Respect system preference if no explicit theme attribute is set */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg:#0b1220;
    --ink:#e6eef7;
    --muted:#c3cfdd;
    --subtle:#9fb0c5;
    --line:#1d2a3b;
    --surface:#0f172a;
    --surface-alt:#0d1426;
    --accent:#8b7cf6;
    --accent-2:#2bc7ff;
    --accent-3:#ffa368;
    --accent-4:#3ddc84;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,sans-serif;background:var(--bg);color:var(--muted);line-height:1.65}


/* Skip link removed */

/* Colorful minimal link underline */
a{color:var(--ink);text-decoration:none;background-image:linear-gradient(transparent,transparent),linear-gradient(90deg,var(--accent),var(--accent-2));background-size:0 2px,100% 2px;background-position:0 100%,0 100%;background-repeat:no-repeat;transition:background-size .3s ease,color .2s ease}
a:hover{background-size:100% 2px,100% 2px}

img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(13,29,54,.04)}
html[data-theme="dark"] header{background:rgba(15,23,42,.85);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);letter-spacing:.2px;text-decoration:none}
.logo-dot{width:12px;height:12px;border-radius:50%;background:var(--gradient-accent);box-shadow:0 0 0 0 rgba(108,92,231,.3);animation:pulse 3.2s ease-in-out infinite}
.nav a{color:var(--muted);text-decoration:none;font-weight:700;letter-spacing:.2px}
.nav a:hover{color:var(--ink)}
.nav .btn{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer}
header nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;font-weight:700}

/* Added: hamburger toggle */
.nav-toggle{display:none;margin-left:auto}

@media (max-width: 800px){
  .nav{align-items:flex-start}
  .nav-toggle{display:inline-flex}
  header nav#site-nav{display:none;flex-direction:column;align-items:flex-start;width:100%;padding-top:8px}
  header nav#site-nav.open{display:flex}
  .nav .btn{padding:10px 12px}
}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff, #f8fbff)}
html[data-theme="dark"] .hero{background:linear-gradient(180deg,#0f172a,#0b1220)}
.hero::before{content:"";position:absolute;inset:-15% -10% auto -10%;height:520px;background:
  radial-gradient(60% 60% at 20% 30%, rgba(108,92,231,.25), transparent 60%),
  radial-gradient(50% 50% at 75% 35%, rgba(0,194,255,.22), transparent 60%),
  radial-gradient(40% 40% at 50% 80%, rgba(255,140,66,.18), transparent 60%);
filter:blur(40px);animation:float-blob 16s ease-in-out infinite alternate;pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.2fr .9fr;gap:32px;align-items:center;min-height:72vh;padding:72px 20px}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#ffffff;font-size:12px;color:var(--subtle)}
html[data-theme="dark"] .kicker{background:var(--surface)}
.kicker .ring{width:8px;height:8px;border-radius:50%;background:var(--gradient-accent)}
h1{color:var(--ink);font-size:clamp(30px,4vw,52px);line-height:1.1;margin:14px 0}
.hero p{font-size:19px;color:#2f3943;max-width:62ch}
html[data-theme="dark"] .hero p{color:#c3cfdd}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cta .primary{background:var(--gradient-accent);color:white;border:none;padding:12px 18px;border-radius:14px;font-weight:800;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s ease, filter .2s ease}
.cta .primary:hover{transform:translateY(-1px);filter:saturate(1.08)}
.cta .ghost{background:#ffffff;border:1px solid var(--line);color:var(--ink);padding:12px 18px;border-radius:14px;font-weight:800;cursor:pointer;transition:border-color .2s ease, transform .2s ease}
html[data-theme="dark"] .cta .ghost{background:var(--surface)}
.cta .ghost:hover{border-color:#dfe7ef;transform:translateY(-1px)}

.hero-visual{position:relative}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.chip + .chip{margin-top:12px}
.chip h4{margin:0 0 6px 0;color:var(--ink)}
.chip p{margin:0;color:var(--subtle);font-size:15px}

/* Section */
section{padding:80px 0;border-top:1px solid var(--line)}
section.alt{background:var(--surface-alt)}
section h2{color:var(--ink);font-size:clamp(24px,3.2vw,36px);margin:0 0 12px}
.lead{color:#2f3943;max-width:72ch;margin-bottom:24px}
html[data-theme="dark"] .lead{color:#c3cfdd}

/* Featured grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;perspective:800px}
.card{grid-column:span 4;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;transform-style:preserve-3d;will-change:transform}
.card.large{grid-column:span 8}
.card .tag{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:#3a4754;border:1px solid var(--line);border-radius:999px;padding:6px 10px;margin-bottom:12px;background:#fff}
html[data-theme="dark"] .card .tag{background:var(--surface);color:#c3cfdd}
.card h3{margin:8px 0 8px;color:var(--ink);font-size:22px}
.card p{margin:0 0 10px}
.card .more{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800}
.card .rail{position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(transparent 55%, rgba(0,120,212,.12));transform:rotate(25deg)}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(13,29,54,.12), 0 0 0 8px rgba(108,92,231,.06)}

/* Playful color accents for cards */
.card:nth-child(4n+1) .tag{border-color:rgba(108,92,231,.35);color:#2b1f52}
.card:nth-child(4n+2) .tag{border-color:rgba(0,194,255,.35);color:#0b3952}
.card:nth-child(4n+3) .tag{border-color:rgba(255,140,66,.35);color:#5a3318}
.card:nth-child(4n+4) .tag{border-color:rgba(34,197,94,.35);color:#18482b}

/* Two-column layout */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}

/* Idea Board */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.note{grid-column:span 3;background:#ffffff;border:1px dashed var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
html[data-theme="dark"] .note{background:var(--surface)}
.note h4{margin:0 0 6px;color:#0b2239}
html[data-theme="dark"] .note h4{color:var(--ink)}
.note p{margin:0;font-size:15px}
.note:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(13,29,54,.10)}

/* Footer */
footer{padding:56px 0;border-top:1px solid var(--line);color:#5a6a7b;background:#fff}
html[data-theme="dark"] footer{background:var(--surface)}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.social a{margin-right:10px;color:var(--ink)}
.credit small{color:var(--subtle)}

/* Chatbot */
.chat-launcher{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--gradient-accent);color:#fff;border:none;padding:12px 14px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow)}
.chat-panel{position:fixed;right:20px;bottom:80px;width:320px;max-width:90vw;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;z-index:60}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.chat-title{margin:0;color:var(--ink);font-size:15px;font-weight:800}
.chat-body{padding:12px;display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow:auto}
.chat-msg{display:flex;gap:8px}
.chat-msg .bubble{padding:10px 12px;border-radius:12px;border:1px solid var(--line);max-width:80%}
.chat-msg.user{justify-content:flex-end}
.chat-msg.user .bubble{background:var(--gradient-accent);color:#fff;border:none}
.chat-msg.bot .bubble{background:var(--surface)}
.chat-footer{padding:10px;border-top:1px solid var(--line)}
.chat-footer form{display:flex;gap:8px}
.chat-footer input{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.chat-footer button{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chat-note{color:var(--subtle);font-size:12px;margin-top:6px}

/* Responsive */
@media (max-width: 960px){
  .hero .wrap{grid-template-columns:1fr;min-height:unset;padding-top:40px}
  .grid .card{grid-column:span 12}
  .card.large{grid-column:span 12}
  .two{grid-template-columns:1fr}
  .note{grid-column:span 6}
}
@media (max-width: 720px){
  .nav{height:auto;padding:10px 0}
  header nav{flex-wrap:wrap;row-gap:8px}
  .nav .btn{padding:8px 12px}
  .logo{font-weight:800;font-size:16px}
}
@media (max-width: 560px){
  .note{grid-column:span 12}
}

/* Animations: scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .hero::before{display:none}
}

/* Editorial/typography */
h1, h2, h3{font-family:inherit; letter-spacing:-0.01em}

/* Topic bar */
.topic-bar{display:flex;flex-wrap:wrap;gap:10px;padding:10px 0 14px}
.topic-bar a{color:var(--subtle);text-decoration:none;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:linear-gradient(135deg, rgba(108,92,231,.06), rgba(0,194,255,.06));transition:transform .2s ease, border-color .2s ease}
.topic-bar a:hover{color:var(--ink);border-color:#dfe7ef;transform:translateY(-1px)}

/* Cards with images */
.card .thumb{width:100%;height:180px;object-fit:cover;border-radius:12px;margin:-4px 0 12px;display:block}
.card.large .thumb{height:260px}

/* Hero portrait */
.portrait{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow);margin-bottom:12px}

/* Newsletter */
.newsletter .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.newsletter .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.newsletter input[type="email"]{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.newsletter .primary{margin-left:8px}

@media (max-width: 960px){
  .newsletter .wrap{grid-template-columns:1fr}
}

/* Focus styles */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* Visually hidden (screen-reader only) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Keyframes */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(108,92,231,.32)}70%{box-shadow:0 0 0 10px rgba(108,92,231,0)}100%{box-shadow:0 0 0 0 rgba(108,92,231,0)}}
@keyframes float-blob{0%{transform:translateY(0)}100%{transform:translateY(14px)}}