/* ============================================================
   SHREAZ MARKETING — shared design system
   Inspired by inthebrandlab.com (charcoal + soft green + grid)
   ============================================================ */

:root{
  --ink:#1B1D1D;        /* charcoal background */
  --surface:#212424;    /* card surface */
  --line:#2c2f2f;       /* hairline borders */
  --bone:#FFFFFF;       /* primary text */
  --muted:rgba(255,255,255,0.55);
  --accent:#83DE7C;     /* soft green accent */
  --accent-ink:#0d130c; /* text on accent */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--accent);color:var(--accent-ink);}

/* Scrollbar */
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:#333;border-radius:9px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ---------- Signature grid background (fixed, site-wide) ---------- */
.grid-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.7;
  background-image:
    linear-gradient(to right, rgba(131,222,124,.07) 1px, transparent 1px),
    linear-gradient(rgba(131,222,124,.07) 1px, transparent 1px);
  background-size:64px 64px;
}
.glow{
  position:fixed;border-radius:9999px;filter:blur(120px);opacity:.25;
  z-index:-1;pointer-events:none;background:var(--accent);
}

/* ---------- Layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
@media(min-width:640px){.wrap{padding:0 32px;}}
section{position:relative;}

/* ---------- Type ---------- */
.eyebrow{color:var(--accent);font-size:13px;letter-spacing:.25em;text-transform:uppercase;}
.display{font-weight:800;letter-spacing:-.03em;line-height:.98;}
.h-mega{font-weight:800;letter-spacing:-.04em;line-height:.92;font-size:clamp(3rem,11vw,9rem);}
.text-accent{color:var(--accent);}
.muted{color:var(--muted);}
.text-gradient{
  background:linear-gradient(100deg,#fff 0%,#fff 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;
  font-weight:600;font-size:15px;padding:14px 26px;cursor:pointer;
  transition:transform .25s ease,filter .25s,border-color .25s,color .25s,background .25s;
  border:1px solid transparent;
}
.btn-accent{background:var(--accent);color:var(--accent-ink);}
.btn-accent:hover{filter:brightness(.95);}
.btn-ghost{border-color:var(--line);color:var(--bone);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:10px 20px;font-size:14px;}
.btn-white{background:var(--bone);color:var(--ink);}
.btn-white:hover{filter:brightness(.9);}

/* ---------- Glass / cards ---------- */
.glass{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:24px;
}
.grad-border{position:relative;}
.grad-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(131,222,124,.5),rgba(255,255,255,.05) 45%,rgba(255,255,255,.02));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card-hover{transition:transform .3s ease;}
.card-hover:hover{transform:translateY(-4px);}

/* ---------- Nav ---------- */
header#nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;}
header#nav.scrolled{background:rgba(27,29,29,.8);backdrop-filter:blur(12px);border-bottom-color:var(--line);}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-weight:800;font-size:20px;letter-spacing:.05em;}
.logo .br{color:var(--accent);}
.nav-links{display:none;gap:34px;font-size:15px;}
.nav-links a{color:var(--muted);position:relative;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--bone);}
.nav-links a.active::after,.nav-links a:hover::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--accent);}
@media(min-width:860px){.nav-links{display:flex;} .nav-desktop-cta{display:inline-flex!important;} #menuBtn{display:none!important;}}
.nav-desktop-cta{display:none;}
#menuBtn{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;}
#menuBtn span{width:24px;height:2px;background:var(--bone);display:block;}
#mobileMenu{display:none;background:rgba(27,29,29,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);}
#mobileMenu.open{display:block;}
.mobile-inner{padding:22px 24px;display:flex;flex-direction:column;gap:18px;font-size:18px;}
.mobile-inner a{color:var(--muted);}

/* ---------- Marquee ---------- */
.marquee-mask{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);padding:22px 0;}
.marquee{display:flex;width:max-content;animation:marquee 34s linear infinite;}
.marquee:hover{animation-play-state:paused;}
.marquee .row{display:flex;align-items:center;font-weight:600;font-size:clamp(1.4rem,3.4vw,2.3rem);color:var(--muted);}
.marquee .row span{margin:0 32px;white-space:nowrap;}
.marquee .dot{color:var(--accent);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:24px;overflow:hidden;}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--ink);padding:34px 26px;}
.stat .num{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.2rem,5vw,3rem);}

/* ---------- Case study (brand-lab style) ---------- */
.case{display:grid;grid-template-columns:1fr;gap:28px;padding:40px 0;border-top:1px solid var(--line);}
@media(min-width:900px){.case{grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;}
  .case.rev .case-media{order:2;}}
.case-media{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface);}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.case:hover .case-media img{transform:scale(1.05);}
.case-index{position:absolute;top:16px;left:18px;font-weight:800;font-size:20px;color:#fff;mix-blend-mode:difference;}
.case-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:22px 0;}
.case-metric{background:var(--ink);padding:20px 18px;}
.case-metric .m-num{font-weight:800;font-size:clamp(1.5rem,3.5vw,2rem);letter-spacing:-.02em;}
.case-metric .m-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px;}

/* ---------- Founder ---------- */
.founder-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
@media(min-width:900px){.founder-grid{grid-template-columns:0.85fr 1.15fr;gap:56px;}}
.founder-media{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);}
.founder-media img{width:100%;height:100%;object-fit:cover;}
.founder-tag{position:absolute;left:18px;bottom:18px;background:rgba(27,29,29,.75);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;padding:12px 16px;}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(4,1fr);}}
.svc{padding:28px;border-radius:24px;}
.svc .ic{width:48px;height:48px;border-radius:14px;background:rgba(131,222,124,.15);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:22px;}

/* ---------- Testimonials (brand-lab style card w/ stars + avatar) ---------- */
.tst-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:768px){.tst-grid{grid-template-columns:repeat(3,1fr);}}
.tst{padding:30px;border-radius:24px;display:flex;flex-direction:column;gap:18px;}
.stars{color:var(--accent);letter-spacing:3px;font-size:15px;}
.tst blockquote{margin:0;font-size:17px;line-height:1.55;}
.tst .who{display:flex;align-items:center;gap:12px;margin-top:auto;}
.tst .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line);}
.avatar-fallback{width:44px;height:44px;border-radius:50%;background:rgba(131,222,124,.2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;}

/* ---------- Process / steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{border-top:1px solid var(--line);padding-top:26px;position:relative;}
.step .dot{position:absolute;top:-9px;left:0;width:16px;height:16px;border-radius:50%;background:var(--line);}
.step.first .dot{background:var(--accent);}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.field input,.field textarea,.field select{
  background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--bone);
  font-family:inherit;font-size:15px;transition:border-color .2s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35);}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(32px);}

/* ---------- Cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);mix-blend-mode:difference;}
.cursor-dot{width:7px;height:7px;background:var(--accent);}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.5);
  transition:width .25s,height .25s,background .25s,border-color .25s;}
.cursor-ring.grow{width:64px;height:64px;background:rgba(131,222,124,.12);border-color:transparent;}
@media(hover:none){.cursor-dot,.cursor-ring{display:none;}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);margin-top:40px;}
.foot-inner{padding:56px 0;}
.foot-top{display:flex;flex-direction:column;gap:28px;}
@media(min-width:768px){.foot-top{flex-direction:row;align-items:center;justify-content:space-between;}}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 30px;color:var(--muted);font-size:15px;}
.foot-links a:hover{color:var(--bone);}
.socials{display:flex;gap:12px;}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:13px;transition:border-color .2s,color .2s;}
.socials a:hover{border-color:var(--accent);color:var(--accent);}
.foot-bottom{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;justify-content:space-between;font-size:13px;color:var(--muted);}
@media(min-width:640px){.foot-bottom{flex-direction:row;align-items:center;}}

/* ---------- Helpers ---------- */
.section-pad{padding:72px 0;}
@media(min-width:768px){.section-pad{padding:104px 0;}}
.mb-head{margin-bottom:56px;}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9999px;
  padding:8px 16px;font-size:13px;color:var(--muted);}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.badge{display:inline-flex;align-items:center;border-radius:9999px;padding:8px 16px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
.badge.accent{color:var(--accent);}