/* ============================================================
   MD SAKIB — PREMIUM PORTFOLIO
   Design system: glassmorphism + aurora, dark-first
   ============================================================ */

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

:root{
  --primary:#4F46E5;
  --secondary:#06B6D4;
  --accent:#8B5CF6;
  --bg:#050816;
  --bg-soft:#0A0F24;
  --glass:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.14);
  --text:#ffffff;
  --muted:#94A3B8;
  --success:#22C55E;
  --error:#EF4444;

  --grad-primary: linear-gradient(135deg,var(--primary),var(--accent) 55%,var(--secondary));
  --grad-text: linear-gradient(120deg,#fff 20%,#B4C6FF 50%,#8B5CF6 80%);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px -20px rgba(79,70,229,.45);

  --ease: cubic-bezier(.19,1,.22,1);
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container: 1220px;
}

html[data-theme="light"]{
  --bg:#F5F6FB;
  --bg-soft:#ECEEF7;
  --glass:rgba(20,20,40,.045);
  --glass-border:rgba(20,20,40,.09);
  --text:#0B1023;
  --muted:#5B6478;
  --shadow-soft: 0 20px 60px -20px rgba(30,30,60,.18);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

::selection{background:var(--accent);color:#fff;}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-.02em;
}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ============================================================
   BACKGROUND — Aurora + Grid
   ============================================================ */
.aurora-bg{
  position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
}
.aurora-bg::before{
  content:"";
  position:absolute;inset:-20%;
  background:
    radial-gradient(40% 35% at 20% 20%, rgba(79,70,229,.35), transparent 70%),
    radial-gradient(35% 30% at 80% 15%, rgba(6,182,212,.28), transparent 70%),
    radial-gradient(45% 40% at 60% 80%, rgba(139,92,246,.28), transparent 70%);
  filter:blur(60px);
  animation:auroraShift 22s ease-in-out infinite alternate;
}
html[data-theme="light"] .aurora-bg::before{opacity:.5;}
@keyframes auroraShift{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(2%,-3%,0) rotate(8deg);}
  100%{transform:translate3d(-3%,2%,0) rotate(-6deg);}
}
.grid-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(60% 60% at 50% 20%, #000 40%, transparent 100%);
}
html[data-theme="light"] .grid-bg{
  background-image:
    linear-gradient(rgba(10,10,30,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,30,.05) 1px, transparent 1px);
}

/* ============================================================
   GLASS CARD / SURFACE
   ============================================================ */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-radius:var(--radius-md);
}
.glass-card{
  padding:32px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position:relative;
}
.glass-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow);
  border-color:rgba(255,255,255,.28);
}
.glow-border{position:relative;isolation:isolate;}
.glow-border::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--angle,0deg), var(--primary), var(--secondary), var(--accent), var(--primary));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
  animation:rotateBorder 6s linear infinite;
}
.glow-border:hover::before{opacity:1;}
@keyframes rotateBorder{to{--angle:360deg;}}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--radius-full);
  font-weight:600;font-size:.95rem;border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-primary);color:#fff;
  box-shadow:0 10px 30px -8px rgba(79,70,229,.6);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 40px -8px rgba(79,70,229,.8);}
.btn-ghost{
  background:var(--glass);border:1px solid var(--glass-border);color:var(--text);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px);}
.btn-sm{padding:10px 18px;font-size:.85rem;}
.btn-block{width:100%;}

/* magnetic wrapper */
.magnetic{display:inline-block;}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:16px 0;
  transition:padding .3s var(--ease), background .3s var(--ease);
}
.navbar.scrolled{padding:10px 0;}
.navbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px 10px 24px;
  border-radius:var(--radius-full);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.logo{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  display:flex;align-items:center;gap:8px;
}
.logo-mark{
  width:34px;height:34px;border-radius:10px;
  background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:800;color:#fff;
  box-shadow:0 6px 18px -4px rgba(79,70,229,.7);
}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  padding:9px 14px;border-radius:var(--radius-full);font-size:.88rem;font-weight:500;color:var(--muted);
  transition:color .25s, background .25s;
}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.06);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.theme-toggle{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-border);
  background:var(--glass);display:flex;align-items:center;justify-content:center;
  color:var(--text); position:relative;
}
.theme-toggle svg{width:17px;height:17px;}
.icon-sun{display:none;}
html[data-theme="light"] .icon-moon{display:none;}
html[data-theme="light"] .icon-sun{display:block;}

.nav-toggle{
  display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-border);
  background:var(--glass);align-items:center;justify-content:center;color:var(--text);
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative;
  transition:transform .3s var(--ease);
}
.nav-toggle span::before{position:absolute;top:-5px;}
.nav-toggle span::after{position:absolute;top:5px;}

.mobile-menu{
  position:fixed;inset:0;z-index:1100;
  background:rgba(5,8,22,.92);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.mobile-menu a{font-family:var(--font-display);font-size:1.6rem;font-weight:700;padding:12px 0;color:var(--text);}
.mobile-menu .close-menu{position:absolute;top:26px;right:26px;width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;}

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

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:160px 0 100px;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);
  background:var(--glass);border:1px solid var(--glass-border);font-size:.8rem;color:var(--muted);margin-bottom:24px;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);margin-bottom:22px;}
.hero h1 .grad{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.typing-wrap{font-family:var(--font-mono);font-size:clamp(1rem,2vw,1.3rem);color:var(--secondary);min-height:1.6em;margin-bottom:22px;}
.typing-cursor{display:inline-block;width:2px;background:var(--secondary);margin-left:2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
.hero p.lead{font-size:1.1rem;color:var(--muted);max-width:52ch;margin-bottom:36px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px;}
.hero-socials{display:flex;gap:12px;}
.social-icon{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-border);transition:.3s var(--ease);
}
.social-icon:hover{transform:translateY(-4px);border-color:var(--secondary);color:var(--secondary);}
.social-icon svg{width:18px;height:18px;}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px;}
.stat{padding:18px 10px;text-align:center;}
.stat .num{font-family:var(--font-display);font-size:1.8rem;font-weight:800;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .label{font-size:.75rem;color:var(--muted);margin-top:4px;}

/* Hero visual: design/code morph card */
.hero-visual{position:relative;height:520px;}
.float-shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.6;animation:float 8s ease-in-out infinite;}
.float-shape.s1{width:120px;height:120px;background:radial-gradient(circle at 30% 30%,var(--primary),transparent 70%);top:0;left:0;}
.float-shape.s2{width:90px;height:90px;background:radial-gradient(circle at 30% 30%,var(--secondary),transparent 70%);bottom:40px;right:10px;animation-delay:1.5s;}
.float-shape.s3{width:60px;height:60px;background:radial-gradient(circle at 30% 30%,var(--accent),transparent 70%);top:40%;right:30px;animation-delay:3s;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-22px) translateX(10px);}}

.morph-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;max-width:420px;height:460px;border-radius:var(--radius-lg);
  padding:22px;overflow:hidden;
}
.morph-tabs{display:flex;gap:8px;margin-bottom:16px;}
.morph-tab{padding:7px 14px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid transparent;}
.morph-tab.active{background:var(--grad-primary);color:#fff;}
.morph-face{display:none;}
.morph-face.active{display:block;animation:fadeUp .5s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.layer-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);margin-bottom:8px;font-size:.8rem;}
.layer-row .swatch{width:16px;height:16px;border-radius:5px;flex-shrink:0;}
.layer-row span.name{flex:1;color:var(--text);}
.layer-row span.type{color:var(--muted);font-size:.7rem;}

.code-line{font-family:var(--font-mono);font-size:.78rem;line-height:1.9;white-space:pre;color:var(--muted);}
.code-line .kw{color:#8B5CF6;} .code-line .fn{color:#06B6D4;} .code-line .str{color:#22C55E;} .code-line .tag{color:#F472B6;}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:380px;margin-top:20px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section{padding:120px 0;position:relative;}
.section-tight{padding:80px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--secondary);margin-bottom:16px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--secondary);border-radius:2px;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);}
.section-head p{color:var(--muted);font-size:1.05rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ============================================================
   GRIDS
   ============================================================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ============================================================
   SKILLS
   ============================================================ */
.skill-cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.skill-cat-tab{padding:10px 20px;border-radius:var(--radius-full);background:var(--glass);border:1px solid var(--glass-border);font-size:.85rem;font-weight:600;color:var(--muted);}
.skill-cat-tab.active{color:#fff;background:var(--grad-primary);border-color:transparent;}
.skill-group{display:none;}
.skill-group.active{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px;}
@media (max-width:700px){.skill-group.active{grid-template-columns:1fr;}}
.skill-item{}
.skill-item-top{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:8px;}
.skill-item-top .pct{color:var(--secondary);font-weight:700;}
.bar{height:8px;border-radius:var(--radius-full);background:rgba(255,255,255,.07);overflow:hidden;}
.bar-fill{height:100%;border-radius:var(--radius-full);background:var(--grad-primary);width:0%;transition:width 1.4s var(--ease);}

/* ============================================================
   SERVICES
   ============================================================ */
.service-card{display:flex;flex-direction:column;height:100%;}
.service-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(79,70,229,.25),rgba(6,182,212,.25));margin-bottom:20px;
}
.service-icon svg{width:24px;height:24px;color:var(--icon-color, var(--secondary));}
.service-card h3{font-size:1.2rem;margin-bottom:8px;}
.service-card p.desc{color:var(--muted);font-size:.92rem;margin-bottom:16px;}
.service-features{margin-bottom:20px;}
.service-features li{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin-bottom:8px;}
.service-features svg{width:15px;height:15px;color:var(--success);flex-shrink:0;margin-top:2px;}
.service-price{font-family:var(--font-display);font-weight:800;font-size:1.1rem;margin-bottom:18px;margin-top:auto;}
.service-price span{font-size:.75rem;color:var(--muted);font-weight:500;}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.filter-btn{padding:9px 18px;border-radius:var(--radius-full);background:var(--glass);border:1px solid var(--glass-border);font-size:.83rem;font-weight:600;color:var(--muted);}
.filter-btn.active{background:var(--grad-primary);color:#fff;border-color:transparent;}
.project-card{overflow:hidden;padding:0;}
.project-thumb{
  height:230px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.project-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,8,22,.8));}
.project-thumb .mono{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:rgba(255,255,255,.5);z-index:1;}
.project-body{padding:24px;}
.project-tag{font-size:.72rem;color:var(--secondary);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.project-card h3{font-size:1.15rem;margin:8px 0;}
.project-card p{color:var(--muted);font-size:.88rem;}
.project-stack{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;}
.chip{padding:5px 11px;border-radius:var(--radius-full);background:rgba(255,255,255,.06);font-size:.72rem;color:var(--muted);}
.project-link{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--secondary);margin-top:6px;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;}
.testi-track::-webkit-scrollbar{height:6px;}
.testi-track::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:10px;}
.testi-card{min-width:340px;scroll-snap-align:start;}
.stars{color:#FBBF24;font-size:.9rem;margin-bottom:12px;letter-spacing:2px;}
.testi-card p.quote{font-size:.95rem;color:var(--text);margin-bottom:20px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.avatar{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;color:#fff;font-size:.9rem;flex-shrink:0;
}
.testi-person .who b{display:block;font-size:.9rem;}
.testi-person .who span{font-size:.78rem;color:var(--muted);}

/* client logos marquee */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 28s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-track span{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--muted);opacity:.6;white-space:nowrap;}

/* ============================================================
   TIMELINE (experience / education)
   ============================================================ */
.timeline{position:relative;padding-left:32px;border-left:1px solid var(--glass-border);}
.timeline-item{position:relative;padding-bottom:44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:-38px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--grad-primary);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--glass-border);
}
.timeline-date{font-size:.78rem;color:var(--secondary);font-weight:700;margin-bottom:6px;}
.timeline-item h3{font-size:1.1rem;margin-bottom:4px;}
.timeline-item .org{color:var(--muted);font-size:.9rem;margin-bottom:10px;}
.timeline-item ul{color:var(--muted);font-size:.88rem;}
.timeline-item ul li{position:relative;padding-left:16px;margin-bottom:6px;}
.timeline-item ul li::before{content:"—";position:absolute;left:0;color:var(--secondary);}

/* ============================================================
   PRICING
   ============================================================ */
.price-card{text-align:center;position:relative;}
.price-card.featured{border-color:var(--primary);transform:scale(1.04);}
.price-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:6px 16px;border-radius:var(--radius-full);background:var(--grad-primary);font-size:.72rem;font-weight:700;color:#fff;}
.price-card h3{font-size:1.1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;}
.price-amt{font-family:var(--font-display);font-size:2.6rem;font-weight:800;margin:12px 0;}
.price-amt span{font-size:.9rem;color:var(--muted);font-weight:500;}
.price-list{text-align:left;margin:28px 0;}
.price-list li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin-bottom:12px;}
.price-list svg{width:16px;height:16px;color:var(--success);flex-shrink:0;margin-top:2px;}

/* ============================================================
   PROCESS
   ============================================================ */
.process-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){.process-track{grid-template-columns:repeat(2,1fr);}}
.process-step{text-align:center;position:relative;}
.process-num{font-family:var(--font-display);font-size:2.6rem;font-weight:800;opacity:.15;margin-bottom:-30px;}
.process-step h3{font-size:1rem;}
.process-step p{font-size:.85rem;color:var(--muted);}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.accordion-item{margin-bottom:14px;overflow:hidden;}
.accordion-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;cursor:pointer;}
.accordion-head h3{font-size:1rem;margin:0;font-family:var(--font-body);font-weight:600;}
.accordion-icon{width:22px;height:22px;flex-shrink:0;position:relative;}
.accordion-icon::before,.accordion-icon::after{content:"";position:absolute;background:var(--text);top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s var(--ease);}
.accordion-icon::before{width:14px;height:2px;}
.accordion-icon::after{width:2px;height:14px;}
.accordion-item.open .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.accordion-body-inner{padding:0 26px 24px;color:var(--muted);font-size:.92rem;}

/* ============================================================
   FORMS
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.85rem;font-weight:600;color:var(--text);}
.field label .req{color:var(--error);}
.field input,.field select,.field textarea{
  padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);color:var(--text);font-size:.92rem;
  transition:border-color .3s,background .3s;
}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:rgba(20,20,40,.03);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--secondary);background:rgba(255,255,255,.08);}
/* Native <option> popups are rendered by the OS/browser with a light background
   regardless of page theme, so force dark, readable text on every option to
   avoid white-on-white / invisible text in the dropdown list. */
.field select{color:var(--text);}
.field select option{color:#0B1023;background:#ffffff;}
.field textarea{resize:vertical;min-height:120px;}
.field small{color:var(--muted);font-size:.75rem;}
.field.error input,.field.error textarea{border-color:var(--error);}
.field-error-msg{color:var(--error);font-size:.78rem;display:none;}
.field.error .field-error-msg{display:block;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--muted);margin-bottom:20px;}
.checkbox-row input{margin-top:3px;}
.file-drop{
  border:1.5px dashed var(--glass-border);border-radius:14px;padding:28px;text-align:center;color:var(--muted);
  font-size:.85rem;cursor:pointer;transition:border-color .3s;
}
.file-drop:hover,.file-drop.drag{border-color:var(--secondary);color:var(--secondary);}
.file-drop input{display:none;}

.form-status{margin-top:18px;padding:14px 18px;border-radius:12px;font-size:.9rem;display:none;}
.form-status.show{display:block;}
.form-status.success{background:rgba(34,197,94,.12);color:var(--success);border:1px solid rgba(34,197,94,.3);}
.form-status.error{background:rgba(239,68,68,.12);color:var(--error);border:1px solid rgba(239,68,68,.3);}

/* ============================================================
   CONTACT INFO / MAP
   ============================================================ */
.contact-info-card{display:flex;gap:16px;align-items:flex-start;padding:20px;}
.contact-info-card .ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,rgba(79,70,229,.25),rgba(6,182,212,.25));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-info-card .ic svg{width:19px;height:19px;color:var(--secondary);}
.map-embed{border-radius:var(--radius-md);overflow:hidden;height:280px;border:1px solid var(--glass-border);}

/* ============================================================
   BLOG
   ============================================================ */
.blog-card .project-thumb{height:190px;}
.blog-meta{display:flex;gap:14px;font-size:.78rem;color:var(--muted);margin-bottom:10px;}
.newsletter-box{padding:48px;text-align:center;}
.newsletter-form{display:flex;gap:10px;max-width:440px;margin:24px auto 0;}
.newsletter-form input{flex:1;padding:13px 18px;border-radius:var(--radius-full);border:1px solid var(--glass-border);background:rgba(255,255,255,.05);color:var(--text);}
@media (max-width:520px){.newsletter-form{flex-direction:column;}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:80px 0 30px;position:relative;border-top:1px solid var(--glass-border);margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{font-size:.9rem;margin-bottom:18px;}
.footer-grid ul li{margin-bottom:12px;}
.footer-grid ul li a{color:var(--muted);font-size:.88rem;transition:color .25s;}
.footer-grid ul li a:hover{color:var(--secondary);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--muted);padding-top:30px;border-top:1px solid var(--glass-border);}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.back-to-top{
  position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:900;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.4s var(--ease);
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}

.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--grad-primary);z-index:1200;width:0%;}

.page-hero{padding:150px 0 70px;text-align:center;}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);}
.page-hero p{color:var(--muted);max-width:60ch;margin:0 auto;}

.breadcrumb{display:flex;gap:8px;justify-content:center;font-size:.85rem;color:var(--muted);margin-bottom:18px;}
.breadcrumb a{color:var(--secondary);}

.cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--secondary);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;
  mix-blend-mode:difference;
}
.cursor-ring{
  position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--secondary);
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .25s;
  opacity:.6;
}
@media (max-width:900px){.cursor-dot,.cursor-ring{display:none;}}

.loader-screen{
  position:fixed;inset:0;background:var(--bg);z-index:99999;display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s var(--ease);
}
.loader-screen.hide{opacity:0;visibility:hidden;}
.loader-mark{width:56px;height:56px;border-radius:16px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:#fff;animation:loaderPulse 1.1s ease-in-out infinite;}
@keyframes loaderPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

.cta-band{padding:80px;text-align:center;position:relative;overflow:hidden;}
.cta-band h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.cta-band p{color:var(--muted);max-width:52ch;margin:0 auto 32px;}
@media (max-width:700px){.cta-band{padding:50px 24px;}}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);padding:14px 22px;border-radius:14px;z-index:2000;opacity:0;pointer-events:none;transition:.4s var(--ease);font-size:.88rem;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:700px){
  .section{padding:80px 0;}
  .navbar-inner{padding:8px 8px 8px 16px;}
}