:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.08);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.75);
  --line: rgba(255,255,255,.12);
  --brand: #f97316;
  --brand-2: #fb923c;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --radius-lg: 26px;
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

html{scroll-behavior:smooth;}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(249,115,22,.22), transparent 55%),
              radial-gradient(900px 500px at 90% 0%, rgba(59,130,246,.14), transparent 50%),
              var(--bg);
  color:var(--text);
  min-height:100vh;
}

body.light{
  --bg:#f8fafc;
  --panel: rgba(2,6,23,.06);
  --panel-2: rgba(2,6,23,.08);
  --text:#0f172a;
  --muted: rgba(15,23,42,.72);
  --line: rgba(2,6,23,.14);
  --shadow: 0 20px 60px rgba(2,6,23,.14);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(249,115,22,.22), transparent 55%),
              radial-gradient(900px 500px at 90% 0%, rgba(59,130,246,.10), transparent 50%),
              var(--bg);
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--max); margin:0 auto; padding:0 18px;}
.section{padding:72px 0;}
.section-sm{padding:40px 0;}
h1,h2,h3{margin:0 0 12px;}
p{margin:0 0 14px; line-height:1.6;}
.muted{color:var(--muted);}
.kicker{color:var(--brand); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem;}
hr.sep{border:0; height:1px; background:var(--line); margin:18px 0;}

.skip-link{
  position:absolute; left:-999px; top:10px;
  background:var(--text); color:var(--bg);
  padding:10px 12px; border-radius:12px;
}
.skip-link:focus{left:12px; z-index:9999;}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(11,18,32,.55);
  border-bottom: 1px solid var(--line);
}
body.light .site-header{ background: rgba(248,250,252,.65); }

.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:12px;
}

.brand{display:flex; align-items:center; gap:10px; font-weight:800;}
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), rgba(249,115,22,.15));
  box-shadow: 0 12px 30px rgba(249,115,22,.18);
  position:relative;
}
.brand-mark:after{
  content:""; position:absolute; inset:8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
}
body.light .brand-mark:after{border-color: rgba(2,6,23,.18);}
.brand-name{font-size:1.05rem;}

.nav{
  display:flex; align-items:center; gap:10px;
}
.nav-link{
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  font-weight:600;
}
.nav-link:hover{background:var(--panel); color:var(--text);}
.nav-link.active{background:var(--panel-2); color:var(--text);}

.nav-divider{width:1px; height:26px; background:var(--line); margin:0 4px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0b1220;
  box-shadow: 0 18px 40px rgba(249,115,22,.25);
}
.btn-primary:hover{filter:saturate(1.1) brightness(1.02);}
.btn-ghost{
  background: transparent;
  border:1px solid var(--line);
  color: var(--text);
}
.btn-ghost:hover{background: var(--panel);}

.icon-btn{
  background:transparent; border:1px solid var(--line);
  width:44px; height:44px; border-radius:14px;
  display:none; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text);
}
.icon-bars{
  width:18px; height:2px; background: currentColor; position:relative; display:block;
}
.icon-bars:before, .icon-bars:after{
  content:""; position:absolute; left:0; width:18px; height:2px; background: currentColor;
}
.icon-bars:before{top:-6px;}
.icon-bars:after{top:6px;}

.theme{display:flex; align-items:center; gap:8px;}
.theme-label{font-size:.85rem; color:var(--muted); font-weight:700;}
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: transparent;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.pill[aria-pressed="true"]{background: var(--panel-2);}

.hero{
  padding:72px 0 28px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:26px;
  align-items:center;
}
.hero-card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: var(--radius-lg);
  padding:22px;
  box-shadow: var(--shadow);
}
.hero h1{font-size: clamp(2.1rem, 4vw, 3.2rem); line-height:1.1;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.chip{
  border:1px solid var(--line);
  background: var(--panel);
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  color:var(--muted);
}
.chip strong{color:var(--text);}

.proof{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:14px;
}
.proof .card{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding:16px;
}
.stat{font-size:1.35rem; font-weight:900;}
.card h3{margin:0 0 6px; font-size:1.05rem;}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;}
.card{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding:18px;
}
.card:hover{background: var(--panel-2);}
.card .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.badge{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  font-weight:800;
  font-size:.82rem;
  color:var(--muted);
}
.card-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.thumb{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:14px;
}
.thumb img{width:100%; height:auto;}
.list{
  margin:0; padding-left:18px;
}
.list li{margin:8px 0; color:var(--muted); line-height:1.5;}

.callout{
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(255,255,255,.04));
  border-radius: var(--radius-lg);
  padding:22px;
  box-shadow: var(--shadow);
}
.callout-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}

.page-hero{
  padding:46px 0 18px;
}
.page-hero h1{font-size: clamp(1.9rem, 3.2vw, 2.6rem);}

.form{
  display:grid; gap:12px;
}
.input{
  width:100%;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius: 14px;
  padding:12px 12px;
  outline:none;
}
body.light .input{background: rgba(2,6,23,.03);}
.input:focus{border-color: rgba(249,115,22,.7); box-shadow: 0 0 0 4px rgba(249,115,22,.12);}
textarea.input{min-height:140px; resize:vertical;}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.help{font-size:.9rem; color:var(--muted);}
.toast{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding:12px 14px;
}

.site-footer{
  border-top: 1px solid var(--line);
  padding:34px 0;
  background: rgba(0,0,0,.06);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .9fr;
  gap:18px;
  align-items:start;
}
.footer-title{font-size:1rem;}
.footer-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px;}
.footer-list a{color:var(--muted);}
.footer-list a:hover{color:var(--text);}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.footer-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.footer-bottom{
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.footer-links{display:flex; gap:12px;}
.footer-links a{color:var(--muted);}
.footer-links a:hover{color:var(--text);}

.reveal{opacity:0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease;}
.reveal.is-visible{opacity:1; transform:none;}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; }
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .proof{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .icon-btn{display:inline-flex;}
  .nav{
    position:fixed;
    inset:72px 12px auto 12px;
    background: rgba(11,18,32,.92);
    border:1px solid var(--line);
    border-radius: 18px;
    padding:12px;
    box-shadow: var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  body.light .nav{background: rgba(248,250,252,.92);}
  .nav.open{display:flex;}
  .nav-divider{display:none;}
  .theme{justify-content:space-between;}
}


/* ---------- Brand assets ---------- */
.brand-logo{height:40px; width:auto; display:block;}
.footer-logo{height:28px; width:auto; opacity:.95}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px);}
.nav-shell{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0;}
.nav{display:flex; align-items:center; gap:18px;}
.nav-link{font-weight:600; opacity:.9}
.nav-link:hover{opacity:1}
.nav-link.btn{padding:.6rem .95rem; border-radius:999px;}
/* Theme dropdown */
.theme-dd{position:relative;}
.theme-icon{width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center;}
.theme-icon:hover{border-color:rgba(249,115,22,.55)}
.theme-glyph{width:18px;height:18px; display:block; background:currentColor; mask: var(--glyph) no-repeat center / contain; -webkit-mask: var(--glyph) no-repeat center / contain; opacity:.95}
:root{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12Zm0-16a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 18a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1ZM3 11a1 1 0 0 1 1 1a1 1 0 0 1-1 1H2a1 1 0 1 1 0-2h1Zm19 0a1 1 0 0 1 0 2h-1a1 1 0 1 1 0-2h1ZM4.22 4.22a1 1 0 0 1 1.42 0l.7.7a1 1 0 1 1-1.42 1.42l-.7-.7a1 1 0 0 1 0-1.42Zm13.44 13.44a1 1 0 0 1 1.42 0l.7.7a1 1 0 1 1-1.42 1.42l-.7-.7a1 1 0 0 1 0-1.42ZM19.78 4.22a1 1 0 0 1 0 1.42l-.7.7a1 1 0 1 1-1.42-1.42l.7-.7a1 1 0 0 1 1.42 0ZM6.34 17.66a1 1 0 0 1 0 1.42l-.7.7a1 1 0 1 1-1.42-1.42l.7-.7a1 1 0 0 1 1.42 0Z'/%3E%3C/svg%3E");}
body.dark{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 14.2A8.4 8.4 0 0 1 9.8 3a7.5 7.5 0 1 0 11.2 11.2Z'/%3E%3C/svg%3E");}
.theme-menu{position:absolute; right:0; top:46px; min-width:160px; padding:8px; border-radius:14px; border:1px solid var(--line); background:rgba(10,15,26,.96); box-shadow:var(--shadow);}
body:not(.dark) .theme-menu{background:rgba(255,255,255,.96);}
.theme-item{width:100%; text-align:left; padding:10px 10px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--text); font-weight:600; cursor:pointer;}
.theme-item:hover{border-color:rgba(249,115,22,.55); background:rgba(249,115,22,.10);}

/* Mobile nav */
@media (max-width: 860px){
  .nav{position:fixed; inset:70px 14px auto 14px; padding:14px; border-radius:18px; flex-direction:column; align-items:stretch; gap:10px;
       border:1px solid var(--line); background:rgba(10,15,26,.96); box-shadow:var(--shadow); transform:translateY(-8px); opacity:0; pointer-events:none;}
  body:not(.dark) .nav{background:rgba(255,255,255,.96);}
  .nav.is-open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-link.btn{width:100%; text-align:center;}
}

/* Hero tags */
.tag{display:inline-flex; align-items:center; padding:.35rem .65rem; border-radius:999px; font-weight:700; font-size:.85rem; border:1px solid var(--line);}
.tag-dark{background:rgba(255,255,255,.06); color:var(--text);}
.tag-brand{background:rgba(249,115,22,.14); border-color:rgba(249,115,22,.55); color:var(--text);}
.tag-brand:hover{background:rgba(249,115,22,.22)}

/* Projects card style (like screenshot) */
.p-card{border:1px solid rgba(255,255,255,.10); border-radius:22px; overflow:hidden; background:rgba(255,255,255,.05); box-shadow:0 18px 50px rgba(0,0,0,.22); transition:border-color .2s ease, transform .2s ease;}
body:not(.dark) .p-card{background:rgba(0,0,0,.03);}
.p-card:hover{border-color:rgba(249,115,22,.75); transform:translateY(-2px);}
.p-thumb{position:relative; height:190px; overflow:hidden; background:rgba(0,0,0,.15);}
.p-thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.08);}
.p-pill{display:inline-flex; align-items:center; padding:.28rem .6rem; border-radius:999px; font-weight:700; font-size:.78rem; border:1px solid var(--line); background:rgba(255,255,255,.06); margin-right:8px;}
.p-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.p-list{margin:10px 0 0; padding-left:18px;}
/* make buttons like screenshot */
.btn{border-radius:14px;}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:1px solid rgba(249,115,22,.55);}
.btn-ghost{border:1px solid var(--line); background:rgba(255,255,255,.04);}

/* Carousel (home only) */
.carousel{position:relative;}
.carousel-track{display:flex; gap:18px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px;}
.carousel-track::-webkit-scrollbar{height:10px}
.carousel-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:999px}
.carousel-track > .p-card{min-width:calc((100% - 36px)/3); scroll-snap-align:start;}
@media (max-width: 980px){
  .carousel-track > .p-card{min-width:calc((100% - 18px)/2);}
}
@media (max-width: 620px){
  .carousel-track > .p-card{min-width:100%;}
}

/* Projects page grid (no slider) */
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px;}
@media (max-width: 980px){.proj-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 620px){.proj-grid{grid-template-columns:1fr;}}
.proj-grid .p-card:hover{border-color:rgba(249,115,22,.85)}

/* Footer socials icons only */
.footer-socials{display:flex; gap:12px; margin-top:10px;}
.social-icon{width:38px; height:38px; border-radius:999px; border:1px solid var(--line); display:grid; place-items:center; background:rgba(255,255,255,.05);}
.social-icon:hover{border-color:rgba(249,115,22,.65)}
.social-icon svg{width:18px; height:18px; fill:currentColor; opacity:.9}

/* Preloader + subpage loader */
#preloader, #pageLoader{position:fixed; inset:0; display:grid; place-items:center; background:rgba(6,10,18,.86); backdrop-filter:blur(14px); z-index:200;}
body:not(.dark) #preloader, body:not(.dark) #pageLoader{background:rgba(255,255,255,.86);}
.preloader-card{display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 22px; border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.06);}
.preloader-logo{width:54px; height:54px; border-radius:16px}
.spinner{width:22px; height:22px; border-radius:999px; border:3px solid rgba(255,255,255,.25); border-top-color:rgba(249,115,22,.9); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
body.is-loaded #preloader{opacity:0; pointer-events:none; transition:opacity .25s ease;}
#pageLoader{opacity:0; pointer-events:none; transition:opacity .18s ease;}
body.is-navigating #pageLoader{opacity:1; pointer-events:auto;}

.pad{padding:16px 16px 18px;}

@media(max-width:768px){
  .logo img{
    width:150px !important;
  }
}