/* =========================================================
   SECTION: Base / Reset
   Purpose: Global variables, resets, and base tags
   ======================================================= */
:root{
  --bg:#0f1320;
  --card:#151a2e;
  --muted:#9aa3b2;
  --text:#e8ecf3;
  --accent:#0e6501;
  --accent-2:#7ef1c8;
  --ring:rgba(77,163,255,.45);
  --maxw:1100px;
  --radius:18px;
  --gap:24px;
  --pad:64px;
  --header-h:72px; /* synced by JS to real header height */
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }

/* =========================================================
   SECTION: Layout Shell
   Purpose: Page scaffold containers
   ======================================================= */
.site{ display:flex; flex-direction:column; min-height:100dvh }
.section{ padding-block:var(--pad) }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px }

/* =========================================================
   SECTION: Preloader
   Purpose: 5s progress splash while assets load
   ======================================================= */
.no-scroll{ overflow:hidden }

.preloader{
  position:fixed; inset:0; z-index:4000;
  display:grid; place-items:center;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, #1b2440 0%, transparent 50%),
    radial-gradient(1200px 700px at 110% -10%, #122036 0%, transparent 55%),
    var(--bg);
  transition:opacity .35s ease, visibility .35s step-end;
}
.preloader__box{ width:min(560px,92vw) }
.preloader__text{ margin:0 0 12px; text-align:center; font-weight:700; letter-spacing:.2px }
.preloader__bar{
  height:12px; border-radius:999px; overflow:hidden;
  background:#0b1221; border:1px solid #24304e;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.preloader__fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  animation:preloader-fill 5s linear forwards;
}
@keyframes preloader-fill{ from{width:0%} to{width:100%} }
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none }
@media (prefers-reduced-motion:reduce){ .preloader__fill{ animation-duration:.001ms } }

/* =========================================================
   SECTION: Cookie Banner
   Purpose: Consent bar at bottom
   ======================================================= */
.cookie{
  position:fixed; left:0; right:0;
  bottom:clamp(8px,2vw,16px);
  z-index:3500;
  display:none; /* shown via .is-visible */
  padding:0 clamp(10px,2vw,18px);
  pointer-events:none;
}
.cookie.is-visible{ display:block }
.cookie__wrap{
  max-width:var(--maxw); margin:0 auto;
  background:var(--card); border:1px solid #222a46; border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px;
  pointer-events:auto;
}
.cookie__text{ margin:0; color:var(--muted) }
.cookie__link{ text-decoration:underline; opacity:.95 }
.cookie__actions{ display:flex; gap:10px; flex-shrink:0 }
@media (max-width:720px){
  .cookie__wrap{ flex-direction:column; align-items:stretch; text-align:left; gap:12px }
  .cookie__actions{ justify-content:flex-end }
}

/* =========================================================
   SECTION: Header & Navigation
   Purpose: Top bar, brand, links, hamburger
   ======================================================= */
header.section{
  padding-block:0; z-index:1000; top:0;
  background:rgba(15,21,41,.712);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.header__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap); font-size:1.3rem; background:transparent }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px }
.brand__logo{ inline-size:8rem; block-size:7rem; border-radius:10px; object-fit:contain }
.nav{ display:flex; gap:18px; flex-wrap:wrap }
.nav a{ opacity:.9 }
.nav a:hover{ opacity:1; text-decoration:underline }

/* a11y helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Hamburger button */
.nav-toggle{
  display:none;
  appearance:none; border:1px solid #273256; background:#0f1529; color:var(--text);
  border-radius:16px; padding:14px; line-height:0; box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.nav-toggle:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
.nav-toggle .hamburger{
  position:relative; display:block; width:26px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .18s ease, background-color .18s ease;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-toggle .hamburger::before{ transform:translateY(-7px) }
.nav-toggle .hamburger::after{  transform:translateY( 7px) }
.nav-toggle[aria-expanded="true"] .hamburger{ background:transparent }
.nav-toggle[aria-expanded="true"] .hamburger::before{ transform:rotate(45deg) }
.nav-toggle[aria-expanded="true"] .hamburger::after{  transform:rotate(-45deg) }

/* =========================================================
   SECTION: Hero
   Purpose: Above-the-fold panel + image overlay + entrance anim
   ======================================================= */
.hero{
  position:relative; isolation:isolate;
  min-block-size:calc(100svh - var(--header-h));
  display:grid; align-items:center;
  padding-block:clamp(40px,6vw,96px);
}
.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(22px,4vw,48px); align-items:center }
.hero h1{ font-size:clamp(32px,6vw,56px); line-height:1.1; margin:0 0 12px }
.hero p{ color:var(--muted); margin:0 0 22px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; background:var(--accent); color:#09101d; font-weight:700; border:1px solid transparent }
.btn:hover{ filter:brightness(1.05) }
.btn--ghost{ background:transparent; border-color:#2a3452; color:var(--text) }
.card{ background:var(--card); border:1px solid #222a46; border-radius:var(--radius); padding:18px }

.hero::before{
  content:""; position:absolute; inset:calc(-1 * var(--header-h)) 0 0 0; z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(8,12,24,.65) 0%,
      rgba(8,12,24,.35) 35%,
      rgba(8,12,24,.40) 60%,
      rgba(8,12,24,.80) 100%),
    url("assets/mock2.png") center/cover no-repeat;
}

/* Hero entrance: text from left, buttons from right (armed by .hero-ready) */
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap }
.hero [data-hero-left],
.hero [data-hero-right]{
  opacity:0; filter:blur(8px);
  transform:translateX(var(--hero-shift,0));
  transition:
    transform .9s cubic-bezier(.22,.7,0,1),
    opacity .9s ease,
    filter .9s ease;
  will-change:transform,opacity,filter;
}
.hero [data-hero-left]{  --hero-shift:-46px }
.hero [data-hero-right]{ --hero-shift: 46px }
body.hero-ready .hero [data-hero-left],
body.hero-ready .hero [data-hero-right]{ opacity:1; filter:none; transform:none }
body.hero-ready .hero [data-hero-right]{ transition-delay:.12s }
@media (prefers-reduced-motion:reduce){
  .hero [data-hero-left], .hero [data-hero-right]{ transition:none !important; opacity:1; filter:none; transform:none }
}

/* =========================================================
   SECTION: Steps
   Purpose: Process pills + progress + content panels
   ======================================================= */
#steps h1{ text-align:center; font-size:2.5rem }
.steps{ padding-block:clamp(40px,7vw,96px) }

.steps__bar{
  position:relative;
  display:grid; grid-auto-flow:column; justify-content:start; gap:14px;
  margin-bottom:22px;
}
.step{
  appearance:none; cursor:pointer; color:var(--text);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:20px; padding:8px 14px;
  border-radius:999px; border:1px solid #2a3452;
  background:rgba(15,21,41,.80);
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.step:hover{ transform:translateY(-1px) }
.step:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
.step__num{
  inline-size:30px; block-size:30px; display:grid; place-items:center;
  border-radius:999px; border:1px solid #273256; background:#0f1529; font-weight:700; flex:0 0 auto;
}
.step__label{ font-size:.95rem }
.step.is-active{
  background:rgba(14,101,1,.12);
  border-color:color-mix(in srgb, var(--accent) 65%, #2a3452);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
.step.is-active .step__num{ background:var(--accent); color:#09101d; border-color:transparent }

.steps__progress{
  position:absolute; left:0; right:0; bottom:-8px; height:4px;
  background:#1f2745; border-radius:999px; overflow:hidden;
}
.steps__progress-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

.steps__panels{ margin-top:22px }
.step-panel{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(18px,3.5vw,36px); align-items:center;
  padding:18px; border:1px solid #222a46; border-radius:var(--radius); background:var(--card);
}
.step-panel[hidden]{ display:none }
.step-panel__img{
  width:100%; min-height:450px; border-radius:var(--radius);
  border:1px solid #222a46; object-fit:cover;
}
.step-panel__text h3{ margin:0 0 8px }
.step-panel__text p{ margin:0; color:var(--muted) }

/* =========================================================
   SECTION: Services
   Purpose: 4-card grid of offerings
   ======================================================= */
#services .wrap{ max-width:none; padding-inline:0 }
.services{ padding-block:clamp(80px,10vw,140px) }
#services h2{ text-align:center; font-size:2.5rem; padding:1rem; margin-bottom:5rem }

.services__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--gap); padding-inline:30px;
}
.service-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--card); border:1px solid #222a46; border-radius:var(--radius); padding:18px;
  min-height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{ transform:translateY(-4px); border-color:#335aa0; box-shadow:0 12px 36px rgba(0,0,0,.35) }
.service-card__icon{
  inline-size:56px; block-size:56px; display:grid; place-items:center;
  border-radius:14px; border:1px solid #273256; background:var(--accent);
}
.service-card__icon img{ max-width:28px; max-height:28px; opacity:.95 }
.service-card__title{ margin:6px 0 4px }
.service-card__desc{ margin:0 0 6px }
.service-card__list{ margin:6px 0 0; padding-left:18px; display:grid; gap:6px; color:var(--muted) }
.service-card__list li{ line-height:1.45 }
.service-card__cta{ margin-top:auto }

/* =========================================================
   SECTION: Carousel (optional)
   Purpose: Scroll-snap slider + controls
   ======================================================= */
.carousel{ position:relative }
.carousel__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  gap:16px; padding-block:6px; -webkit-overflow-scrolling:touch;
}
.carousel__slide{
  flex:0 0 100%; scroll-snap-align:start;
  border-radius:var(--radius); border:1px solid #222a46;
  background:linear-gradient(120deg, #1b2440, #10182b); position:relative;
}
.carousel__slide > .slide__inner{
  display:flex; min-block-size:360px; align-items:center; justify-content:center;
  font-size:clamp(22px,3vw,32px); color:#cfe2ff; letter-spacing:.4px;
}
.carousel__controls{ display:flex; justify-content:space-between; gap:10px; margin-top:14px }
.iconbtn{
  appearance:none; border:1px solid #273256; background:#0f1529; color:var(--text);
  padding:10px 14px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.iconbtn[disabled]{ opacity:.5; cursor:not-allowed }
.carousel__dots{ display:flex; gap:8px; align-items:center }
.dot{ inline-size:9px; block-size:9px; border-radius:99px; background:#2d375a; border:1px solid #3a456b }
.dot[aria-current="true"]{ background:var(--accent) }

/* =========================================================
   SECTION: About
   Purpose: Mesh background + split rows + scroll reveal
   ======================================================= */
#about{
  position:relative; isolation:isolate;
  border-radius:2%; margin-left:2%; margin-right:2%;
  --mesh-1: rgba(14,101,1,.18);
  --mesh-2: rgba(126,241,200,.12);
  background:
    radial-gradient(60% 120% at -10% -10%, var(--mesh-1), transparent 60%),
    radial-gradient(70% 100% at 110% -10%, var(--mesh-2), transparent 60%),
    linear-gradient(180deg, #0d1324 0%, #0a0f1f 100%);
}
#about::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(45% 65% at 10% 100%, rgba(14,101,1,.12), transparent 60%),
    radial-gradient(45% 65% at 90% 100%, rgba(126,241,200,.08), transparent 60%);
}
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,44px); align-items:center }
.split--rev{ grid-template-columns:.9fr 1.1fr }
.split__img{
  border-radius:var(--radius); border:1px solid #222a46;
  background:linear-gradient(145deg,#162241,#0e1730);
  min-block-size:280px;
}
.muted{ color:var(--muted) }
#about > .wrap{ min-block-size:inherit; display:grid; align-content:center }

/* Scroll-reveal for About rows (auto direction + stagger) */
#about .split > *{
  opacity:0;
  will-change:transform,opacity;
  transition:
    transform .95s cubic-bezier(.16,.84,.24,1),
    opacity .95s ease;
  transition-delay:var(--reveal-delay, 0s);
}
#about .split > :first-child{ transform:translateX(-48px) }
#about .split > :last-child{  transform:translateX( 48px) }
#about .split > .reveal-in{ opacity:1; transform:none }
@media (max-width:900px){
  #about .split > :first-child,
  #about .split > :last-child{ transform:translateY(24px) }
}
@media (prefers-reduced-motion:reduce){
  #about .split > *{ opacity:1; transform:none; transition:none }
}

/* =========================================================
   SECTION: FAQ
   Purpose: Details/summary accordion with custom +/–
   ======================================================= */
.faq{ padding-block:clamp(40px,7vw,96px) }
.faq__title{ text-align:center; margin:0 0 22px }
.faq__grid{ display:grid; gap:var(--gap); grid-template-columns:1fr }

.faq-item{
  background:var(--card);
  border:1px solid #222a46; border-radius:var(--radius);
  overflow:clip;
}
.faq-item > summary{
  position:relative;
  padding:16px 58px 16px 18px;
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-weight:600;
}
.faq-item > summary::-webkit-details-marker{ display:none }

/* circular + icon (turns to – when open) */
.faq-item > summary::after{
  content:"";
  position:absolute; inset-inline-end:14px; inset-block-start:50%;
  transform:translateY(-50%);
  inline-size:34px; block-size:34px; border-radius:999px;
  background:
    linear-gradient(currentColor 0 0) center/16px 2px no-repeat,
    linear-gradient(currentColor 0 0) center/2px 16px no-repeat;
  color:var(--accent);
  background-color:color-mix(in srgb, var(--accent) 18%, #0f1529 82%);
  border:1px solid color-mix(in srgb, var(--accent) 60%, #273256 40%);
  box-shadow:0 2px 0 rgba(0,0,0,.18) inset;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, background-size .18s ease;
}
.faq-item > summary:hover::after,
.faq-item > summary:focus-visible::after{
  background-color:color-mix(in srgb, var(--accent) 28%, #0f1529 72%);
  border-color:color-mix(in srgb, var(--accent) 80%, #273256 20%);
}
.faq-item[open] > summary::after{
  color:#09101d; background-color:var(--accent); border-color:transparent;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px rgba(0,0,0,.35);
  background-size:16px 2px, 0 0; /* minus sign */
}
.faq__content{
  padding:0 18px 16px 18px; color:var(--muted);
  border-top:1px solid #222a46;
}
.faq-item[open]{ border-color:color-mix(in srgb, var(--accent) 50%, #222a46 50%); box-shadow:0 8px 15px rgba(0,0,0,.25) }
@media (prefers-reduced-motion:reduce){ .faq-item > summary::after{ transition:none } }

/* =========================================================
   SECTION: Contact
   Purpose: Two-column info + map
   ======================================================= */
#contact h1{ text-align:center; font-size:2.5rem }
.contact-simple__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:12px }
.contact-box{ background:var(--card); border:1px solid #222a46; border-radius:var(--radius); padding:18px; min-height:100% }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.contact-label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:4px; letter-spacing:.2px }
.contact-value{ font-weight:600; word-break:break-word }
.contact-map iframe{ width:100%; height:320px; border:0; border-radius:calc(var(--radius) - 2px) }



/* === Inquiry form (match contact width, tidy grid) === */
.inquiry .wrap{ /* same max-width as the site (contact section) */
  max-width: var(--maxw);
}
#inquiry h1{ text-align:center; font-size:2.5rem; padding:1rem; margin-bottom:5rem }

.form-card{
  background: var(--card);
  border: 1px solid #222a46;
  border-radius: var(--radius);
  padding: clamp(18px, 2.8vw, 28px);
}

/* First row: name | subject  — Second row: description */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "name subject"
    "desc  desc";
  gap: 18px 24px;
}

.field{ display:grid; gap:8px; }
.field--name   { grid-area: name; }
.field--subject{ grid-area: subject; }
.field--desc   { grid-area: desc; }

.field label{
  font-weight: 600;
  color: var(--text);
  opacity: .95;
}

.field input,
.field textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f1529;
  color: var(--text);
  border: 1px solid #273256;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.field input:focus,
.field textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 70%, #273256);
  box-shadow: 0 0 0 4px var(--ring);
}

.field textarea{
  min-height: 260px;
  resize: vertical;
}

.form-actions{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.form-actions .btn{ padding: 14px 26px; }

/* reserved status area under the button */
.form-status{
  min-height: 28px;                 /* keeps space even when empty */
  text-align: center;
  margin-top: 10px;
  color: var(--muted);
}
.form-status.is-ok    { color: #7ef1c8; }
.form-status.is-error { color: #ffb4b4; }
.g-recaptcha { margin-top: 10px; }
.form-captcha{
  display:flex;
  justify-content:center;
  margin: 10px 0 14px;   /* space around the widget */
}






/* =========================================================
   SECTION: Footer
   Purpose: Brand left, links centered, copyright bottom
   ======================================================= */
.footer{ border-top:1px solid #222a46; color:var(--muted) }
.footer__top{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:24px; padding-block:32px 18px;
}
.footer__brand{ justify-self:start }
.footer__brand img{ height:125px; width:auto; display:block; opacity:.95 }
.footer__nav{ justify-self:center; display:flex; gap:clamp(24px,5vw,72px); font-weight:600 }
.footer__nav a{
  font-size:clamp(1rem, .9rem + .5vw, 1.25rem);
  color:var(--text); opacity:.85;
  transition:opacity .15s ease, text-shadow .15s ease;
}
.footer__nav a:hover{ opacity:1; text-shadow:0 0 .01px currentColor }
.footer__bottom{ text-align:center; padding-bottom:28px; font-size:.95rem; color:var(--muted) }

/* =========================================================
   SECTION: Responsive
   Purpose: Breakpoint adjustments
   ======================================================= */
@media (max-width:1100px){
  .services__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr }

  .split, .split--rev{ grid-template-columns:1fr }
  #about{ border-radius:0%; margin-left:4%; margin-right:4% }
  #about .split, #about .split--rev{ display:flex; flex-direction:column; gap:16px }
  #about .split__img{ order:2; min-block-size:220px }

  .contact-simple__grid{ grid-template-columns:1fr }
  .contact-map iframe{ height:280px }

  .steps__bar{ grid-auto-flow:row }
  .step-panel{ grid-template-columns:1fr }

  .faq__grid{ grid-template-columns:1fr 1fr }

  .footer__top{
    grid-template-columns:1fr;
    justify-items:center; text-align:center; gap:16px;
  }
  .footer__brand img{ height:64px }
  .footer__nav{ gap:32px }

  .nav-toggle{ display:grid; place-items:center }
  .nav{
    position:fixed; left:0; right:0; top:var(--header-h);
    background:rgba(15,21,41,.96);
    border-top:1px solid #222a46;
    backdrop-filter:blur(10px);
    display:grid; gap:12px;
    padding:16px 24px 22px;
    transform-origin:top;
    transform:scaleY(.95);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav.is-open{ transform:scaleY(1); opacity:1; pointer-events:auto }
  .nav a{
    padding:12px 10px; border:1px solid #273256; border-radius:12px;
    background:#0f1529; text-align:center; font-weight:600; opacity:.95;
  }
  .nav a:hover{ opacity:1 }

  /* Steps pills compact grid: 1–2 / 3–4 */
  .steps__bar{
    grid-auto-flow:row;
    grid-template-columns:repeat(2, minmax(120px, 1fr));
    gap:10px 14px; align-items:start;
  }
  .step{ width:100%; justify-content:center }
  
  .form-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "subject"
      "desc";
    gap: 14px;
  }
  .field textarea{ min-height: 220px; }
}

@media (max-width:640px){
  .services__grid{ grid-template-columns:1fr }
}
@media (max-width: 340px){
  .form-captcha .g-recaptcha{
    transform: scale(.88);
    transform-origin: center;
  }
}