/* =========================================================
   MunawarTech — Company Site
   Corporate premium aesthetic · deep slate + teal/cyan
   ========================================================= */

:root{
  --bg:        #060b12;
  --bg-2:      #0a121c;
  --surface:   rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.055);
  --border:    rgba(148,178,214,0.12);
  --border-2:  rgba(148,178,214,0.24);
  --text:      #eef4fb;
  --muted:     #9db0c6;
  --muted-2:   #64748b;

  --cyan:      #38bdf8;
  --teal:      #22d3b8;
  --sky:       #0ea5e9;
  --amber:     #fbbf24;
  --grad:      linear-gradient(120deg,#38bdf8 0%,#22d3b8 55%,#0ea5e9 100%);

  --font-head: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1180px;
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
code{ font-family:var(--font-mono); font-size:.86em; color:#a5f3ec; background:rgba(34,211,184,.1); padding:.05em .35em; border-radius:5px; }
::selection{ background:rgba(56,189,248,.32); color:#fff; }

/* ---------- Background ---------- */
.bg-wrap{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:
  radial-gradient(1100px 640px at 85% -8%, rgba(56,189,248,.10), transparent 60%),
  radial-gradient(900px 560px at -5% 90%, rgba(34,211,184,.07), transparent 55%),
  var(--bg); }
.glow{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.4; will-change:transform; }
.glow-1{ width:46vw; height:46vw; background:radial-gradient(circle,#0ea5e9,transparent 65%); top:-12vw; right:-6vw; animation:drift1 24s var(--ease) infinite; }
.glow-2{ width:40vw; height:40vw; background:radial-gradient(circle,#22d3b8,transparent 65%); bottom:-12vw; left:-8vw; animation:drift2 28s var(--ease) infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4vw,4vw)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(5vw,-3vw)} }
.grid-lines{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(148,178,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(148,178,214,.045) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,5vw,54px);
  transition:padding .35s var(--ease), background .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ padding:11px clamp(18px,5vw,54px); background:rgba(6,11,18,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ display:grid; place-items:center; filter:drop-shadow(0 6px 18px rgba(14,165,233,.4)); }
.brand-name{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; }
.brand-accent{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:.92rem; color:var(--muted); transition:color .25s; position:relative; }
.nav-links a:not(.nav-cta)::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--grad); transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--text); }
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-cta{ padding:9px 18px; border-radius:10px; color:#05121f !important; font-weight:600; background:var(--grad); transition:transform .25s var(--ease), box-shadow .25s; }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(56,189,248,.4); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{ position:fixed; top:0; right:0; z-index:99; width:min(78vw,320px); height:100vh; background:rgba(8,15,24,.97); backdrop-filter:blur(20px); border-left:1px solid var(--border); display:flex; flex-direction:column; gap:8px; padding:108px 34px 40px; transform:translateX(100%); transition:transform .4s var(--ease); }
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--font-head); font-size:1.3rem; padding:12px 0; color:var(--muted); border-bottom:1px solid var(--border); transition:color .2s; }
.mobile-menu a:hover{ color:var(--text); }

/* ---------- Layout ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,130px) clamp(18px,5vw,40px); }
.section-head{ margin-bottom:clamp(38px,6vw,60px); max-width:780px; }
.section-tag{ display:inline-block; font-family:var(--font-mono); font-size:.78rem; letter-spacing:1.5px; color:var(--teal); margin-bottom:16px; text-transform:uppercase; }
.section-tag.center{ display:block; text-align:center; }
h2{ font-family:var(--font-head); font-weight:700; letter-spacing:-.02em; line-height:1.12; font-size:clamp(1.75rem,4.2vw,2.9rem); }
.section-lede{ color:var(--muted); margin-top:16px; font-size:1.05rem; max-width:620px; }

/* ---------- Hero ---------- */
.hero{ min-height:100vh; display:flex; align-items:center; max-width:var(--maxw); margin:0 auto; padding:120px clamp(18px,5vw,40px) 60px; }
.hero-inner{ max-width:900px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.5px; color:var(--cyan); margin-bottom:28px; padding:8px 16px; border:1px solid var(--border); border-radius:100px; background:var(--surface); }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(34,211,184,.5); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(34,211,184,.5)} 70%{box-shadow:0 0 0 10px rgba(34,211,184,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,184,0)} }
.hero-title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.05; font-size:clamp(2.5rem,7.4vw,5rem); margin-bottom:28px; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--muted); max-width:660px; margin-bottom:40px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }

.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:1rem; padding:15px 28px; border-radius:12px; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s; border:1px solid transparent; }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn-primary{ color:#05121f; background:var(--grad); box-shadow:0 10px 34px rgba(56,189,248,.35); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 46px rgba(34,211,184,.45); }
.btn-ghost{ color:var(--text); background:var(--surface); border-color:var(--border-2); }
.btn-ghost:hover{ transform:translateY(-3px); background:var(--surface-2); border-color:var(--cyan); }
.btn.big{ font-size:clamp(1rem,2.4vw,1.3rem); padding:18px 36px; }

.hero-badges{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.92rem; }
.bdot{ width:5px; height:5px; border-radius:50%; background:var(--teal); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:16px 0; background:rgba(10,18,28,.4); }
.marquee-track{ display:flex; align-items:center; gap:24px; width:max-content; animation:scrollx 40s linear infinite; }
.marquee-track span{ font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--muted); white-space:nowrap; }
.marquee-track i{ width:6px; height:6px; border-radius:50%; background:var(--teal); opacity:.5; flex:none; }
@keyframes scrollx{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:start; margin-bottom:clamp(48px,7vw,80px); }
.about-copy p{ color:var(--muted); margin-bottom:18px; font-size:1.06rem; }
.about-copy strong{ color:var(--text); font-weight:600; }
.diff-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.diff{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:transform .35s var(--ease), border-color .35s, background .35s; }
.diff:hover{ transform:translateY(-4px); border-color:var(--border-2); background:var(--surface-2); }
.diff-no{ font-family:var(--font-mono); font-size:.85rem; color:var(--teal); }
.diff h3{ font-family:var(--font-head); font-weight:600; font-size:1.15rem; margin:12px 0 10px; }
.diff p{ color:var(--muted); font-size:.96rem; }

/* ---------- Services ---------- */
.svc-list{ display:flex; flex-direction:column; }
.svc{ display:grid; grid-template-columns:60px 1fr 220px; gap:28px; align-items:start; padding:32px 8px; border-top:1px solid var(--border); transition:background .3s; }
.svc:last-child{ border-bottom:1px solid var(--border); }
.svc:hover{ background:linear-gradient(90deg,rgba(56,189,248,.05),transparent 70%); }
.svc-no{ font-family:var(--font-mono); font-size:1.05rem; color:var(--teal); padding-top:4px; }
.svc-body h3{ font-family:var(--font-head); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; margin-bottom:10px; }
.svc-body p{ color:var(--muted); font-size:1rem; max-width:640px; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; padding-top:4px; }
.svc-tags span{ font-size:.76rem; padding:5px 11px; border-radius:100px; color:var(--muted); background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.16); }

/* ---------- Capabilities ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cap-group{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:transform .35s var(--ease), border-color .35s, background .35s; }
.cap-group:hover{ transform:translateY(-4px); border-color:var(--border-2); background:var(--surface-2); }
.cap-group h3{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; margin-bottom:16px; color:var(--text); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{ font-size:.8rem; padding:6px 11px; border-radius:8px; color:var(--muted); background:rgba(255,255,255,.035); border:1px solid var(--border); transition:color .2s, border-color .2s, background .2s; }
.chips span:hover{ border-color:var(--teal); background:rgba(34,211,184,.1); color:#fff; }

/* ---------- Work ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.work-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:30px; overflow:hidden; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.work-card::before{ content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background:var(--grad); -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; }
.work-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.work-card:hover::before{ opacity:.7; }
.work-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.badge{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.5px; padding:5px 11px; border-radius:100px; text-transform:uppercase; }
.badge.shipped{ color:#6ee7d6; background:rgba(34,211,184,.13); border:1px solid rgba(34,211,184,.3); }
.badge.progress{ color:#fcd34d; background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3); }
.work-index{ font-family:var(--font-mono); font-size:.9rem; color:var(--muted-2); }
.work-card h3{ font-family:var(--font-head); font-weight:600; font-size:1.25rem; letter-spacing:-.01em; margin-bottom:10px; }
.work-tagline{ color:var(--muted); font-size:.98rem; margin-bottom:20px; }
.par p{ font-size:.9rem; color:var(--muted); margin-bottom:12px; line-height:1.6; }
.par-k{ display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.6px; text-transform:uppercase; color:var(--cyan); margin-right:8px; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.tags span{ font-size:.75rem; padding:5px 10px; border-radius:7px; color:var(--muted); background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.15); }

/* ---------- Engagement ---------- */
.engage-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.engage-card{ background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border); border-radius:var(--radius); padding:30px; transition:transform .35s var(--ease), border-color .35s; }
.engage-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.engage-card h3{ font-family:var(--font-head); font-weight:600; font-size:1.2rem; margin-bottom:12px; }
.engage-card p{ color:var(--muted); font-size:.98rem; }

/* ---------- Contact ---------- */
.contact{ text-align:center; }
.contact-inner{ max-width:720px; margin:0 auto; }
.contact-lede{ color:var(--muted); font-size:1.1rem; margin:18px auto 36px; max-width:560px; }
.contact-email{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:clamp(1.4rem,3.2vw,2rem); letter-spacing:-.02em; color:var(--cyan); transition:color .25s var(--ease); }
.contact-email::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.contact-email:hover{ color:#7dd3fc; }
.contact-email:hover::after{ transform:scaleX(1); }
.contact-email .arrow{ transition:transform .3s var(--ease); }
.contact-email:hover .arrow{ transform:translateX(6px); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--border); padding:34px clamp(18px,5vw,40px); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot-brand{ font-size:1rem; }
.footer-inner p{ color:var(--muted-2); font-size:.88rem; }
.to-top{ color:var(--muted); font-size:.88rem; transition:color .2s; }
.to-top:hover{ color:var(--text); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .about-grid{ grid-template-columns:1fr; }
  .cap-grid, .diff-grid, .engage-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:44px 1fr; }
  .svc-tags{ grid-column:1 / -1; padding-top:14px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width:961px){ .diff-grid, .engage-grid{ } }
@media (max-width:600px){
  .hero-cta{ gap:12px; }
  .btn{ padding:14px 22px; font-size:.95rem; }
  .work-card, .svc{ padding-left:0; padding-right:0; }
  .work-card{ padding:24px; }
  .br-d{ display:none; }
  .footer-inner{ flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}