/* ============================================================
   MTG Technical Services — site.css
   Global design tokens, typography, buttons, cards, form fields
   and shared page components. Loaded on every page.
   ============================================================ */

/* ---- Design tokens ---- */
:root{
  --ink:    #0A3575;   /* primary navy            */
  --ink2:   #072858;   /* deep navy               */
  --azure:  #1D6FE8;   /* brand blue accent       */
  --mist:   #F5F7FA;   /* light section background*/
  --line:   #E4EAF3;   /* hairline borders        */
  --slate:  #51618A;   /* muted body / breadcrumb */
}

/* ---- Base ---- */
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
body{
  font-family:'Manrope', system-ui, sans-serif;
  color:#0d1b32;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.font-display{ font-family:'Sora','Manrope',sans-serif; letter-spacing:-0.015em; }

/* ---- Layout container ---- */
.container{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:24px;
}
@media (min-width:1024px){ .container{ padding-inline:32px; } }

/* ---- Eyebrow label (with pulsing dot) ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--azure);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--azure);
  box-shadow:0 0 0 4px rgba(29,111,232,0.16);
  animation:eb-pulse 1.8s ease-in-out infinite;
}
@keyframes eb-pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(29,111,232,0.16); }
  50%    { box-shadow:0 0 0 8px rgba(29,111,232,0.05); }
}

/* ---- Breadcrumb ---- */
.crumb{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--slate);
}
.crumb a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.crumb a:hover{ color:var(--azure); }
.crumb .sep{ color:#c3cee0; margin:0 1px; }

/* ---- Display heading ---- */
.h-display{
  font-family:'Sora','Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(30px, 4.6vw, 52px);
  line-height:1.08;
  letter-spacing:-0.022em;
  color:var(--ink);
  text-wrap:balance;
}

/* ---- Generic card ---- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(10,53,117,0.04), 0 22px 48px -30px rgba(10,53,117,0.22);
}

/* ---- Form fields ---- */
.label{
  display:block;
  font-size:12.5px; font-weight:700;
  color:var(--ink); margin-bottom:7px; letter-spacing:0.005em;
}
.input{
  width:100%;
  font-family:inherit; font-size:14.5px; color:#0d1b32;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input::placeholder{ color:#9aa7bd; }
.input:focus{
  outline:none;
  border-color:var(--azure);
  box-shadow:0 0 0 3px rgba(29,111,232,0.15);
}
select.input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2351618A' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
textarea.input{ line-height:1.6; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:-0.005em;
  cursor:pointer; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg, var(--azure) 0%, #0F5BD0 100%);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(29,111,232,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px -12px rgba(29,111,232,0.65), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-white{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(10,53,117,0.03);
}
.btn-white:hover{ border-color:var(--azure); color:var(--azure); transform:translateY(-1px); }
.ghost-btn{
  background:rgba(255,255,255,0.10); color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.ghost-btn:hover{ background:rgba(255,255,255,0.18); }

/* Ripple */
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0); opacity:.6;
  background:rgba(255,255,255,0.5);
  animation:ripple .7s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple{ to{ transform:scale(4); opacity:0; } }

/* ---- Scroll reveal ---- */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d, 0ms);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ---- Glass surface ---- */
.glass{
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.6);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}

/* ---- Shared visual components (used across pages) ---- */
.stat-num{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-0.03em; }

.svc-card{
  position:relative;
  background:linear-gradient(180deg, #ffffff 0%, #FBFCFE 100%);
  border:1px solid var(--line);
  border-radius:20px; padding:26px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
  overflow:hidden;
}
.svc-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(29,111,232,0.06), rgba(29,111,232,0) 50%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px -20px rgba(29,111,232,0.30), 0 4px 12px -4px rgba(10,53,117,0.08);
  border-color:rgba(29,111,232,0.25);
}
.svc-card:hover::before{ opacity:1; }
.svc-icon{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #1D6FE8 0%, #0A3575 100%);
  color:#fff; box-shadow:0 12px 24px -10px rgba(29,111,232,0.55);
  transition:transform .4s ease;
}
.svc-card:hover .svc-icon{ transform:rotate(-4deg) scale(1.06); }
.svc-icon img{ width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }

.ind-chip{
  border:1px solid var(--line); border-radius:14px; padding:18px;
  background:#fff; display:flex; flex-direction:column; gap:8px;
  transition:all .3s ease;
}
.ind-chip:hover{
  border-color:var(--azure); transform:translateY(-2px);
  box-shadow:0 18px 38px -16px rgba(29,111,232,0.35);
}

.brand-tile{
  height:88px; border:1px solid var(--line); border-radius:16px;
  display:grid; place-items:center; background:#fff;
  color:#7686a3; font-family:'Sora',sans-serif; font-weight:700;
  letter-spacing:0.04em; transition:all .3s ease; padding:14px 18px;
}
.brand-tile img{
  max-height:38px; max-width:100%; object-fit:contain;
  filter:grayscale(100%) opacity(0.65); transition:filter .3s ease;
}
.brand-tile:hover{ color:var(--ink); border-color:rgba(29,111,232,0.35); transform:translateY(-2px); box-shadow:0 12px 30px -14px rgba(10,53,117,0.20); }
.brand-tile:hover img{ filter:none; }

.proj-card{
  border-radius:22px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:#fff; transition:all .35s ease;
}
.proj-card:hover{ box-shadow:0 30px 60px -20px rgba(10,53,117,0.30); transform:translateY(-4px); }
.proj-thumb{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.proj-thumb::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,53,117,0) 50%, rgba(10,53,117,0.55) 100%);
}

.quote-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px;
  position:relative; transition:all .35s ease;
}
.quote-card:hover{ box-shadow:0 28px 50px -22px rgba(10,53,117,0.20); }
.quote-mark{
  position:absolute; top:18px; right:24px;
  font-family:'Sora',serif; font-size:60px; color:var(--azure); opacity:.15; line-height:1;
}

/* ---- Page hero (interior pages: About, Services, Contact, etc.) ---- */
/* This was the missing rule. The about.html section uses class="page-hero"
   but no .page-hero style existed, so it fell back to a white background
   and all the white text (eyebrow, stat numbers, glass cards) disappeared.
   This gives interior heroes the same dark navy treatment as the homepage. */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  padding:120px 0 90px;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(29,111,232,0.55), transparent 60%),
    radial-gradient(50% 70% at 10% 30%, rgba(10,53,117,0.85), transparent 60%),
    linear-gradient(180deg, #051A40 0%, #0A3575 55%, #0d3d85 100%);
}
.page-hero .h-display{ color:#fff; }                            /* override navy → white on dark */
.page-hero .subhead{
  color:rgba(255,255,255,0.80);
  margin-top:18px; font-size:16px; line-height:1.7; max-width:560px;
}
.page-hero .crumb{ color:rgba(255,255,255,0.70); }
.page-hero .crumb a:hover{ color:#fff; }
.page-hero .crumb .sep{ color:rgba(255,255,255,0.35); }

/* ---- Hero (homepage / dark heroes) ---- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(29,111,232,0.55), transparent 60%),
    radial-gradient(50% 70% at 10% 30%, rgba(10,53,117,0.85), transparent 60%),
    linear-gradient(180deg, #051A40 0%, #0A3575 55%, #0d3d85 100%);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
}
.skyline{ position:absolute; left:0; right:0; bottom:0; height:42%; pointer-events:none; opacity:.55; }
.hero-glow{
  position:absolute; width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle, rgba(93,154,255,0.45), transparent 60%);
  filter:blur(30px); top:-220px; right:-220px;
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-40px, 30px) scale(1.07); }
}
.float-chip{
  position:absolute;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:10px;
  color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.45);
  animation:floaty 7s ease-in-out infinite;
}
.float-chip .dot{
  width:8px; height:8px; border-radius:50%;
  background:#3EE07F; box-shadow:0 0 0 4px rgba(62,224,127,0.18);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(62,224,127,0.18); }
  50%{ box-shadow:0 0 0 8px rgba(62,224,127,0.06); }
}

/* ---- Selection + scrollbar ---- */
::selection{ background:rgba(29,111,232,0.25); color:var(--ink2); }
html::-webkit-scrollbar{ width:10px; }
html::-webkit-scrollbar-thumb{ background:rgba(10,53,117,0.18); border-radius:10px; }
html::-webkit-scrollbar-thumb:hover{ background:rgba(10,53,117,0.32); }