/* =============================================================
   Ez IT Solutions — Brand Stylesheet
   v1.1 — shared between storyboard + production pages
   Depends on Tailwind CDN + Inter/Space Grotesk from Google Fonts
   ============================================================= */

:root{
  --ez-green:#77C800; --ez-green-2:#4FA500; --ez-lime:#A3E635; --ez-black:#030806;
  --ez-ink:#111827;   --ez-muted:#5B6472;   --ez-paper:#F7FAF2; --ez-card:#FFFFFF;
  --ez-line:#E3EAD8;  --ez-blue:#35A7FF;    --ez-gold:#F6C35B;
}
html[data-theme="dark"]{
  --ez-paper:#050806; --ez-card:#0E150F; --ez-ink:#F7FAF2;
  --ez-muted:#B4C2A3; --ez-line:#20311C;
}
body{background:var(--ez-paper); color:var(--ez-ink); transition:background .35s ease,color .35s ease;}

/* ---------- Theme helpers ---------- */
.theme-card{background:color-mix(in srgb, var(--ez-card) 92%, transparent); border-color:var(--ez-line); transition:background .35s ease,border-color .35s ease, color .35s ease, transform .35s ease;}
.theme-muted{color:var(--ez-muted)}
.theme-line{border-color:var(--ez-line)}
.green-gradient{background:linear-gradient(135deg,var(--ez-green),var(--ez-lime));}
.ink-gradient{background:linear-gradient(135deg,#111827,#020402);}
.glass{background:color-mix(in srgb, var(--ez-card) 70%, transparent); backdrop-filter:blur(18px)}

/* ---------- Atmosphere ---------- */
.hero-grid{
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ez-ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ez-ink) 8%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
}
.orb{
  background:radial-gradient(circle at 30% 30%, rgba(163,230,53,.9), rgba(119,200,0,.35) 38%, transparent 70%);
  filter:blur(8px);
}
.floating{animation:float 7s ease-in-out infinite}
.floating-slow{animation:float 10s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}

/* ---------- Theme toggle ---------- */
#themeToggle{
  background:color-mix(in srgb, var(--ez-card) 70%, transparent);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
#themeToggle:hover{border-color:#77C800}
.toggle-track{
  position:relative; height:32px; width:64px; border-radius:9999px;
  background:linear-gradient(135deg,#E6F0D2,#D7E4BE);
  box-shadow:inset 0 2px 6px rgba(17,24,39,.12), inset 0 -1px 0 rgba(255,255,255,.6);
}
html[data-theme="dark"] .toggle-track{
  background:linear-gradient(135deg,#0E150F,#050806);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(119,200,0,.18);
}
.toggle-track .t-sun, .toggle-track .t-moon{
  position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:14px; pointer-events:none; transition:opacity .25s ease;
}
.toggle-track .t-sun{left:9px; color:#F6C35B; filter:drop-shadow(0 0 3px rgba(246,195,91,.55));}
.toggle-track .t-moon{right:9px; color:#1B2A12;}
html[data-theme="light"] .toggle-track .t-sun{opacity:0}
html[data-theme="light"] .toggle-track .t-moon{opacity:.85}
html[data-theme="dark"]  .toggle-track .t-sun{opacity:1}
html[data-theme="dark"]  .toggle-track .t-moon{opacity:0}
.toggle-knob{
  transform:translateX(0); transition:transform .25s ease;
  position:relative; z-index:1;
  box-shadow:0 4px 12px rgba(119,200,0,.55), 0 0 0 2px rgba(255,255,255,.5) inset;
}
html[data-theme="dark"] .toggle-knob{box-shadow:0 0 18px rgba(163,230,53,.7), 0 0 0 2px rgba(0,0,0,.35) inset;}
.dark-knob{transform:translateX(28px)}

/* ---------- Reusable brand background patterns ---------- */
.pat{position:relative; isolation:isolate; overflow:hidden;}
.pat-dots{
  background-image:radial-gradient(color-mix(in srgb, var(--ez-ink) 28%, transparent) 1.2px, transparent 1.2px);
  background-size:16px 16px;
}
html[data-theme="dark"] .pat-dots{background-image:radial-gradient(rgba(163,230,53,.22) 1.2px, transparent 1.2px);}
.pat-grid{
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ez-ink) 10%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ez-ink) 10%, transparent) 1px, transparent 1px);
  background-size:28px 28px;
}
.pat-grid:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(119,200,0,.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(119,200,0,.32) 1px, transparent 1px);
  background-size:140px 140px;
}
.pat-circuit{background:url('../../images/pattern-circuits.svg') center/130% no-repeat;}
.pat-iso{
  background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--ez-ink) 9%, transparent) 0 1px, transparent 1px 14px);
}
.pat-iso:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(-45deg, rgba(119,200,0,.20) 0 1px, transparent 1px 28px);
}
.pat-mesh{
  background:
    radial-gradient(40% 55% at 20% 30%, rgba(119,200,0,.55), transparent 60%),
    radial-gradient(35% 50% at 78% 72%, rgba(53,167,255,.40), transparent 60%),
    radial-gradient(40% 45% at 55% 25%, rgba(246,195,91,.35), transparent 60%),
    #0A130B;
}
html[data-theme="light"] .pat-mesh{
  background:
    radial-gradient(40% 55% at 20% 30%, rgba(119,200,0,.5), transparent 60%),
    radial-gradient(35% 50% at 78% 72%, rgba(53,167,255,.30), transparent 60%),
    radial-gradient(40% 45% at 55% 25%, rgba(246,195,91,.45), transparent 60%),
    #F7FAF2;
}
.pat-topo{
  background:repeating-radial-gradient(circle at 30% 70%,
    color-mix(in srgb, var(--ez-ink) 14%, transparent) 0 1px,
    transparent 1px 22px), var(--ez-card);
}
.pat-topo:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-radial-gradient(circle at 80% 20%, rgba(119,200,0,.25) 0 1px, transparent 1px 34px);
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; isolation:isolate; overflow:hidden; color:#E8F2D9;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(119,200,0,.18), transparent 60%),
    radial-gradient(45% 70% at 10% 100%, rgba(53,167,255,.10), transparent 60%),
    linear-gradient(180deg,#0A130B 0%, #050806 60%, #020402 100%);
}
.site-footer:before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url('../../images/pattern-circuits.svg');
  background-repeat:no-repeat; background-position:right -80px top -40px; background-size:780px auto;
  opacity:.18; mix-blend-mode:screen;
}
.site-footer:after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(to right, rgba(119,200,0,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(119,200,0,.07) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
.site-footer .footer-accent{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(119,200,0,0) 8%, rgba(119,200,0,.85) 50%, rgba(119,200,0,0) 92%, transparent);
  box-shadow:0 0 24px rgba(119,200,0,.55);
}
.site-footer a{transition:color .2s ease, transform .2s ease}
.site-footer a.f-link{color:#B4C2A3}
.site-footer a.f-link:hover{color:#A3E635}
.site-footer .f-heading{color:#fff; letter-spacing:.22em}
.site-footer .f-social{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; width:40px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:#D6E4C4;
}
.site-footer .f-social:hover{color:#071006; background:#A3E635; border-color:#A3E635; transform:translateY(-2px)}
.site-footer .f-divider{border-color:rgba(255,255,255,.08)}
.site-footer .f-cta-card{border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.site-footer .f-eyebrow{color:#A3E635}
.site-footer .f-accent-text{color:#A3E635}
.site-footer .f-phone-pill{color:#A3E635; border-color:#77C800}
.site-footer .f-contact-icon{background:rgba(119,200,0,.15); color:#A3E635}

html[data-theme="light"] .site-footer{
  color:#1B2A12;
  background:
    radial-gradient(55% 75% at 88% 0%, rgba(119,200,0,.22), transparent 60%),
    radial-gradient(45% 70% at 8% 100%, rgba(53,167,255,.10), transparent 60%),
    linear-gradient(180deg,#F7FAF2 0%, #EEF5DF 60%, #E6F0D2 100%);
}
html[data-theme="light"] .site-footer:before{ opacity:.22; mix-blend-mode:multiply; }
html[data-theme="light"] .site-footer:after{
  background-image:
    linear-gradient(to right, rgba(17,24,39,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.06) 1px, transparent 1px);
  opacity:.6;
}
html[data-theme="light"] .site-footer a.f-link{color:#4A5A36}
html[data-theme="light"] .site-footer a.f-link:hover{color:#4FA500}
html[data-theme="light"] .site-footer .f-heading{color:#0E150F}
html[data-theme="light"] .site-footer .f-social{
  background:#fff; border-color:#D7E4BE; color:#3F5128;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}
html[data-theme="light"] .site-footer .f-social:hover{color:#071006; background:#A3E635; border-color:#A3E635}
html[data-theme="light"] .site-footer .footer-accent{
  background:linear-gradient(90deg, transparent, rgba(79,165,0,0) 8%, rgba(79,165,0,.7) 50%, rgba(79,165,0,0) 92%, transparent);
  box-shadow:0 0 18px rgba(119,200,0,.35);
}
html[data-theme="light"] .site-footer .f-divider{border-color:rgba(17,24,39,.10)}
html[data-theme="light"] .site-footer .f-cta-card{
  border-color:rgba(17,24,39,.08); background:rgba(255,255,255,.7);
  box-shadow:0 30px 80px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .site-footer .f-eyebrow{color:#4FA500}
html[data-theme="light"] .site-footer .f-accent-text{color:#4FA500}
html[data-theme="light"] .site-footer .f-phone-pill{color:#3F5128; border-color:#4FA500}
html[data-theme="light"] .site-footer .f-phone-pill:hover{color:#071006}
html[data-theme="light"] .site-footer .f-contact-icon{
  background:#fff; color:#4FA500; border:1px solid #D7E4BE;
  box-shadow:0 4px 12px rgba(17,24,39,.05);
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:9999px; background:#77C800; color:#071006;
  padding:1rem 1.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem;
  box-shadow:0 0 0 1px rgba(119,200,0,.18), 0 24px 60px rgba(119,200,0,.30);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{transform:translateY(-2px); background:#A3E635}
.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:9999px; border:2px solid #77C800; color:var(--ez-ink);
  padding:calc(1rem - 2px) 1.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn-ghost:hover{transform:translateY(-2px); background:#77C800; color:#071006}

/* ---------- Cards ---------- */
.brand-card{
  position:relative; border-radius:2rem; border:1px solid var(--ez-line);
  background:color-mix(in srgb, var(--ez-card) 96%, transparent);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow:0 12px 50px rgba(17,24,39,.06);
}
.brand-card:hover{transform:translateY(-4px); border-color:#77C800; box-shadow:0 24px 70px rgba(119,200,0,.18)}
html[data-theme="dark"] .brand-card{box-shadow:0 12px 50px rgba(0,0,0,.4)}
html[data-theme="dark"] .brand-card:hover{box-shadow:0 24px 70px rgba(119,200,0,.2)}

.icon-tile{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; width:56px; border-radius:1rem; background:#77C800; color:#071006;
}
.icon-tile.alt-ink{background:#111827; color:#A3E635}
.icon-tile.alt-blue{background:#35A7FF; color:#fff}
.icon-tile.alt-gold{background:#F6C35B; color:#111827}
.icon-tile.alt-soft{background:rgba(119,200,0,.14); color:#4FA500}
html[data-theme="dark"] .icon-tile.alt-soft{background:rgba(163,230,53,.14); color:#A3E635}

/* ---------- Stats ---------- */
.stat-number{font-family:'Space Grotesk', sans-serif; font-weight:900; font-size:3rem; line-height:1; letter-spacing:-.04em;}
@media (min-width:768px){.stat-number{font-size:3.75rem;}}

/* ---------- Marquee strip ---------- */
.marquee{display:flex; gap:2.5rem; align-items:center; animation:marquee 38s linear infinite; will-change:transform;}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Process step ---------- */
.step-num{
  font-family:'Space Grotesk', sans-serif; font-weight:900;
  font-size:3.5rem; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(160deg, #77C800, #A3E635);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Misc ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.28em; color:#77C800;
}
.eyebrow:before{content:""; display:inline-block; width:24px; height:2px; background:#77C800; border-radius:2px;}