/* =========================================================
   ABDUL MANAF — PORTFOLIO STYLESHEET (LIGHT THEME)
   Palette: Modern Clean Light Theme
   ========================================================= */

:root{
  /* Navy / Slate dark palette for text and headings */
  --navy-950:#0f172a;
  --navy-900:#1e293b;
  --navy-800:#334155;
  
  /* Primary brand blues - PRESERVED */
  --blue-700:#0B5FFF;
  --blue-600:#1E7BFF;
  --blue-500:#3AA0FF;
  --sky-400:#0284c7;
  --sky-300:#0369a1;
  --ice-200:#475569;
  --ice-100:#334155;
  --white:#ffffff;
  --cyan:#0284c7;
  --gold:#d97706;
  --ink:#0f172a;
  --ink-soft:#475569;

  /* Surfaces & Backgrounds */
  --bg-main:#ffffff;
  --bg-surface:#ffffff;
  --bg-alt:#f8fafc;
  --bg-card:#ffffff;

  --grad-main: linear-gradient(120deg, var(--blue-700), #0284c7);
  --grad-soft: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  --grad-card: linear-gradient(160deg, #ffffff, #f8fafc);

  --shadow-glow: 0 10px 30px rgba(11,95,255,0.12);
  --shadow-card: 0 10px 25px -5px rgba(15,23,42,0.06), 0 8px 10px -6px rgba(15,23,42,0.04);
  --shadow-header: 0 4px 20px rgba(0,0,0,0.05);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.22,1,.36,1);
  --speed: .45s;

  --header-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 14px); overflow-x:hidden; }
body{
  margin:0;
  font-family:'Manrope', 'Inter', sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(11,95,255,0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(2,132,199,0.05), transparent 55%),
    var(--bg-main);
  color: var(--navy-800);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

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

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:min(1220px, 92%); margin-inline:auto; }
section{ position:relative; padding: 96px 0; }
.section-tight{ padding: 64px 0; }

/* ---------- Shining animated titles ---------- */
.grad-title{
  font-family:'Space Grotesk','Manrope',sans-serif;
  font-weight:800;
  letter-spacing:.3px;
  background: linear-gradient(90deg, var(--navy-950), var(--blue-700), var(--blue-600), var(--navy-950));
  background-size: 300% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation: shine 5s linear infinite;
  text-shadow: none;
  position:relative;
  margin:0 0 14px;
}
@keyframes shine{ to{ background-position:300% center; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--blue-700);
  background:rgba(11,95,255,0.08);
  border:1px solid rgba(11,95,255,0.2);
  padding:7px 16px; border-radius:999px;
  margin-bottom:16px;
}
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--blue-600); box-shadow:0 0 8px var(--blue-600); }

.section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.section-head p{ color:var(--navy-800); font-size:1.02rem; }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--navy-950); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px; border-radius:999px; font-weight:800; font-size:.95rem;
  border:none; position:relative; overflow:hidden; isolation:isolate;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  will-change:transform;
}
.btn-primary{ background:var(--grad-main); color:#ffffff; box-shadow:0 10px 30px -8px rgba(11,95,255,.45); }
.btn-primary:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 18px 40px -10px rgba(11,95,255,.55); }
.btn-outline{ background:transparent; color:var(--navy-950); border:1.5px solid rgba(11,95,255,.35); }
.btn-outline:hover{ transform:translateY(-4px); border-color:var(--blue-700); background:rgba(11,95,255,0.04); box-shadow:0 6px 20px rgba(11,95,255,.15); }
.btn-ghost-sm{ padding:10px 20px; font-size:.82rem; }
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%);
}
.btn:hover::after{ opacity:1; transform:translateX(120%); transition: transform .8s var(--ease); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; width:100%; height:var(--header-h); z-index:1000;
  display:flex; align-items:center;
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom:1px solid #e2e8f0;
  box-shadow: var(--shadow-header);
  transition: background var(--speed) var(--ease);
  transform:none; animation:none; margin:0; max-width:100%;
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; width:min(1280px,94%); margin-inline:auto; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1.18rem; color:var(--navy-950); }
.brand-mark{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-main); color:#ffffff; font-weight:900; box-shadow:0 6px 18px -4px rgba(11,95,255,.4);
  animation: pulseGlow 3.2s ease-in-out infinite;
  overflow:hidden; flex:none; border:2px solid #ffffff;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 6px 18px -4px rgba(11,95,255,.4);} 50%{ box-shadow:0 6px 26px -2px rgba(11,95,255,.65);} }
.brand span{ background:var(--grad-main); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a.nav-link{
  padding:10px 16px; border-radius:999px; font-weight:700; font-size:.92rem; color:var(--navy-800);
  transition: color var(--speed), background var(--speed), transform var(--speed);
  position:relative;
}
.main-nav a.nav-link:hover, .main-nav a.nav-link.active{ color:var(--blue-700); background:rgba(11,95,255,0.08); transform:translateY(-2px); }

.has-dropdown{ position:relative; }
.dropdown-toggle{ display:flex; align-items:center; gap:6px; }
.dropdown-toggle .chev{ transition: transform var(--speed) var(--ease); font-size:.7rem; }
.has-dropdown:hover .dropdown-toggle .chev,
.has-dropdown.open .dropdown-toggle .chev{ transform:rotate(180deg); }

.mega-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px);
  width:min(880px, 86vw);
  background: #ffffff;
  border:1px solid #e2e8f0;
  border-radius:var(--radius-lg);
  box-shadow: 0 20px 40px -15px rgba(15,23,42,0.12), 0 0 20px rgba(11,95,255,0.05);
  padding:26px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  z-index:1200;
}
.has-dropdown:hover .mega-menu,
.has-dropdown.open .mega-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.mega-col h4{ margin:0 0 10px; font-size:.72rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--blue-700); }
.mega-col ul{ display:flex; flex-direction:column; gap:2px; }
.mega-col a{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; font-size:.87rem; font-weight:600; color:var(--navy-800);
  transition: background var(--speed), color var(--speed), padding-left var(--speed);
}
.mega-col a:hover{ background:rgba(11,95,255,.08); color:var(--blue-700); padding-left:14px; }
.mega-col a .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-600); flex:none; }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{
  display:none; width:46px; height:46px; border-radius:12px; background:rgba(11,95,255,.08);
  border:1px solid rgba(11,95,255,.2); flex-direction:column; align-items:center; justify-content:center; gap:5px;
  z-index:1600; position:relative; flex:none;
}
.burger span{ width:20px; height:2px; background:var(--navy-950); border-radius:2px; transition:.35s var(--ease); }
.burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Optional in-panel close button, if markup includes one (e.g. .nav-close) */
.nav-close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; background:rgba(11,95,255,.08); border:1px solid rgba(11,95,255,.2);
  color:var(--navy-950); z-index:1601;
}

/* Lock page scroll while the mobile menu is open (toggle this class on <body> via JS) */
body.nav-open{ overflow:hidden; height:100%; }

/* ---------- Hero (Home) ---------- */
.hero{
  min-height:100vh; display:flex; align-items:center; padding-top:var(--header-h);
  position:relative;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(700px 400px at 80% 20%, rgba(11,95,255,.06), transparent 60%);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.hero-eyebrow{ animation: floaty 4s ease-in-out infinite; }
.hero h1{
  font-family:'Space Grotesk',sans-serif; font-weight:800; line-height:1.05;
  font-size:clamp(2.3rem, 5.4vw, 4.1rem); margin:6px 0 8px; color:var(--navy-950);
}
.hero h1 .name-line{
  display:block; background:linear-gradient(90deg,var(--navy-950),var(--blue-700),var(--blue-600),var(--navy-950));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: shine 5s linear infinite;
}
.hero .role{
  font-size:clamp(1.05rem,2vw,1.4rem); font-weight:800; color:var(--blue-700);
  margin-bottom:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.role .cursor{ display:inline-block; width:3px; height:1.1em; background:var(--blue-600); animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero p.lead{ font-size:1.06rem; color:var(--navy-800); max-width:560px; margin-bottom:30px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px; }
.hero-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-stats div{ }
.hero-stats b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:800; color:var(--navy-950); }
.hero-stats span{ font-size:.8rem; color:var(--navy-800); letter-spacing:.5px; }

.hero-photo-wrap{ position:relative; display:flex; justify-content:center; }
.hero-photo-ring{
  position:relative; width:min(420px,88%); aspect-ratio:1/1.08; border-radius:34px;
  padding:8px;
  background:conic-gradient(from 0deg, var(--blue-700), var(--blue-500), var(--sky-400), var(--blue-700));
  animation: spin 8s linear infinite;
  box-shadow: var(--shadow-glow);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-photo-inner{
  width:100%; height:100%; border-radius:28px; overflow:hidden; background:#f1f5f9;
  animation: spinBack 8s linear infinite;
}
@keyframes spinBack{ to{ transform:rotate(-360deg); } }
.hero-photo-inner img{ width:100%; height:100%; object-fit:cover; }
.hero-badge{
  position:absolute; bottom:-18px; left:-18px; background:var(--white); color:var(--navy-950);
  padding:14px 18px; border-radius:16px; box-shadow:var(--shadow-card); border:1px solid #e2e8f0;
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:.85rem;
  animation: floaty 4s ease-in-out infinite;
}
.hero-badge .ico{ width:34px; height:34px; border-radius:10px; background:var(--grad-main); display:grid; place-items:center; color:#fff; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* ---------- Generic reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ---------- Cards general ---------- */
.card{
  background:var(--bg-card);
  border:1px solid #e2e8f0;
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow: var(--shadow-card);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed);
}
.card:hover{ transform:translateY(-8px); box-shadow:0 20px 35px -10px rgba(15,23,42,0.1), var(--shadow-glow); border-color:var(--blue-500); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; }
.about-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid #e2e8f0; box-shadow:var(--shadow-card); }
.about-photo img{ width:100%; }
.about-text h2{ margin-top:0; color:var(--navy-950); }
.about-text p{ color:var(--navy-800); margin-bottom:16px; }
.about-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px; }
.hl-item{ display:flex; gap:12px; align-items:flex-start; }
.hl-item .ico{ flex:none; width:42px; height:42px; border-radius:12px; background:rgba(11,95,255,.08); border:1px solid rgba(11,95,255,.2); display:grid; place-items:center; color:var(--blue-700); font-weight:800; }
.hl-item h5{ margin:0 0 4px; font-size:.95rem; color:var(--navy-950); }
.hl-item p{ margin:0; font-size:.85rem; color:var(--navy-800); opacity:1; }

/* ---------- Services grid (index overview) ---------- */
.tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:44px; flex-wrap:wrap; }
.tab-btn{
  padding:11px 22px; border-radius:999px; font-weight:800; font-size:.85rem;
  background:rgba(11,95,255,.06); border:1px solid #e2e8f0; color:var(--navy-800);
  transition: all var(--speed) var(--ease);
}
.tab-btn.active, .tab-btn:hover{ background:var(--grad-main); color:#ffffff; transform:translateY(-2px); box-shadow: 0 6px 20px -4px rgba(11,95,255,.4); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.svc-card{ display:flex; flex-direction:column; height:100%; background:var(--bg-card); border:1px solid #e2e8f0; border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed); }
.svc-card:hover{ transform:translateY(-8px); box-shadow:0 20px 35px -10px rgba(15,23,42,0.1), var(--shadow-glow); border-color:var(--blue-500); }
.svc-card .ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem;
  background:var(--grad-main); color:#ffffff; margin-bottom:18px; box-shadow:0 8px 20px -6px rgba(11,95,255,.4);
}
.svc-card h3{ font-size:1.12rem; margin:0 0 8px; color:var(--navy-950); }
.svc-card p{ font-size:.88rem; color:var(--navy-800); opacity:1; margin-bottom:20px; flex:1; }
.svc-card .row-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.svc-card a.explore{ font-weight:800; font-size:.85rem; color:var(--blue-700); display:inline-flex; align-items:center; gap:6px; }
.svc-card a.explore:hover{ gap:10px; color:var(--blue-600); }
.svc-card .demo-mini{
  font-size:.72rem; font-weight:800; padding:7px 12px; border-radius:999px; border:1px solid rgba(11,95,255,.3); color:var(--blue-700); background:rgba(11,95,255,0.04);
}
.svc-card .demo-mini:hover{ background:var(--blue-700); color:#ffffff; border-color:var(--blue-700); }

/* ---------- Process (5 steps, centered) ---------- */
.process-wrap{ max-width:900px; margin:0 auto; position:relative; }
.process-wrap::before{
  content:''; position:absolute; left:29px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--blue-700), var(--sky-400)); opacity:.3;
}
.p-step{ display:flex; gap:24px; padding:22px 0; position:relative; }
.p-step .num{
  flex:none; width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:#ffffff; border:2px solid var(--blue-600); color:var(--blue-700);
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1.2rem; z-index:1; box-shadow:var(--shadow-card);
  transition: all var(--speed) var(--ease);
}
.p-step:hover .num{ background:var(--grad-main); color:#ffffff; box-shadow:var(--shadow-glow); transform:scale(1.08); }
.p-step .txt h4{ margin:6px 0 8px; font-size:1.12rem; color:var(--navy-950); }
.p-step .txt p{ margin:0; color:var(--navy-800); opacity:1; font-size:.92rem; }

/* ---------- Core values interactive ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card{
  padding:26px 20px; text-align:center; border-radius:var(--radius-lg);
  background:var(--bg-card); border:1px solid #e2e8f0; box-shadow:var(--shadow-card);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed);
  cursor:pointer; perspective:800px;
}
.value-card .ico{
  width:60px; height:60px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center;
  background:rgba(11,95,255,.08); border:1px solid rgba(11,95,255,.2); font-size:1.6rem; color:var(--blue-700);
  transition: transform var(--speed) var(--ease), background var(--speed);
}
.value-card:hover{ transform:translateY(-10px) rotateX(4deg); box-shadow:0 20px 35px -10px rgba(15,23,42,0.1), var(--shadow-glow); border-color:var(--blue-500); }
.value-card:hover .ico{ transform:rotateY(360deg); background:var(--grad-main); color:#ffffff; }
.value-card h4{ margin:0 0 8px; font-size:1rem; color:var(--navy-950); }
.value-card p{ margin:0; font-size:.82rem; color:var(--navy-800); opacity:1; }

/* ---------- Stats / "stargates" ---------- */
.stargates{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.gate{
  position:relative; text-align:center; padding:38px 18px; border-radius:var(--radius-lg);
  background:radial-gradient(circle at 50% 0%, rgba(11,95,255,.08), transparent 65%), #ffffff;
  border:1px solid #e2e8f0; box-shadow:var(--shadow-card); overflow:hidden;
}
.gate::before{
  content:''; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent, rgba(11,95,255,.15), transparent 40%);
  animation: spin 6s linear infinite;
}
.gate .inner{ position:relative; z-index:1; }
.gate b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:2.4rem; font-weight:800; color:var(--navy-950); }
.gate span{ font-size:.82rem; letter-spacing:.5px; color:var(--blue-700); font-weight:700; }

/* ---------- Portfolio ---------- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.p-card{ border-radius:var(--radius-lg); overflow:hidden; position:relative; background:#ffffff; border:1px solid #e2e8f0; box-shadow:var(--shadow-card); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.p-card:hover{ transform:translateY(-8px); box-shadow:0 20px 35px -10px rgba(15,23,42,0.1), var(--shadow-glow); }
.p-card .thumb{
  height:190px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#ffffff; font-weight:800;
  background:var(--grad-main); position:relative; overflow:hidden;
}
.p-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-card .thumb::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 40%, transparent 60%);
  transform:translateX(-100%); transition: transform .8s var(--ease);
}
.p-card:hover .thumb::after{ transform:translateX(100%); }
.p-card .body{ padding:22px; }
.p-card .tech-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.p-card .tech-tag{
  font-size:.66rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; color:#ffffff; line-height:1;
  box-shadow:0 6px 14px -5px rgba(15,23,42,.35);
}
.tech-tag.html{ background:#E34C26; }
.tech-tag.css{ background:#264DE4; }
.tech-tag.js{ background:#F0DB4F; color:#1a1a1a; }
.tech-tag.python{ background:#3776AB; }
.tech-tag.django{ background:#0C4B33; }
.tech-tag.sql{ background:#00758F; }
.tech-tag.flutter{ background:#02569B; }
.tech-tag.dart{ background:#0175C2; }
.tech-tag.firebase{ background:#FFA000; color:#1a1a1a; }
.p-card h3{ margin:8px 0 10px; font-size:1.12rem; color:var(--navy-950); }
.p-card p{ font-size:.86rem; color:var(--navy-800); opacity:1; margin-bottom:18px; }
.p-card .actions{ display:flex; gap:10px; }

/* interactive consent / feedback strip */
.consent-strip{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--radius-lg);
  padding:28px 32px; margin-top:50px; box-shadow:var(--shadow-card);
}
.consent-strip p{ margin:0; max-width:560px; color:var(--navy-800); }
.consent-toggle{ display:flex; align-items:center; gap:14px; }
.switch{ width:56px; height:30px; border-radius:999px; background:#e2e8f0; position:relative; border:1px solid #cbd5e1; transition: background var(--speed); }
.switch::after{ content:''; position:absolute; width:24px; height:24px; border-radius:50%; background:var(--white); top:2px; left:2px; transition: transform var(--speed) var(--ease); box-shadow:0 3px 8px rgba(0,0,0,.15); }
.switch.on{ background:var(--grad-main); }
.switch.on::after{ transform:translateX(26px); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--navy-950);
  padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-weight:800; font-size:.98rem;
}
.faq-q .plus{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid rgba(11,95,255,.3); display:grid; place-items:center; transition:transform var(--speed) var(--ease); color:var(--blue-700); }
.faq-item.open .faq-q .plus{ transform:rotate(135deg); background:var(--blue-700); color:#ffffff; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height var(--speed) var(--ease); }
.faq-a p{ padding:0 24px 20px; margin:0; color:var(--navy-800); opacity:1; font-size:.9rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; }
.contact-info-card{ background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--radius-lg); padding:32px; height:fit-content; box-shadow:var(--shadow-card); }
.contact-info-card h3{ margin-top:0; color:var(--navy-950); }
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.info-row .ico{ flex:none; width:42px; height:42px; border-radius:12px; background:rgba(11,95,255,.08); border:1px solid rgba(11,95,255,.2); display:grid; place-items:center; color:var(--blue-700); }
.info-row b{ display:block; font-size:.9rem; color:var(--navy-950); }
.info-row span{ font-size:.85rem; color:var(--navy-800); opacity:1; }
.socials-row{ display:flex; gap:10px; margin-top:22px; }
.socials-row a{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(11,95,255,.08);
  border:1px solid rgba(11,95,255,.2); color:var(--blue-700); transition: all var(--speed) var(--ease);
}
.socials-row a:hover{ background:var(--grad-main); color:#ffffff; transform:translateY(-4px); }

.form-card{ background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-card); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.82rem; font-weight:800; color:var(--blue-700); }
.field input, .field textarea, .field select{
  background:#f8fafc; border:1px solid #cbd5e1; border-radius:10px;
  padding:13px 15px; color:var(--navy-950); font-family:inherit; font-size:.92rem;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--blue-600); box-shadow:0 0 0 4px rgba(11,95,255,.12);
}
.field textarea{ resize:vertical; min-height:120px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; }
.form-msg{ margin-top:14px; font-size:.88rem; font-weight:700; display:none; padding:12px 16px; border-radius:10px; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:rgba(11,95,255,.1); color:var(--blue-700); border:1px solid rgba(11,95,255,.3); }
.form-msg.err{ background:rgba(220,38,38,.08); color:#dc2626; border:1px solid rgba(220,38,38,.3); }

/* ---------- Subpages (services / solutions / saas / portfolio detail) ---------- */
.sub-hero{
  padding: calc(var(--header-h) + 70px) 0 70px; text-align:center; position:relative;
}
.sub-hero .eyebrow{ margin-inline:auto; }
.sub-hero h1{ font-size:clamp(2rem,4.6vw,3.1rem); color:var(--navy-950); }
.sub-hero p{ max-width:720px; margin:0 auto; color:var(--navy-800); font-size:1.02rem; }
.sub-hero .actions{ display:flex; justify-content:center; gap:16px; margin-top:26px; flex-wrap:wrap; }
.breadcrumb{ display:flex; gap:8px; justify-content:center; font-size:.8rem; color:var(--blue-700); margin-bottom:20px; opacity:1; font-weight:700; }
.breadcrumb span{ opacity:.5; color:var(--navy-800); }

.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card{ text-align:left; background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-card); }
.feature-card .idx{ font-family:'Space Grotesk',sans-serif; font-weight:800; color:var(--blue-700); opacity:.7; font-size:1.6rem; margin-bottom:8px; display:block; }
.feature-card h4{ color:var(--navy-950); margin:0 0 8px; }
.feature-card p{ color:var(--navy-800); margin:0; font-size:.88rem; }

.related-strip{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.related-strip a{
  flex:none; padding:10px 18px; border-radius:999px; background:rgba(11,95,255,.06); border:1px solid #e2e8f0; color:var(--navy-800);
  font-size:.83rem; font-weight:700; transition: all var(--speed);
}
.related-strip a:hover{ background:var(--grad-main); color:#ffffff; }

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(180deg, #ffffff, #f8fafc); border-top:1px solid #e2e8f0; padding:70px 0 26px; margin-top:80px;
  font-family:'Space Grotesk','Manrope',sans-serif;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:46px; }
.footer-brand p{ color:var(--navy-800); opacity:1; font-size:.88rem; font-weight:700; margin:14px 0 20px; }
.footer-col h4{ font-size:.85rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue-700); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.88rem; font-weight:700; color:var(--navy-800); opacity:1; transition: all var(--speed); }
.footer-col a:hover{ opacity:1; color:var(--blue-700); padding-left:5px; }
.footer-col li{ font-size:.88rem; font-weight:700; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; border-top:1px solid #e2e8f0; padding-top:24px; font-size:.82rem; font-weight:700; color:var(--navy-800); opacity:1; }
.footer-socials{ display:flex; gap:10px; }
.footer-socials a{ width:38px; height:38px; border-radius:10px; background:rgba(11,95,255,.08); border:1px solid rgba(11,95,255,.2); color:var(--blue-700); display:grid; place-items:center; transition: all var(--speed); }
.footer-socials a:hover{ background:var(--grad-main); color:#ffffff; transform:translateY(-4px); }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float, .floating-whatsapp{
  position:fixed; right:22px; bottom:26px; z-index:1400;
  width:60px; height:60px; border-radius:50%; background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.5);
  animation: floaty 3s ease-in-out infinite;
  transition: transform var(--speed) var(--ease);
}
.whatsapp-float:hover, .floating-whatsapp:hover{ transform:scale(1.12); }
.whatsapp-float svg, .floating-whatsapp svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Scroll top ---------- */
.to-top{
  position:fixed; right:22px; bottom:100px; z-index:1400; width:46px; height:46px; border-radius:50%;
  background:#ffffff; border:1px solid #cbd5e1; color:var(--blue-700); box-shadow:var(--shadow-card);
  display:grid; place-items:center; opacity:0; pointer-events:none; transition: all var(--speed) var(--ease);
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ background:var(--grad-main); color:#ffffff; border-color:transparent; }

/* ---------- Progress bar ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; background:var(--grad-main); z-index:1500; width:0%; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stargates{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:992px){
  /* Full-screen slide-in mobile nav panel. Covers both possible markup
     patterns (.main-nav as the panel, or a .nav-links wrapper inside it)
     so the panel can never collapse down to its content size. */
  .main-nav{
    position:fixed; inset:0; left:0; right:0;
    width:100%; height:100vh; height:100dvh;
    margin:0; max-width:100%;
    background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
    display:flex; flex-direction:column; align-items:stretch;
    padding:calc(var(--header-h) + 10px) 26px 26px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed);
    z-index:1500;
    visibility:hidden; pointer-events:none;
  }
  .main-nav.open{
    transform:translateX(0);
    visibility:visible; pointer-events:auto;
    transition: transform var(--speed) var(--ease), visibility 0s linear;
  }
  .main-nav > ul,
  .main-nav ul,
  .nav-links{
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; justify-content:flex-start !important;
    gap:6px; width:100%; height:auto; margin:0; padding:0;
  }
  .main-nav ul li{ width:100%; }
  .main-nav a.nav-link{ padding:16px 18px; font-size:1.02rem; color:var(--navy-950); width:100%; }
  .mega-menu{ position:static; transform:none; width:100%; grid-template-columns:1fr; opacity:1; visibility:visible; pointer-events:auto; display:none; box-shadow:none; margin-top:8px; border:1px solid #e2e8f0; left:auto; top:auto; }
  .has-dropdown.open .mega-menu{ display:grid; transform:none; }
  .burger{ display:flex; }
  .nav-cta .btn{ display:none; }

  .hero-grid, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-grid{ }
  .about-photo{ order:-1; max-width:340px; margin-inline:auto; }
  .hero-photo-wrap{ order:-1; margin-bottom:20px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  section{ padding:64px 0; }
  .grid-3, .grid-4, .portfolio-grid, .stargates, .values-grid, .feature-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:20px; }
  .p-step{ gap:16px; }
  .p-step .num{ width:48px; height:48px; font-size:1rem; }
  .whatsapp-float{ width:52px; height:52px; right:14px; bottom:16px; }
  .to-top{ right:14px; bottom:80px; width:40px; height:40px; }
  .consent-strip{ flex-direction:column; align-items:flex-start; }
}

/* Fully stop decorative movement on mobile — burger, WhatsApp icon and
   the back-to-top button stay perfectly still, no bounce, no drift. */
@media (max-width:992px){
  .whatsapp-float, .floating-whatsapp, .to-top, .burger{
    animation:none !important;
  }
}

/* =========================================================
   PERFORMANCE: light GPU hints on animated/fixed elements only
   (kept scoped instead of a blanket * rule, which can break
   3D transforms, sticky positioning and tooltips elsewhere)
   ========================================================= */
.whatsapp-float, .floating-whatsapp, .to-top, .burger span{
  backface-visibility:hidden;
  will-change:transform;
}
html, body{ text-rendering:optimizeLegibility; }