/* ============================================================
   DHANANJAY YADAV — DIGITAL ECOSYSTEM HEADQUARTERS
   Design tokens + shared components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{
  /* ---- color tokens (dark = default) ---- */
  --bg:#070A0F;
  --surface:#0D1117;
  --surface-2:#121821;
  --surface-3:#161D29;
  --text:#F5F7FA;
  --text-2:#A7B0BE;
  --muted:#6F7A8A;
  --accent:#4F8CFF;
  --accent-2:#7C5CFF;
  --cyan:#22D3EE;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --success:#3FCB6E;
  --warn:#F2B84B;

  /* ---- gradients ---- */
  --grad-primary:linear-gradient(135deg,var(--accent),var(--accent-2));
  --grad-glow:radial-gradient(circle,rgba(79,140,255,0.35),transparent 70%);

  /* ---- type scale (clamp-based, fluid) ---- */
  --fs-display:clamp(2.75rem,3.2vw + 1.6rem,5.25rem);
  --fs-h1:clamp(2.25rem,2vw + 1.4rem,3.5rem);
  --fs-h2:clamp(1.75rem,1.4vw + 1.2rem,2.5rem);
  --fs-h3:clamp(1.25rem,0.6vw + 1rem,1.6rem);
  --fs-body-lg:clamp(1.05rem,0.3vw + 1rem,1.2rem);
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-caption:0.75rem;

  /* ---- spacing / radius ---- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-full:999px;
  --container:1240px;
  --section-pad:clamp(72px,9vw,140px);

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.9,.24,1);
  --fast:180ms;
  --normal:380ms;
  --slow:900ms;

  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F1F3F6;
  --surface-3:#E8EBF0;
  --text:#0E1420;
  --text-2:#4A5361;
  --muted:#7B8494;
  --border:rgba(14,20,32,0.08);
  --border-strong:rgba(14,20,32,0.14);
  --grad-glow:radial-gradient(circle,rgba(79,140,255,0.18),transparent 70%);
  color-scheme: light;
}

@media (prefers-color-scheme: light){
  :root[data-theme="system"]{
    --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F1F3F6; --surface-3:#E8EBF0;
    --text:#0E1420; --text-2:#4A5361; --muted:#7B8494;
    --border:rgba(14,20,32,0.08); --border-strong:rgba(14,20,32,0.14);
    --grad-glow:radial-gradient(circle,rgba(79,140,255,0.18),transparent 70%);
    color-scheme: light;
  }
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--normal) var(--ease), color var(--normal) var(--ease);
}

h1,h2,h3,h4{
  font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.12; color:var(--text);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
p{color:var(--text-2);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}
.section{padding:var(--section-pad) 0; position:relative;}
.section-alt{background:var(--surface);}

/* ---- focus states (accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* ---- skip link ---- */
.skip-link{
  position:absolute; left:16px; top:-60px; background:var(--accent); color:#fff; padding:10px 18px;
  border-radius:var(--radius-sm); z-index:999; transition:top var(--fast) var(--ease); font-weight:600; font-size:var(--fs-small);
}
.skip-link:focus{top:16px;}

/* ---- eyebrow ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--grad-primary); flex:none;}

.section-head{max-width:640px; margin-bottom:52px;}
.section-head p{margin-top:14px; font-size:var(--fs-body-lg);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; letter-spacing:-0.005em;
  padding:14px 26px; border-radius:var(--radius-full); border:1px solid transparent; cursor:pointer;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--grad-primary); color:#fff; box-shadow:0 14px 32px -14px rgba(79,140,255,0.55);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(79,140,255,0.7);}
.btn-primary svg{transition:transform var(--fast) var(--ease);}
.btn-primary:hover svg{transform:translate(3px,-2px);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
.btn-text{padding:6px 0; color:var(--accent); font-weight:600; position:relative;}
.btn-text::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform var(--fast) var(--ease);}
.btn-text:hover::after{transform:scaleX(1); transform-origin:left;}
.btn-sm{padding:9px 18px; font-size:13px;}

/* ---- badges ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-full);
  border:1px solid var(--border-strong);
}
.badge i{width:6px; height:6px; border-radius:50%; flex:none;}
.badge-live{color:var(--success); border-color:rgba(63,203,110,0.3); background:rgba(63,203,110,0.08);}
.badge-live i{background:var(--success); box-shadow:0 0 0 0 rgba(63,203,110,0.6); animation:pulseDot 2s infinite;}
.badge-building{color:var(--warn); border-color:rgba(242,184,75,0.3); background:rgba(242,184,75,0.08);}
.badge-building i{background:var(--warn);}
.badge-soon{color:var(--muted); border-color:var(--border-strong); background:var(--surface-2);}
.badge-soon i{background:var(--muted);}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(63,203,110,0.55);} 70%{box-shadow:0 0 0 7px rgba(63,203,110,0);} 100%{box-shadow:0 0 0 0 rgba(63,203,110,0);}}

/* ---- card base ---- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:transform var(--normal) var(--ease), border-color var(--normal) var(--ease), background var(--normal) var(--ease);
}
.card:hover{border-color:var(--border-strong); transform:translateY(-4px);}

/* ---- reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 900ms var(--ease), transform 900ms var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease), transform 700ms var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms;}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms;}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms;}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms;}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms;}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms;}

/* ---- grid helpers ---- */
.grid{display:grid; gap:20px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .g-3{grid-template-columns:repeat(2,1fr);} .g-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .g-2,.g-3,.g-4{grid-template-columns:1fr;} }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200; padding:18px 0;
  transition:background var(--normal) var(--ease), border-color var(--normal) var(--ease), padding var(--normal) var(--ease), backdrop-filter var(--normal) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(7,10,15,0.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border); padding:12px 0;
}
:root[data-theme="light"] .site-header.scrolled{background:rgba(247,248,250,0.78);}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.01em; position:relative;}
.logo .mark{
  width:38px; height:38px; border-radius:50%; background:var(--grad-primary); display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; flex:none; box-shadow:0 8px 18px -8px rgba(79,140,255,0.6); position:relative; overflow:hidden;
  border:2px solid transparent; background-clip:padding-box;
  transition:transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
.logo .mark::before{
  content:''; position:absolute; inset:-2px; border-radius:50%; padding:2px;
  background:conic-gradient(from 0deg, var(--accent), var(--cyan), var(--accent-2), var(--accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; z-index:1; opacity:0; transition:opacity var(--normal) var(--ease);
  animation:spin 6s linear infinite; animation-play-state:paused;
}
.logo:hover .mark{transform:scale(1.08); box-shadow:0 12px 26px -10px rgba(79,140,255,0.75);}
.logo:hover .mark::before{opacity:1; animation-play-state:running;}
.logo .mark img{width:100%; height:100%; object-fit:cover; border-radius:50%; position:relative; z-index:2; transition:transform var(--slow) var(--ease);}
.logo:hover .mark img{transform:scale(1.12);}
.logo .mark-fallback{display:none; align-items:center; justify-content:center; position:absolute; inset:0; z-index:2;}
.nav-main{display:flex; align-items:center; gap:34px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:14px; font-weight:600; color:var(--text-2); position:relative; padding:4px 0; transition:color var(--fast) var(--ease);}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-links a.active::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--grad-primary); border-radius:2px;}
.nav-actions{display:flex; align-items:center; gap:14px;}

.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:.3s var(--ease); position:relative;
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent);}
.theme-toggle svg{width:16px; height:16px;}

.hamburger{display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface-2); align-items:center; justify-content:center; flex-direction:column; gap:4px;}
.hamburger span{width:16px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease);}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:190; display:flex; flex-direction:column; justify-content:center;
  padding:24px; gap:6px; transform:translateY(-100%); transition:transform var(--normal) var(--ease); opacity:0;
}
.mobile-menu.open{transform:translateY(0); opacity:1;}
.mobile-menu a{font-family:'Manrope',sans-serif; font-size:28px; font-weight:700; padding:14px 8px; border-bottom:1px solid var(--border);}
.mobile-menu .btn{margin-top:20px; align-self:flex-start;}

@media (max-width:920px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative; padding-top:120px; padding-bottom:80px;
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-bg .grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 90%);
  opacity:0.6;
}
.hero-bg .glow{
  position:absolute; width:900px; height:900px; border-radius:50%; background:var(--grad-glow); top:-320px; left:50%; transform:translateX(-50%);
  filter:blur(10px);
}
.hero-bg .glow-follow{
  position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(124,92,255,0.22),transparent 70%);
  top:40%; left:70%; transition:transform 1.2s var(--ease); filter:blur(20px);
}
.hero-content{position:relative; z-index:2; max-width:820px;}
.hero-content h1{margin-bottom:24px;}
.hero-content h1 .line{display:block; overflow:hidden;}
.hero-content h1 .line span{display:inline-block; transform:translateY(110%); transition:transform 900ms var(--ease);}
.hero-content.in h1 .line span{transform:translateY(0);}
.hero-content h1 .line:nth-child(1) span{transition-delay:60ms;}
.hero-content h1 .line:nth-child(2) span{transition-delay:160ms;}
.hero-content h1 .grad{background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-content .sub{
  font-size:var(--fs-body-lg); max-width:560px; margin-bottom:36px; opacity:0; transform:translateY(14px);
  transition:opacity 800ms var(--ease) 380ms, transform 800ms var(--ease) 380ms;
}
.hero-content.in .sub{opacity:1; transform:translateY(0);}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(14px); transition:opacity 800ms var(--ease) 480ms, transform 800ms var(--ease) 480ms;}
.hero-content.in .hero-ctas{opacity:1; transform:translateY(0);}
.hero-links{margin-top:22px; opacity:0; transform:translateY(10px); transition:opacity 800ms var(--ease) 560ms, transform 800ms var(--ease) 560ms;}
.hero-content.in .hero-links{opacity:1; transform:translateY(0);}

/* ---- status strip ---- */
.status-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); position:relative; z-index:2;}
.status-row{display:flex; flex-wrap:wrap; gap:0; justify-content:space-between; padding:22px 0;}
.status-item{display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; color:var(--text-2); padding:6px 18px;}
.status-item i{width:7px; height:7px; border-radius:50%; background:var(--grad-primary); flex:none;}
@media (max-width:760px){ .status-row{gap:10px 0; padding:16px 0;} .status-item{padding:6px 12px;} }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:40px;} }
.about-portrait{position:relative;}
.about-portrait .frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong);
  aspect-ratio:4/5; background:var(--surface-2);
}
.about-portrait .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease);}
.about-portrait:hover .frame img{transform:scale(1.04);}
.about-portrait::before{
  content:''; position:absolute; inset:-18px; border-radius:calc(var(--radius-lg) + 18px);
  background:conic-gradient(from 180deg, var(--accent), var(--accent-2), var(--cyan), var(--accent));
  opacity:0.16; filter:blur(30px); z-index:-1;
}
.about-tag{
  position:absolute; bottom:18px; left:18px; right:18px; background:rgba(7,10,15,0.72); backdrop-filter:blur(10px);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:12px 16px; display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:#fff;
}
.about-copy .who{font-size:var(--fs-body-lg); margin-bottom:18px;}
.about-list{display:flex; flex-direction:column; gap:18px; margin:26px 0 30px;}
.about-list li{display:flex; gap:14px; align-items:flex-start;}
.about-list .ico{
  width:36px; height:36px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent);
}
.about-list .ico svg{width:16px; height:16px;}
.about-list b{display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--text); margin-bottom:2px;}
.about-list span{font-size:13.5px; color:var(--text-2);}

/* ============================================================
   ECOSYSTEM MAP
   ============================================================ */
.eco-hub{
  position:relative; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  padding:60px 30px; overflow:hidden;
}
.eco-hub .grid-lines{
  position:absolute; inset:0; background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size:26px 26px; opacity:0.7;
}
.eco-center{
  position:relative; z-index:2; width:fit-content; margin:0 auto 44px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.eco-center .node{
  width:104px; height:104px; border-radius:50%; background:var(--grad-primary); display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:12px; color:#fff; text-align:center; line-height:1.25; letter-spacing:0.02em;
  box-shadow:0 0 0 8px rgba(79,140,255,0.08), 0 20px 50px -18px rgba(79,140,255,0.7); position:relative;
}
.eco-center .node::after{
  content:''; position:absolute; inset:-14px; border-radius:50%; border:1px dashed var(--border-strong); animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.eco-center span{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.05em;}

.eco-grid{position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
@media (max-width:980px){ .eco-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .eco-grid{grid-template-columns:repeat(2,1fr);} }

.eco-node{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 16px;
  text-align:center; transition:transform var(--normal) var(--ease), border-color var(--normal) var(--ease), background var(--normal) var(--ease);
  position:relative; cursor:pointer;
}
.eco-node:hover{transform:translateY(-5px) scale(1.03); border-color:var(--accent); background:var(--surface-3);}
.eco-node .n-icon{width:38px; height:38px; border-radius:9px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--accent);}
.eco-node .n-icon svg{width:17px; height:17px;}
.eco-node b{display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; margin-bottom:8px;}
.eco-node.disabled{opacity:0.55; cursor:default;}
.eco-node.disabled:hover{transform:none; border-color:var(--border);}

/* ============================================================
   PROJECT / SERVICE / RESOURCE CARDS
   ============================================================ */
.proj-card{padding:26px; display:flex; flex-direction:column; gap:14px; height:100%;}
.proj-card .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.proj-card .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
.proj-card h3{font-size:19px;}
.proj-card p{font-size:14px; flex:1;}
.proj-card .tech{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px;}
.proj-card .tech span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:4px 9px; border-radius:6px;}
.proj-card .cta{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--accent); margin-top:6px;}
.proj-card .cta svg{transition:transform var(--fast) var(--ease);}
.proj-card:hover .cta svg{transform:translate(3px,-3px);}

.serv-card{padding:28px; display:flex; flex-direction:column; gap:14px; height:100%;}
.serv-card .s-icon{width:46px; height:46px; border-radius:11px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--accent);}
.serv-card .s-icon svg{width:20px; height:20px;}
.serv-card h3{font-size:18px;}
.serv-card p{font-size:14px;}

.res-card{padding:24px; text-align:left; display:flex; flex-direction:column; gap:10px;}
.res-card .r-icon{font-size:26px;}
.res-card h3{font-size:16.5px;}
.res-card p{font-size:13.5px;}

/* ============================================================
   VISION TIMELINE
   ============================================================ */
.vision-line{position:relative; display:flex; justify-content:space-between; gap:10px; padding-top:10px;}
.vision-line::before{content:''; position:absolute; top:22px; left:0; right:0; height:2px; background:var(--border);}
.vision-step{flex:1; text-align:center; position:relative; padding-top:0;}
.vision-step .dot{
  width:44px; height:44px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:'Manrope',sans-serif; font-weight:800;
  color:var(--accent); position:relative; z-index:2; transition:.4s var(--ease);
}
.vision-step:hover .dot{background:var(--grad-primary); color:#fff; transform:scale(1.08);}
.vision-step b{display:block; font-family:'Manrope',sans-serif; font-size:14.5px; margin-bottom:6px;}
.vision-step span{font-size:12.5px; color:var(--muted); display:block; max-width:150px; margin:0 auto;}
@media (max-width:760px){
  .vision-line{flex-direction:column; gap:28px;}
  .vision-line::before{top:0; bottom:0; left:22px; right:auto; width:2px; height:auto;}
  .vision-step{display:flex; align-items:center; gap:16px; text-align:left;}
  .vision-step .dot{margin:0;}
  .vision-step span{margin:0;}
}

/* ============================================================
   NEWSLETTER / CONTACT
   ============================================================ */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(28px,4vw,56px);}
.newsletter-row{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap; min-width:320px; flex:1;}
.field{
  flex:1; min-width:220px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-full);
  padding:14px 20px; color:var(--text); font-size:14px; transition:border-color var(--fast) var(--ease);
}
.field:focus{border-color:var(--accent); outline:none;}
.field::placeholder{color:var(--muted);}
.form-msg{margin-top:14px; font-size:13.5px; font-weight:600; display:none;}
.form-msg.success{color:var(--success); display:block;}
.form-msg.error{color:#F26B6B; display:block;}

.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-types{display:flex; flex-direction:column; gap:14px; margin-bottom:30px;}
.ctype{
  display:flex; gap:14px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2);
  cursor:pointer; transition:.3s var(--ease);
}
.ctype input{margin-top:3px; accent-color:var(--accent);}
.ctype:hover{border-color:var(--accent);}
.ctype b{display:block; font-size:14px; margin-bottom:3px;}
.ctype span{font-size:12.5px; color:var(--text-2);}
.contact-direct{display:flex; flex-direction:column; gap:14px;}
.contact-direct a{
  display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--text-2); transition:color var(--fast) var(--ease);
}
.contact-direct a:hover{color:var(--accent);}
.contact-direct .ic{width:38px; height:38px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none;}
.contact-direct .ic svg{width:16px; height:16px;}

.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:12.5px; font-weight:700; color:var(--text-2); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:13px 16px; color:var(--text); font-size:14px; font-family:inherit; transition:border-color var(--fast) var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--accent); outline:none;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.field-error{font-size:12px; color:#F26B6B; margin-top:6px; display:none;}
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea{border-color:#F26B6B;}
.form-group.invalid .field-error{display:block;}
.hp-field{position:absolute; left:-9999px; opacity:0;}
.submit-state{display:none; align-items:center; gap:10px; font-size:13.5px; font-weight:600;}
.submit-state.show{display:flex;}
.spinner{width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--accent); animation:spin 0.7s linear infinite;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(50px,7vw,96px) clamp(24px,5vw,64px);
  text-align:center; background:var(--surface);
  border:1px solid var(--border);
}
.final-cta .cta-glow{position:absolute; inset:0; background:linear-gradient(120deg, rgba(79,140,255,0.16), rgba(124,92,255,0.16)); opacity:0.8;}
.final-cta .cta-glow::before{content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:var(--grad-glow); top:-220px; left:10%;}
.final-cta .cta-content{position:relative; z-index:2;}
.final-cta h2{max-width:640px; margin:0 auto 28px;}
.final-cta .cta-btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--surface); border-top:1px solid var(--border); padding:70px 0 30px;}
.foot-top{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:36px; padding-bottom:50px; border-bottom:1px solid var(--border);}
@media (max-width:900px){ .foot-top{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .foot-top{grid-template-columns:1fr;} }
.foot-brand p{font-size:13.5px; margin:14px 0 20px; max-width:280px;}
.foot-social{display:flex; gap:10px;}
.foot-social a{width:36px; height:36px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:.3s var(--ease);}
.foot-social a:hover{color:var(--accent); border-color:var(--accent);}
.foot-social svg{width:15px; height:15px;}
.foot-col h4{font-family:'Manrope',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text); margin-bottom:18px;}
.foot-col ul{display:flex; flex-direction:column; gap:11px;}
.foot-col a{font-size:13.5px; color:var(--text-2); transition:color var(--fast) var(--ease);}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:26px; font-size:12.5px; color:var(--muted);}
.foot-legal{display:flex; gap:20px; flex-wrap:wrap;}
.foot-legal a{color:var(--muted);}
.foot-legal a:hover{color:var(--accent);}

/* ---- scroll progress ---- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; background:var(--grad-primary); z-index:300; width:0%; transition:width 80ms linear;}

/* ---- generic legal page ---- */
.legal-content h2{margin:36px 0 14px; font-size:20px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--text-2); font-size:14.5px; line-height:1.8; margin-bottom:12px;}
.legal-content ul{list-style:disc; padding-left:22px;}
.legal-note{
  background:var(--surface-2); border:1px solid var(--border-strong); border-left:3px solid var(--warn);
  padding:16px 20px; border-radius:var(--radius-sm); font-size:13.5px; color:var(--text-2); margin-bottom:30px;
}

/* ============================================================
   ADVANCED MICRO-INTERACTIONS
   ============================================================ */

/* ---- custom cursor (desktop only, subtle) ---- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform;
}
.cursor-dot{width:6px; height:6px; background:var(--accent); transition:opacity .2s var(--ease), background .3s var(--ease);}
.cursor-ring{
  width:34px; height:34px; border:1.5px solid var(--border-strong); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), opacity .2s var(--ease), background .25s var(--ease);
}
.cursor-ring.hover{width:52px; height:52px; border-color:var(--accent); background:rgba(79,140,255,0.08);}
body.has-custom-cursor{cursor:none;}
body.has-custom-cursor a, body.has-custom-cursor button{cursor:none;}
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{display:none !important;} }

/* ---- shine-sweep on primary buttons ---- */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn-primary:hover::before{left:130%;}

/* ---- magnetic button wrapper (JS sets --tx/--ty) ---- */
.magnetic{transform:translate(var(--tx,0), var(--ty,0)); transition:transform .25s var(--ease);}

/* ---- spotlight hover on cards / nodes (JS sets --mx/--my) ---- */
.card, .eco-node, .proj-card, .serv-card, .res-card{position:relative; isolation:isolate;}
.card::after, .eco-node::after{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; opacity:0; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(79,140,255,0.14), transparent 65%);
  transition:opacity .35s var(--ease);
}
.card:hover::after, .eco-node:hover::after{opacity:1;}

/* ---- 3D tilt (JS sets rotateX/rotateY via inline transform on .tilt) ---- */
.tilt{transform-style:preserve-3d; transition:transform .18s var(--ease), border-color var(--normal) var(--ease);}

/* ---- animated gradient text (hover-triggered shimmer) ---- */
.grad{
  background:var(--grad-primary); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;}}

/* ---- nav link animated underline sweep ---- */
.nav-links a{overflow:hidden;}
.nav-links a::before{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--grad-primary);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); border-radius:2px;
}
.nav-links a:hover::before{transform:scaleX(1);}
.nav-links a.active::after{display:none;}
.nav-links a.active::before{transform:scaleX(1);}

/* ---- icon hover rotate + color pop ---- */
.serv-card .s-icon, .about-list .ico, .eco-node .n-icon, .contact-direct .ic{
  transition:transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.serv-card:hover .s-icon{transform:rotate(-8deg) scale(1.1); background:var(--grad-primary); color:#fff; box-shadow:0 10px 24px -10px rgba(79,140,255,0.6);}
.about-list li:hover .ico{transform:scale(1.1) rotate(6deg); background:var(--grad-primary); color:#fff;}
.eco-node:hover .n-icon{transform:scale(1.12) rotate(-4deg); background:var(--grad-primary); color:#fff;}
.contact-direct a:hover .ic{transform:scale(1.1); background:var(--grad-primary); color:#fff; border-color:transparent;}

/* ---- proj/res card image-less zoom-in accent on hover ---- */
.proj-card{overflow:hidden;}
.proj-card::before{
  content:''; position:absolute; top:-40%; right:-30%; width:60%; height:80%; border-radius:50%;
  background:radial-gradient(circle, rgba(79,140,255,0.14), transparent 70%); opacity:0; transition:opacity .5s var(--ease), transform .6s var(--ease);
  transform:scale(0.7); pointer-events:none; z-index:-1;
}
.proj-card:hover::before{opacity:1; transform:scale(1);}

/* ---- badge hover pop ---- */
.badge{transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.eco-node:hover .badge-live, .eco-node:hover .badge-soon, .proj-card:hover .badge-live, .proj-card:hover .badge-building{
  transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(0,0,0,0.3);
}

/* ---- hero parallax layers (JS sets translateY via scroll) ---- */
.hero-bg .grid-lines, .hero-bg .glow{will-change:transform;}

/* ---- page load fade ---- */
body{opacity:0; animation:pageIn .6s var(--ease) forwards;}
@keyframes pageIn{to{opacity:1;}}

/* ---- eco-center node hover intensify ---- */
.eco-center .node{transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.eco-hub:hover .eco-center .node{transform:scale(1.05); box-shadow:0 0 0 10px rgba(79,140,255,0.1), 0 26px 60px -18px rgba(79,140,255,0.8);}

/* ---- portrait tilt-zoom (mouse-follow) ---- */
.about-portrait .frame{transition:transform .4s var(--ease);}

/* ---- form field focus glow ---- */
.field:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  box-shadow:0 0 0 4px rgba(79,140,255,0.15);
}

/* ---- link/CTA arrow micro-bounce loop on visible ---- */
.hero-links .btn-text{position:relative;}

@media (prefers-reduced-motion: reduce){
  .grad{animation:none;}
  body{animation:none; opacity:1;}
  .logo .mark::before{animation:none !important;}
}

/* ---- 404 ---- */
.page-404{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px 24px;}
.page-404 .code{font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(80px,14vw,160px); line-height:1; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}