:root{
  --brand-start:#0056b8; /* dark */
  --brand-end:#00a8e1;   /* light */
  --text:#0a192f;
  --muted:#dbeeff; /* light text for contact subhead on gradient */
  --card-bg:rgba(255,255,255,0.6);
  --card-stroke:rgba(10,25,47,0.12);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,0.12);
  --maxw:1200px;

  /* sticky navbar height hint for hero sizing */
  --nav-h: 64px;
}
@media (max-width: 576px){ :root{ --nav-h: 56px; } }

/* gradients */
:root{
  --grad-horizontal: linear-gradient(90deg, var(--brand-start), var(--brand-end));   /* navbar only */
  --grad-horizontal-inverted: linear-gradient(90deg, var(--brand-end), var(--brand-start));
  --grad-vertical:   linear-gradient(180deg, var(--brand-start), var(--brand-end));  /* dark(top) → light(bottom) */
  --grad-vertical-rev: linear-gradient(180deg, var(--brand-end), var(--brand-start));/* light(top) → dark(bottom) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.container{max-width:var(--maxw);margin-inline:auto;padding:10px 20px}

/* ================= URLS ================= */
a {
  color: var(--brand-end);
}

/* ================= BOOTSTRAP NAVBAR (site-nav) ================= */
.site-nav{
  background: var(--grad-horizontal);
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.site-nav .navbar-brand img{border-radius:8px}
.site-nav .nav-link{
  color:#fff !important;
  opacity:.95;
  padding:.6rem 1.05rem;          /* extra padding so hover bg doesn't hug text */
  border-radius:.65rem;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus{
  opacity:1;
  background:rgba(255,255,255,0.16);
}

/* ================= HERO (full viewport minus navbar) ================= */
.hero{
  position: relative;
  overflow: hidden;                                  /* 4000px halo won't cause scrollbars */
  background: var(--grad-vertical);
  min-height: calc(100svh - var(--nav-h));           /* fill the screen minus sticky navbar */
  display:grid;place-items:center;text-align:center;
  padding:64px 0 0;                                   /* room for halo lines */
}
.hero h1{
  font-size: clamp(2rem, 3vw + 1rem, 4rem);
  margin:0 0 14px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.24);
}
.hero .light{font-weight:300}
.hero-sub{
  max-width:820px;margin:0 auto 24px;
  color:#eef7ff;font-size:1.125rem;line-height:1.6;
  text-shadow:0 2px 10px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.6);
}

/* ======= HERO HALO LINES (two white strokes that intersect twice) ======= */
.hero-halo{
  position:absolute;
  bottom:-50px; left:30%;
  width:4000px; height:250px;
  transform:translateX(-50%);   /* center the extra width */
  pointer-events:none;
}
.halo-line{
  fill:none;
  stroke:#ffffff;
  stroke-width:10;
  opacity:.10;             /* ghostly */
  stroke-linecap:round;
  mix-blend-mode:screen;   /* light blend on dark gradient */
}
.halo-line.line-b{
  stroke-width:8;
  opacity:.15;
}

/* ======= HERO HALO LINES (two white strokes that intersect twice) Form ======= */
.hero-halo{
  position:absolute;
  bottom:-50px; left:30%;
  width:4000px; height:250px;
  transform:translateX(-50%);   /* center the extra width */
  pointer-events:none;
}
.halo-line{
  fill:none;
  stroke:#ffffff;
  stroke-width:10;
  opacity:.10;             /* ghostly */
  stroke-linecap:round;
  mix-blend-mode:screen;   /* light blend on dark gradient */
}
.halo-line.line-b{
  stroke-width:8;
  opacity:.15;
}

/* Make sure the contact section can host absolutely-positioned decor */
#contact{ position: relative; overflow: hidden; }

/* ======= CONTACT HALO LINES (two white strokes that intersect twice) ======= */
.form-halo{
  position:absolute;
  bottom:-95px; left:80%;
  width:4000px; height:500px;
  transform:translateX(-50%);
  pointer-events:none;
}

.form-line{
  fill:none;
  stroke:#ffffff;
  stroke-width:15;
  opacity:.05;             /* ghostly */
  stroke-linecap:round;
  mix-blend-mode:screen;   /* subtle lightening on the gradient */
}
.form-line.alt{
  stroke-width:15;
  opacity:.05;
}

/* Outline buttons (no background) */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;font-weight:500;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-outline{
  color:#fff;border:1.5px solid rgba(255,255,255,.9);background:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
  background: var(--brand-end);
}
.btn-outline:hover,.btn-outline:focus{
  outline:2px solid white;
  background: var(--brand-start);
  color: white;
}

/* Separate outline class for form submit */
.btn-outline-alt{
  color:#fff;border:1.5px solid rgba(255,255,255,.9);background:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
}
.btn-outline-alt:hover,.btn-outline-alt:focus{
  outline:3px solid rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.08);
}

/* ================= SECTIONS & CARDS ================= */
section{padding:60px 0}
.section-title{font-size:1.875rem;margin:0 0 18px}

/* Make Services subtext readable (dark muted tone, as before) */
#services .section-sub{ color:#5a6a85 !important; }
.section-sub{ color:#5a6a85; margin:0 0 32px }

/* Global grid helpers (12-track) */
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.span-4{grid-column:span 12}
@media(min-width:700px){.span-4{grid-column:span 6}}
@media(min-width:1000px){.span-4{grid-column:span 4}}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-stroke);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  padding:18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease;
}
.card:hover{transform:translateY(-2px)}
.card-emoji{font-size:1.6rem}
.card-icon{width:36px;height:36px}
.card-title{font-weight:700}
.card p{color:#556581;margin:0 0 8px}
.card .card-actions{margin-top:auto}

.btn-basic{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--card-stroke);
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.06);font-weight:600;
}
.btn-basic:hover{border-color:rgba(10,25,47,0.2)}

/* ================= CONTACT ================= */
/* Flipped gradient: light(top) → dark(bottom) */
.contact{
  background: var(--grad-vertical-rev);
  color:#fff;
}
.contact .section-sub{color:var(--muted)}
.form{
  display:grid;gap:14px;grid-template-columns:1fr;
}
@media(min-width:800px){
  .form{grid-template-columns:1fr 1fr}
  .form textarea{grid-column:1 / -1}
  .form .full{grid-column:1 / -1}
}
label{font-weight:600;margin-bottom:6px;display:block}
.contact label{color:#fff}
input,select,textarea{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--card-stroke);
  background:#fff;font:inherit;outline:none;color:#0a192f;
}
input::placeholder,textarea::placeholder{color:#6b7b91}
input:focus,select:focus,textarea:focus{
  border-color:#97c8ff;box-shadow:0 0 0 3px rgba(0,123,255,0.15)
}
.status{min-height:22px;font-size:.95rem}
.status[role="alert"]{color:#ffe2e2}

/* ================= FOOTER ================= */
/* Solid dark blue (no gradient) */
.footer{
  padding:22px 0;color:#fff;background: var(--brand-start);
  text-align:center;
  border-top: 1px solid white;
}

/* A11y helper */
.visually-hidden{
  position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)
}

/* Ensure contact section creates a stacking context */
#contact { position: relative; }

/* Decorative halo stays behind form controls */
.form-halo { position: absolute; z-index: 0; pointer-events: none; }

/* Turnstile sits above halo and is forced visible */
.cf-turnstile {
  position: relative;
  z-index: 1;
  display: block !important;
  min-height: 65px; /* widget is ~65px tall */
}

/* ==================== ADDITIONS (requested features) ==================== */

/* 1) Smooth scrolling for in-page # links */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 2) Fade-in for hero text + button */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp .8s ease forwards;
}
.fade-in-up.delay-1 { animation-delay: .15s; }
.fade-in-up.delay-2 { animation-delay: .30s; }

/* 3) SERVICE TEMPLATE PAGE STYLES */

/* Keeps the same overall vibe as your main hero */
.service-hero {
  background: var(--grad-vertical);
  color: #fff;
  min-height: 33vh; /* ~1/3 page */
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px 0;
  position: relative;
  overflow: hidden;
}
.service-hero h1 {
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  margin: 0 0 8px;
}
.service-hero p {
  margin: 0;
  color: #eef7ff;
}

/* Consistent section spacing */
.service-section, .service-second {
  padding: 48px 0; /* normalized */
}

/* White hero immediately below */
.hero-white {
  background: #ffffff;
  color: var(--text);
  padding: 28px 0;
  border-bottom: 1px solid rgba(10,25,47,0.06);
}

/* Overview section: text left (title in darker blue), room right for media */
.service-overview {
  padding: 48px 0;
}
.service-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .service-layout { grid-template-columns: 1.1fr .9fr; }
}
.service-title {
  color: var(--brand-start);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
  margin: 0 0 10px;
}

/* Header inside a container: remove horizontal padding so it aligns exactly */
.section-header, .title-second {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 0 10px;  /* no horizontal padding when wrapped in .container */
}
.section-header h2, .title-second h2 {
  color: var(--brand-end);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
}
.section-header p, .title-second p {
  color:#556581;
  margin:0 0 8px;
}

.service-desc {
  color: #000;
  line-height: 1.65;
}

/* ===== Services cards: robust layout to avoid odd wrapping ===== */
.service-cards .grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;                 /* phones */
  align-items: stretch;
}
@media (min-width: 700px) {
  .service-cards .grid { grid-template-columns: repeat(2, 1fr); } /* tablets */
}
@media (min-width: 1000px) {
  .service-cards .grid { grid-template-columns: repeat(3, 1fr); } /* desktop */
}
/* Let auto-placement handle columns; ignore 12-track span helper here */
.service-cards .span-4 { grid-column: auto !important; }
/* Equal-height cards per row */
.service-cards .card { background:#fff; height: 100%; }

/* Semi-transparent link cloud: 3 cols, multiple rows */
.service-links {
  padding-top: 10px;
}
.service-links-grid {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 700px) {
  .service-links-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1000px) {
  .service-links-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.service-link {
  font-weight: 700;
  opacity: .5;
  transition: opacity .15s ease, transform .15s ease;
  display: inline-block;
}
.service-link:hover,
.service-link:focus {
  opacity: 1;
  transform: translateY(-1px);
}

/* Optional subtle divider */
.section-divider {
  height: 1px;
  background: rgba(10,25,47,0.08);
  margin: 28px 0;
}

/* Divider now stretches to container width (wrap it in .container in HTML) */
.section-rule, .second-title {
  height: 2px;
  width: 100%;               /* align with container content */
  background: var(--grad-horizontal-inverted);
  border-radius: 2px;
  margin: 16px 0;            /* vertical spacing only */
  display: block;
}

/* Windows page image helper */
.microsoft-suite {
  opacity: 90%;
  border-radius: 20px;
  width: 90%;
  max-width: 100%;
  height: auto;
  display: block;
}