:root {
  --accent: #00ffff;


}

a, .navbar .logo, .section-title, .btn, .card:hover, .skill-category li::before, .roadmap-list strong, #contact form button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn:hover {
  background: var(--accent);
  color: #000;
}

.card:hover {
  border-color: var(--accent);
}

    
    
        /* Basic resets and typography */
        body {
            margin: 0;
            padding: 0;
            background: #000;
            color: #fff;
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            font-size: 18px;
            line-height: 1.75;
        }
        h1, h2, h3, h4, h5, h6 {
            margin-top: 0;
            font-weight: 600;
        }
        p {
            margin: 0.5em 0 1em;
        }
        a {
            color: #00ffff; /* accent color for links */
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        /* Utility classes */
        .container{
  max-width:1400px;   /* or 1600px if you want huge */
  width:95%;
            margin: 0 auto;
            padding: 1.5em 0;
        }
        .section-title {
            font-size: 1.8em;
            margin-bottom: 0.5em;
            color: #00ffff;
        }
        /* Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #000;
            z-index: 1000;
            border-bottom: 1px solid #333;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5em 1em;
        }
        .navbar .logo {
            font-size: 1.2em;
            font-weight: 700;
            color: #00ffff;
        }
        .navbar .logo:hover {
            color: #fff;
        }
        .navbar nav {
            /* container for nav links */
        }
        .navbar ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: none; /* hidden on mobile until toggled */
        }
        .navbar ul.open {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: #000;
            border-top: 1px solid #333;
        }
        .navbar ul.open a {
            text-align: center;
        }
        .navbar li {
            margin: 0;
        }
        .navbar a {
            display: block;
            padding: 0.5em 1em;
        }
        .navbar a:hover {
            background: #111;
        }
        .nav-toggle {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5em;
            cursor: pointer;
        }
        .nav-toggle:focus {
            outline: 2px solid #00ffff;
        }
        /* Desktop nav */
        @media(min-width: 768px) {
            .navbar ul {
                display: flex;
            }
            .navbar li {
                margin: 0 0 0 1em;
            }
            .nav-toggle {
                display: none;
            }
        }
        /* Hero Section */
        #hero {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 100vh;
            padding: 2em 1em;
        }
        #hero .hero-content {
            position: relative;
            z-index: 1;
        }
        #hero h1 {
            font-size: 2.5em;
            margin-bottom: 0.5em;
        }
        #hero p {
            font-size: 1.2em;
            max-width: 600px;
            margin: 0 auto 1.5em;
        }
        #hero .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 1em;
            flex-wrap: wrap;
        }
        .btn {
            display: inline-block;
            padding: 0.8em 1.2em;
            border: 2px solid #00ffff;
            color: #00ffff;
            text-decoration: none;
            font-weight: 600;
            border-radius: 4px;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #00ffff;
            color: #000;
        }
        /* Sections Common */
        section {
            padding: 4em 0 3em;
            scroll-margin-top: 70px;
        }
        section:nth-of-type(even) {
            background: #111; /* alternate background slightly lighter */
        }
        .section-content {
            max-width: 920px;
            margin: 0 auto;
        }
        /* About Section */
        #about .section-content p {
            font-size: 1.1em;
        }
        /* Skills Section */
        #skills .skill-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 2em;
        }
        .skill-category {
            flex: 1 1 250px;
        }
        .skill-category h3 {
            font-size: 1.3em;
            margin-bottom: 0.5em;
            color: #00ffff;
        }
        .skill-category ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .skill-category li::before {
            content: "★";
            color: #00ffff;
            margin-right: 0.5em;
        }
        .skill-category li {
            margin: 0.3em 0;
        }
        /* Services Section */
        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5em;
            margin-top: 1em;
        }
        .card {
            background: #000;
            border: 1px solid #333;
            padding: 1.5em;
            border-radius: 5px;
            transition: transform 0.3s, border-color 0.3s;
        }
        .card:hover {
            border-color: #00ffff;
            transform: translateY(-5px);
        }
        .card h3 {
            font-size: 1.2em;
            margin-top: 0;
            margin-bottom: 0.5em;
            color: #00ffff;
        }
        .card p {
            font-size: 0.95em;
            line-height: 1.5;
        }
        /* Projects Section */
        /* reuse .cards and .card styles for project items */
        /* Ecosystem Section */
        #ecosystem .section-content p {
            font-size: 1.1em;
        }
        /* Roadmap Section */
        .roadmap-list {
            list-style: none;
            padding: 0;
            margin: 1em 0;
        }
        .roadmap-list li {
            margin: 0.8em 0;
        }
        .roadmap-list strong {
            color: #00ffff;
        }
        /* Contact Section */
        #contact form {
            max-width: 500px;
            margin: 1em auto;
            text-align: left;
        }
        #contact form label {
            display: block;
            margin: 0.5em 0 0.2em;
            font-weight: 600;
        }
        #contact form input, #contact form textarea {
            width: 100%;
            padding: 0.6em;
            margin-bottom: 1em;
            border: 1px solid #555;
            border-radius: 4px;
            background: #181818;
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 1em;
        }
        #contact form input:focus, #contact form textarea:focus {
            outline: none;
            border-color: #00ffff;
        }
        #contact form button {
            background: #00ffff;
            color: #000;
            border: none;
            padding: 0.8em 1.5em;
            font-size: 1em;
            font-weight: 700;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.3s;
        }
        #contact form button:hover {
            opacity: 0.9;
        }
        .error {
            color: #ff4f4f;
            text-align: center;
            font-weight: 600;
        }
        .success {
            color: #4caf50;
            text-align: center;
            font-weight: 600;
        }
        /* Footer */
        footer {
            padding: 1em 0;
            text-align: center;
            font-size: 0.9em;
            color: #888;
        }
        footer a {
            color: #888;
        }
        footer a:hover {
            color: #00ffff;
        }
        /* Smooth scroll behavior */
        html {
            scroll-behavior: smooth;
        }
        /* Fade-in animation on scroll */
        .fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

        @media(max-width: 480px) {
            #hero h1 {
                font-size: 2em;
            }
            #hero p {
                font-size: 1em;
            }
        }
        
        
        #backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  background-color: #111;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 0.6em 1em;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 50%;
  display: none;
  transition: opacity 0.3s;
}
#backToTop:hover {
  background: var(--accent);
  color: #000;
}



#scrollBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background-color: var(--accent);
  width: 0%;
  z-index: 1000;
}






#typed-text {
  color: var(--accent);
  font-weight: bold;
}
#cursor {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}



.highlight {
  color: var(--accent); /* Uses your main accent (like #00ffff) */
  font-weight: bold;
}


/* --- SevinHub V2 (clarity-first homepage) --- */
.muted { color: #bdbdbd; opacity: 0.95; }
.badge-row { display:flex; justify-content:center; gap:0.6em; flex-wrap:wrap; margin-bottom: 0.8em; }
.badge { display:inline-flex; align-items:center; gap:0.45em; padding:0.25em 0.75em; border-radius:999px; border:1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 0.85em; letter-spacing: 0.02em; background: rgba(0,255,255,0.06); }
.badge.ghost { border-color:#333; color:#ddd; background: rgba(255,255,255,0.04); font-weight:600; }
.hero-sub { font-size: 1.15em; max-width: 820px; margin: 0.6em auto 1.2em; }
.hero-note { max-width: 820px; margin: 1.1em auto 0; font-size: 0.95em; color:#cfcfcf; opacity:0.9; }
.hero-points { display:flex; justify-content:center; gap:1.2em; flex-wrap:wrap; margin: 0.8em auto 1.3em; max-width: 900px; }
.hero-points > div { border:1px solid #222; background: rgba(255,255,255,0.03); padding:0.6em 0.9em; border-radius: 12px; font-size: 0.95em; }
.checklist { list-style:none; padding-left:0; margin:0.5em 0 0; }
.checklist li { margin:0.4em 0; }
.checklist li::before { content:"✔"; color: var(--accent); margin-right:0.55em; }
.details { margin-top: 1.2em; border: 1px solid #222; border-radius: 14px; background: rgba(255,255,255,0.03); padding: 0.9em 1.0em; }
.details summary { cursor: pointer; font-weight: 700; color: #fff; }
.details summary::marker { color: var(--accent); }
.kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78em; color:#a7a7a7; margin-bottom: 0.3em; }


/* Hide scrollbars on all platforms */
html, body {
  overflow-y: scroll; /* keeps scrolling working */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


#scrollProgress {
  position: fixed;
  top: 0;
  right: 0;
  width: 4px;
  height: 0%;
  background-color: var(--accent); /* or replace with a hex */
  z-index: 9999;
  transition: height 0.25s ease-out;
  border-radius: 0 4px 4px 0;
}


.section-title {
  animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}





.card-neon {
  border: 1px solid #222;
  position: relative;
  overflow: hidden;
}

.card-neon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, #ffea00, #ffffff, #ffea00);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}



 .game-wrapper {
            width: 100%;
            height: 100vh;
            border: none;
        }

    

/* ===========================
   V3 readability + attraction
   =========================== */
:root{
  --bg0:#000;
  --bg1:#05070b;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.075);
  --border: rgba(255,255,255,.14);
  --soft: rgba(255,255,255,.72);
  --muted: rgba(255,255,255,.62);
  --shadow: 0 18px 45px rgba(0,0,0,.55);
}

html { scroll-behavior: smooth; }

body{
  font-size: clamp(17px, 0.65vw + 15px, 20px);
  line-height: 1.85;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,255,255,.12), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(0,255,255,.09), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0,255,255,.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.container{ max-width: 1100px; }

p{ color: var(--soft); }
.prose{ max-width: 70ch; }

.section-title{
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2.2rem);
}

.kicker{
  letter-spacing: .16em;
  opacity: .85;
}

.badge-row{ flex-wrap: wrap; gap: 10px; }
.badge{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

#hero{
  position: relative;
  overflow: hidden;
}

#hero h1{
  font-size: clamp(2.1rem, 2.3vw + 1.6rem, 3.4rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.grad{
  background: linear-gradient(90deg, var(--accent), #9fffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub{
  font-size: clamp(1.05rem, .35vw + 1rem, 1.25rem);
  max-width: 65ch;
}

.hero-typed{
  margin-top: 10px;
  font-size: 1.05em;
  color: var(--soft);
}
.hero-typed .muted{ color: var(--muted); margin-right: 8px; }

.trust-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: var(--soft);
  backdrop-filter: blur(6px);
}

.hero-offer{
  margin-top: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,255,255,.28);
  background: rgba(0,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-width: 78ch;
}
.hero-offer-title{
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 6px;
}
.hero-offer-text{ color: var(--soft); }

.btn{
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(6px);
}
.btn-primary{
  border-color: rgba(0,255,255,.45);
  background: rgba(0,255,255,.12);
}
.btn-ghost{
  background: transparent;
}

.hero-mini{
  margin-top: 14px;
  color: var(--muted);
  font-size: .98em;
}
.hero-mini a{ text-decoration: underline; }

.path-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}
.path-card{
  display:block;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.path-card.selected{ border-color: rgba(0,255,255,.7); background: rgba(0,255,255,.10); }
.path-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,255,255,.5);
  background: rgba(255,255,255,.07);
}
.path-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.path-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,255,255,.35);
  background: rgba(0,255,255,.08);
}
.path-card h3{
  margin: 0 0 6px 0;
  font-size: 1.1em;
}
.path-card p{
  margin: 0;
  color: var(--muted);
}
.mini-list{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: var(--soft);
}
.mini-list li{ margin: 6px 0; }
.path-cta{
  margin-top: 12px;
  font-weight: 800;
  color: var(--accent);
}

.notice{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: var(--soft);
  max-width: 80ch;
}

.cards .card{
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.card-neon{
  border-color: rgba(0,255,255,.25) !important;
}

details{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
details[open]{
  border-color: rgba(0,255,255,.35);
  background: rgba(0,255,255,.06);
}

.sticky-cta{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: min(560px, calc(100% - 24px));
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 55px rgba(0,0,0,.6);
  z-index: 9999;
}
.sticky-btn{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #fff;
  text-decoration:none;
  font-weight: 800;
}
.sticky-primary{
  border-color: rgba(0,255,255,.45);
  background: rgba(0,255,255,.12);
  color: #fff;
}
.sticky-btn span{ font-size: .95em; }

.menu a.active{ color: var(--accent); }
.menu a.active::after{ content:''; display:block; height:2px; width:16px; background: var(--accent); margin-top:6px; border-radius:2px; }

@media (max-width: 900px){
  .path-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .sticky-cta{ display: flex; }
  body{ padding-bottom: 92px; }
  header{ position: sticky; top: 0; z-index: 9998; backdrop-filter: blur(10px); }
}




        /* --- Contact cards (no form) --- */
        .contact-grid{
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap:18px;
            margin-top:1.4em;
        }
        @media (max-width: 900px){
            .contact-grid{ grid-template-columns: 1fr; }
        }
        .contact-card{
            display:flex;
            align-items:center;
            gap:14px;
            padding:18px 18px;
            border-radius:18px;
            border:1px solid rgba(0, 255, 255, 0.25);
            background:rgba(0,0,0,0.35);
            box-shadow:0 0 18px rgba(0, 255, 255, 0.10);
            text-decoration:none;
            color:inherit;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .contact-card:hover{
            transform: translateY(-2px);
            border-color: rgba(0, 255, 255, 0.45);
            box-shadow:0 0 26px rgba(0, 255, 255, 0.16);
        }
        .contact-card.subtle{
            border-color: rgba(255, 255, 255, 0.10);
            box-shadow:none;
            opacity:.95;
        }
        .contact-icon{
            font-size:1.4rem;
            width:44px;height:44px;
            display:flex;align-items:center;justify-content:center;
            border-radius:14px;
            background:rgba(0, 255, 255, 0.08);
            border:1px solid rgba(0, 255, 255, 0.18);
        }
        .contact-text{ flex:1; min-width:0; }
        .contact-title{ font-weight:700; letter-spacing:.2px; }
        .contact-value{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; opacity:.95; margin-top:2px; word-break:break-word; }
        .contact-hint{ font-size:.9rem; opacity:.7; margin-top:3px; }
        .contact-cta{
            font-weight:700;
            padding:.45em .8em;
            border-radius:999px;
            border:1px solid rgba(0, 255, 255, 0.22);
            background:rgba(0, 255, 255, 0.08);
            white-space:nowrap;
        }

        .contact-quick{
            display:flex;
            gap:10px;
            justify-content:center;
            flex-wrap:wrap;
            margin-top: 1.2em;
        }
        .btn.btn-small{
            padding: .75em 1.05em;
            font-size: .95em;
        }

        /* --- Mini lists inside cards --- */
        .mini-list{
            margin:.9em 0 0;
            padding-left: 1.1em;
        }
        .mini-list li{ margin:.35em 0; }

        /* --- Toast --- */
        .toast{
            position:fixed;
            left:50%;
            bottom:18px;
            transform:translateX(-50%);
            background:rgba(0,0,0,.75);
            border:1px solid rgba(0,255,255,.22);
            border-radius:999px;
            padding:.7em 1.0em;
            color:#e8feff;
            box-shadow:0 0 18px rgba(0,255,255,.12);
            opacity:0;
            pointer-events:none;
            transition: opacity .18s ease, transform .18s ease;
            z-index:9999;
        }
        .toast.show{
            opacity:1;
            transform:translateX(-50%) translateY(-4px);
        }