/* DESIGN TOKENS  */
:root{
  --bg:#ffffff;
  --bg2:#f7f9fc;
  --text:#111827;
  --text2:#4b5563;
  --accent:#0066ff;
  --accent2:#004ecc;
  --card:#ffffff;
  --border:#c7c7c7ab;
  --radius:12px;
  --font:'Inter',system-ui,sans-serif;
  --max:900px;
  --nav-h:72px;
}
[data-theme="dark"]{
  --bg:#0b0f19;
  --bg2:#111827;
  --text:#f9fafb;
  --text2:#9ca3af;
  --card:#1f2937;
  --border:#374151;
}

/* RESET  */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* LAYOUT HELPERS*/
.section{padding:clamp(3rem,8vw,5rem) 1.5rem}
.container{max-width:var(--max);margin:auto}
.grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/*   NAVIGATION   */
nav{
  position:fixed;inset:0 0 auto 0;
  height:var(--nav-h);
  background:rgb(from var(--bg) r g b / 80%);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  z-index:100;
}
.nav-inner{
  max-width:var(--max);
  margin:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
}
.logo{font-weight:600;
    font-size:1.1rem}
.links{display:flex;
    gap:1.25rem;
    align-items:center}
.links a{position:relative;font-size:.9rem;font-weight:500}
.links a::after{
  content:"";position:absolute;left:0;bottom:-4px;
  width:0;height:2px;background:var(--accent);transition:.3s;
}
.links a:hover::after,
.links a.active::after{width:100%}

/*   HERO   */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1.5rem;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><circle cx="400" cy="400" r="300" fill="%230066ff" opacity=".07"/></svg>') center/cover no-repeat;
}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:600}
#type-text{
  font-size:clamp(1.1rem,2.5vw,1.4rem);
  color:var(--accent);
  margin:.75rem 0 2rem;
  white-space:nowrap;
  border-right:2px solid var(--accent);
  animation:blink .8s infinite;
}
@keyframes blink{
  0%,50%{border-color:var(--accent)}
  51%,100%{border-color:transparent}
}

/*  BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--accent);
  color:#fff;padding:.6rem 1.25rem;border-radius:var(--radius);
  font-weight:500;
  transition:.3s;
}
.btn:hover{background:var(--accent2);transform:translateY(-2px)}

/* CARDS */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:.3s;
}
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgb(0 0 0 /.05)}
.card h3{
    font-size:1.1rem;
    margin-bottom:.25rem
}
.card p{color:var(--text2);
    font-size:.9rem;
    flex:1
}
.card .btn{
    align-self:flex-start;
    margin-top:.75rem}

/* TAGS / PILLS */
.tags{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem
}
.tags span,
.tags li{
  background:var(--bg2);
  padding:.25rem .6rem;
  border-radius:99px;
  font-size:.75rem;
  color:var(--text2);
  border :1.5px solid var(--border);
}

/*   FOOTER   */
footer{
    text-align:center;
    padding:2.5rem 1.5rem;
    font-size:.8rem;
    color:var(--text2)
}

footer a{color:var(--accent)}

/*  THEME TOGGLE (fixed bottom-right)  */
.theme-toggle{
  position:fixed;
  right:1rem;
  bottom:1.5rem;
  width:53px;
  height:53px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
  transition:background .3s, transform .2s;
  z-index:1100;
}
.theme-toggle:hover{background:var(--accent2);transform:rotate(20deg)}

/* SCROLL-TO-TOP (fixed bottom-right above toggle)   */
#scrollTop{
  position:fixed;
  right:1rem;
  bottom:5.5rem;
  width:52px;
  height:52px;
  background:var(--accent);
  color:#fff;border:none;
  border-radius:50%;
  cursor:pointer;
  opacity:0;transition:.3s;
  pointer-events:none;
  z-index:1100;
}
#scrollTop.visible{opacity:1;pointer-events:auto}
#scrollTop:hover{transform:translateY(-3px)}

/* TOAST  */
#toast{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  
  translate:-50% 150%;
  background:var(--accent);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:var(--radius);
  font-size:.85rem;
  transition:.3s;
  z-index:200;
}
#toast.show{translate:-50% 0}

/*  PRINT */
@media print{
  nav,#scrollTop,#toast,.theme-toggle{display:none}
  body{
    background:#fff;
    color:#000
}
  .section{padding:1rem 0}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important
}
}

/*   LIGHT-THEME ENHANCEMENTS   */
:root:not([data-theme="dark"]) {
  /* slightly warmer background */
  --bg: #fafbfc;
  --bg2: #f0f4f8;

  /* softer text */
  --text: #1a1a1a;
  --text2: #4b5563;

  /* elevate cards */
  --card-shadow: 0 2px 6px rgba(0 0 0 /.04), 0 4px 12px rgba(0 0 0 /.04);

  /* gentle gradient on hero blob */
  --hero-blob: radial-gradient(circle at 50% 50%, rgba(0 102 255, .08) 0%, transparent 70%);
}

/* apply the shadow only in light mode */
:root:not([data-theme="dark"]) .card {
  box-shadow: var(--card-shadow);
}

/* subtle hero gradient only in light mode */
:root:not([data-theme="dark"]) .hero {
  background: var(--hero-blob), var(--bg);
}

/* LIGHT-THEME ONLY  */
html:not([data-theme="dark"]) {
  --bg: #fafbfc;               
  --bg2: #f0f4f8;             
  --card: #ffffff;
  --border: #e1e6ef;           
  --card-shadow: 0 2px 6px rgba(0 0 0 /.04),
                 0 4px 12px rgba(0 0 0 /.04);
}

html:not([data-theme="dark"]) .card {
  box-shadow: var(--card-shadow);
}

html:not([data-theme="dark"]) .hero {
  background: radial-gradient(circle at 50% 50%, rgba(0 102 255, .06) 0%, transparent 70%),
              var(--bg);
}

[data-theme="light"]{
  --bg:#f5f7fa;
  --bg2:#eef2f6;
  --text:#0b0f19;
  --text2:#4b5563;
  --card:#ffffff;
  --border:#d0d7e4;
}

.footer {
  text-align: center;
  padding: 1.5rem;
  background: var(--footer-bg, #111);
  color: var(--footer-text, #eee);
  margin-top: 3rem;
  font-size: 0.9rem;
}

.footer .social-links {
  margin-top: 0.8rem;
}

.footer .social-links a {
  margin: 0 10px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.footer .social-links a:hover {
  transform: scale(1.2);
}

.footer img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}