/* assets/css/style.css */
/* Basic reset & variables */
:root{
  --c-dark-1: #3c344a;
  --c-dark-2: #34364a;
  --accent: #f6c85f;
  --muted: #bfb8c9;
  --glass: rgba(255,255,255,0.04);
  --radius: 14px;
  --maxw: 1100px;
  --ease: cubic-bezier(.22,.9,.35,1);
  --nav-h: 72px;
  --topbar-h: 20px;
  --text: #111;
  --bg: #fff;
  --header-bg: rgba(255,255,255,0.15);
  --header-blur: 10px;
  --topbar-bg: #34364a;
  --btn-text: #fff;
  --shadow-color: rgba(0,0,0,0.10);
  --sidemenu-bg: rgba(255,255,255,0.8);
}

/* Light theme overrides */
:root[data-theme="light"]{
  --c-dark-1: #e9e7ef;
  --c-dark-2: #f2eef6;
  --accent: rgb(176, 118, 70);
  --muted: #4b4b56;
  --glass: rgba(0,0,0,0.04);
  --text: rgb(61,61,61);
  --bg: #ffffff;
  --topbar-bg: var(--c-dark-2);
}

/* Dark theme */
:root:not([data-theme="light"]){
  --c-dark-1: #3c344a;
  --c-dark-2: #34364a;
  --accent: #f6c85f;
  --muted: #bfb8c9;
  --glass: rgba(255,255,255,0.04);
  --text: #fff;
  --header-bg: linear-gradient(180deg, rgba(10,8,15,0.22), rgba(10,8,15,0.06));
  --bg: linear-gradient(120deg, var(--c-dark-1) 0%, var(--c-dark-2) 50%, var(--c-dark-1) 100%);
  --sidemenu-bg: rgba(60, 52, 74,0.8);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-top: calc(var(--nav-h) + var(--topbar-h));
  transition: background-color .4s var(--ease), color .3s var(--ease);
}

/* animated subtle gradient */
.bg-gradient-anim{
  position:fixed;inset:0;z-index:-100;pointer-events:none;
  background: linear-gradient(120deg, rgba(246,200,95,0.03) 0%, rgba(255,255,255,0.01) 50%, rgba(246,200,95,0.03) 100%);
  background-size: 240% 240%;
  animation: bgMove 18s linear infinite;
  mix-blend-mode: overlay;
  opacity:.9;
}
@keyframes bgMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.wrap{max-width:var(--maxw);margin:0 auto;padding:14px}

/* TOPBAR */
.topbar{
  position:fixed;left:0;right:0;top:0;height:var(--topbar-h);z-index:140;
  background: var(--topbar-bg);
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  backdrop-filter: blur(var(--header-blur));
  font-size:12px;color:var(--muted);
}

/* HEADER / NAV */
header{
  position:fixed;left:0;right:0;top:var(--topbar-h);height:var(--nav-h);z-index:130;
  backdrop-filter: blur(var(--header-blur));
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:8px 18px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;gap:8px;align-items:center}
.brand .title{font-weight:700;letter-spacing:0.6px;font-size:20px}
.brand .subtitle{font-size:12px;color:var(--muted)}

/* nav */
.nav{display:flex;align-items:center;gap:16px}
.nav-list{display:flex;gap:12px;list-style:none;align-items:center}
.nav-list a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px;transition: transform .18s var(--ease), background .18s var(--ease)}
.nav-list a:hover{transform:translateY(-3px);background:var(--glass)}

/* controls */
.controls{display:flex;align-items:center;gap:8px}
.lang-select, select#language-select{padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted)}
#theme-toggle{padding:8px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);cursor:pointer}

/* hero */
.hero{min-height:64vh;display:grid;align-items:center;position:relative;overflow:hidden;padding:40px 0}
.hero .card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:26px;border:1px solid rgba(255,255,255,0.04);box-shadow: 0 8px 40px var(--shadow-color)}
.big-title{font-size: clamp(28px, 5.6vw, 44px); margin-bottom:8px}
.lead{color:var(--muted);font-size:15px}

/* features */
.features{display:flex;flex-direction:column;gap:24px;padding:24px 0}
.feature-grid{display:flex;gap:18px;flex-wrap:wrap}
.feature-item{flex:1;min-width:220px;padding:16px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}

/* cards, lists, etc */
.card{border-radius:12px;padding:18px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
.muted{color:var(--muted)}

/* parallax layers (positions managed in JS) */
.parallax-section{position:relative;overflow:visible}
.parallax-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transform:translate3d(0,0,0)}
.layer-bg{filter:blur(36px);opacity:0.12}
.layer-mid{opacity:0.12}
.layer-fg{opacity:0.26;display:flex;align-items:flex-end;justify-content:flex-end;padding:20px}

/* reveal animations */
.reveal{opacity:0;transform: translateY(16px);transition: opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.show{opacity:1;transform: translateY(0)}
.reveal-left{transform:translateX(-36px);opacity:0}
.reveal-right{transform:translateX(36px);opacity:0}
.reveal-left.show,.reveal-right.show{transform:translateX(0);opacity:1;transition: all .7s var(--ease)}

/* responsive */
@media (max-width:1100px){
  .nav-list{display:none}
  .controls{gap:6px}
  .feature-grid{flex-direction:column}
  .hero{padding:24px 0}
}
@media (max-width:420px){
  header{padding:6px}
  .brand .title{font-size:16px}
}

/* footer */
.footer{padding:40px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,0.03);margin-top:28px}

/* small helpers */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);color:var(--btn-text);font-weight:600;text-decoration:none}
.section-title{font-weight:700;margin-bottom:12px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 14px}