/* =========================================================================
   ASTRACOM — single-page stylesheet (Django build)
   Dark theme, red accent, Montserrat. Ported from the original _ds design.
   ========================================================================= */

/* ---- TOKENS ----------------------------------------------------------- */
:root {
  --astra-red: #e54242;
  --astra-red-bright: #ef4b4b;
  --astra-red-deep: #c62828;
  --astra-red-hover: #d23636;
  --astra-black: #1c1c1c;
  --astra-panel: #2b2b2b;
  --astra-panel-2: #333333;
  --astra-hero: #0d1b24;
  --astra-white: #ffffff;
  --astra-grey-1: #cccccc;
  --astra-grey-2: #bbbbbb;
  --astra-grey-3: #9a9a9a;
  --astra-border: #444444;
  --divider: #3a3a3a;
  --surface-card: var(--astra-panel);
  --surface-raised: var(--astra-panel-2);
  --font-sans: 'Montserrat','Helvetica Neue',Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --container:1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 75px; }

/* ---- BASE ------------------------------------------------------------- */
body {
  margin: 0; background: var(--astra-black); color: var(--astra-grey-3);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--astra-white); font-family: var(--font-sans); }
h1, h2, h3 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }
::selection { background: var(--astra-red); color: #fff; }
:focus-visible { outline: 2px solid var(--astra-red); outline-offset: 3px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; }

/* content sits above the fixed background */
.page { position: relative; z-index: 1; }

/* ---- FIXED PARALLAX BACKGROUND SLIDESHOW ------------------------------ */
.astra-fixedbg { position: fixed; top:0; left:0; right:0; height: 140vh; z-index: 0; overflow: hidden; background: var(--astra-hero); will-change: transform; pointer-events: none; }
.astra-fixedbg .slide { position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0; animation: astraSlide 24s infinite; will-change: opacity, transform; }
.astra-fixedbg .slide.s1 { background-image:url("../img/slider/wide1.4287be4d0b32.jpg"); animation-delay:0s; }
.astra-fixedbg .slide.s2 { background-image:url("../img/slider/wide2.2e1108e81caf.jpg"); animation-delay:8s; }
.astra-fixedbg .slide.s3 { background-image:url("../img/slider/wide3.19c1cc979fbd.jpg"); animation-delay:16s; }
.astra-fixedbg .grad { position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,27,36,0.45) 0%, rgba(13,27,36,0.52) 55%, rgba(13,27,36,0.72) 100%); }
@keyframes astraSlide { 0%{opacity:0;transform:scale(1.08);} 4%{opacity:1;} 29%{opacity:1;} 33%{opacity:0;transform:scale(1);} 100%{opacity:0;transform:scale(1);} }
@keyframes astraDot { 0%,100%{background:rgba(255,255,255,0.35);} 1%,30%{background:var(--astra-red);transform:scale(1.25);} 33%{background:rgba(255,255,255,0.35);transform:scale(1);} }
@keyframes astraScroll { 0%{opacity:0;transform:translateY(-4px);} 40%{opacity:1;} 80%,100%{opacity:0;transform:translateY(12px);} }
@keyframes astraBob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(7px);} }
@media (prefers-reduced-motion: reduce){ .astra-fixedbg .slide, .astra-dots span, .astra-scroll { animation: none !important; } }

/* ---- HEADER (reveal on scroll) ---------------------------------------- */
.site-header { position: fixed; top:0; left:0; right:0; z-index: 60; background: rgba(15,15,15,0.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.06); transform: translateY(-110%); visibility: hidden; transition: transform .35s ease, visibility .35s; }
.site-header.is-pinned { transform: translateY(0); visibility: visible; }
.site-header__inner { max-width: var(--container); margin:0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-header .brand img { height:42px; width:auto; display:block; }
.site-nav { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.site-nav a { color: var(--astra-grey-2); font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:4px 0; border-bottom:2px solid transparent; transition: color .18s ease, border-color .18s ease; }
.site-nav a:hover, .site-nav a.is-active { color: var(--astra-white); }
.site-nav a.is-active { border-bottom-color: var(--astra-red); }

/* ---- BUTTONS ---------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-sans); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:0.14em; border-radius:999px; border:2px solid transparent; line-height:1; padding:17px 44px; font-size:14px; cursor:pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.btn--primary { background: var(--astra-red); color:#fff; border-color: var(--astra-red); }
.btn--primary:hover { background: var(--astra-red-hover); border-color: var(--astra-red-hover); color:#fff; }
.btn--secondary { background: transparent; color:#fff; border-color: rgba(255,255,255,0.55); }
.btn--secondary:hover { border-color:#fff; color:#fff; }
.btn--block { width:100%; }

/* ---- SECTION TITLE ---------------------------------------------------- */
.section-title { max-width:720px; margin:0 auto; text-align:center; }
.section-title h2 { color:var(--astra-white); font-weight:var(--fw-bold); font-size:26px; text-transform:uppercase; letter-spacing:0.22em; line-height:1.25; }
.section-title .underline { display:block; width:46px; height:3px; background:var(--astra-red); margin:18px auto 0; }
.section-title .intro { margin:22px auto 0; color:var(--astra-grey-3); font-weight:var(--fw-light); line-height:1.7; }

/* ---- SECTIONS (translucent over fixed bg) ----------------------------- */
.sec { position: relative; padding: 96px 0; }
.sec::before { content:''; position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, rgba(18,18,18,0.82), rgba(18,18,18,0.88)); }
.sec > .wrap { position: relative; z-index: 1; }
.sec--include { border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }
.sec--include::before { background: linear-gradient(180deg, rgba(22,22,22,0.8), rgba(22,22,22,0.86)); }

/* ---- HERO ------------------------------------------------------------- */
.hero { position: relative; min-height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero__inner { position: relative; z-index: 2; padding: 130px 24px 150px; max-width: 940px; margin:0 auto; }
.hero__mark { font-weight:800; font-size: clamp(52px,11vw,104px); letter-spacing:0.12em; text-transform:uppercase; line-height:1; margin-bottom:22px; }
.hero__mark .astra { color: var(--astra-red); }
.hero__mark .com { color: var(--astra-grey-1); }
.hero__tagline { color: var(--astra-white); font-size: clamp(16px,2.4vw,21px); font-weight:300; letter-spacing:0.04em; margin:0 auto 12px; max-width:680px; }
.hero__sub { color: var(--astra-grey-2); font-size: clamp(14px,1.8vw,16px); font-weight:300; line-height:1.7; margin:0 auto 38px; max-width:620px; }
.hero__cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.astra-dots { position:absolute; bottom:92px; left:0; right:0; z-index:3; display:flex; gap:11px; justify-content:center; }
.astra-dots span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.35); animation: astraDot 24s infinite; }
.astra-dots span:nth-child(2){ animation-delay:8s; }
.astra-dots span:nth-child(3){ animation-delay:16s; }
.astra-scroll { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; animation: astraBob 2.4s ease-in-out infinite; }
.astra-scroll .mouse { display:block; width:26px; height:42px; border:2px solid rgba(255,255,255,0.55); border-radius:16px; position:relative; }
.astra-scroll .mouse::after { content:''; position:absolute; top:7px; left:50%; margin-left:-2px; width:4px; height:8px; border-radius:2px; background:var(--astra-red); animation: astraScroll 2s ease-in-out infinite; }

/* ---- ABOUT FEATURE CARDS ---------------------------------------------- */
.grid-about { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-top:60px; align-items:stretch; }
.grid-about > * { margin:0; }
.feature-card { background:var(--surface-card); border:1px solid var(--divider); box-shadow:0 2px 10px rgba(0,0,0,0.35); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease; height:100%; }
.feature-card:hover { transform:translateY(-5px); border-color:var(--astra-red); }
.feature-card .fc-img { margin:0; }
.feature-card .fc-img img { width:100%; height:214px; object-fit:cover; display:block; }
.feature-card .fc-body { padding:28px 28px 32px; text-align:center; }
.feature-card h3 { margin:0 0 12px; font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.feature-card p { margin:0; color:var(--astra-grey-3); font-size:14.5px; font-weight:300; line-height:1.7; }

/* ---- PRICING CARDS ---------------------------------------------------- */
.grid-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:40px; align-items:stretch; }
.grid-plans > * { margin:0; }
.pricing-card { background:var(--surface-card); border:1px solid var(--divider); box-shadow:0 2px 10px rgba(0,0,0,0.35); padding:26px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; height:100%; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pricing-card:hover { transform:translateY(-5px); box-shadow:0 8px 26px rgba(0,0,0,0.45); }
.pricing-card.is-featured { background:var(--surface-raised); border-color:var(--astra-red); box-shadow:0 8px 26px rgba(0,0,0,0.45); }
.pricing-card h3 { margin:0; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; }
.pricing-card .price { margin-top:14px; line-height:1; color:var(--astra-red); }
.pricing-card .price .amount { font-size:42px; font-weight:700; }
.pricing-card .price .per { font-size:12px; font-weight:500; margin-left:4px; }
.pricing-card ul { list-style:none; padding:0; margin:18px 0 22px; width:100%; border-top:1px solid var(--divider); }
.pricing-card li { color:var(--astra-grey-2); font-size:14px; font-weight:300; padding:8px 0; border-bottom:1px solid var(--divider); }
.pricing-card .btn { width:100%; margin-top:auto; padding:13px 22px; font-size:13px; }
.pricing-note { text-align:center; color:var(--astra-grey-3); font-size:14px; margin-top:34px; }
.pricing-note a { color:var(--astra-red); font-weight:600; }

/* ---- INCLUDE / SERVICES / WHY ROWS ------------------------------------ */
.grid-include { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:40px 48px; margin-top:58px; }
.grid-services { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:24px 44px; margin-top:58px; }
.grid-why { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px 44px; margin-top:56px; }
.grid-include > *, .grid-services > *, .grid-why > * { margin:0; }
.row-item { display:flex; gap:22px; align-items:flex-start; }
.row-item.big { gap:24px; }
.row-item .icon-circle { flex:0 0 auto; border-radius:50%; border:2px solid var(--astra-red); color:var(--astra-red); display:inline-flex; align-items:center; justify-content:center; }
.row-item h3 { margin:5px 0 9px; font-size:17px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.row-item.big h3 { margin:6px 0 9px; }
.row-item p { margin:0; color:var(--astra-grey-3); font-size:14.5px; font-weight:300; line-height:1.7; }
.why-item { display:flex; gap:16px; align-items:flex-start; }
.why-item .check { flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--astra-red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin-top:2px; }
.why-item h3 { margin:0 0 8px; font-size:15.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.why-item p { margin:0; color:var(--astra-grey-3); font-size:14.5px; font-weight:300; line-height:1.65; }

/* ---- STATS BAND ------------------------------------------------------- */
.stats-band { background: var(--astra-red-bright); color:#fff; padding:66px 24px; position:relative; z-index:1; }
.grid-stats { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; text-align:center; }
.grid-stats .num { font-size:clamp(38px,6vw,54px); font-weight:800; line-height:1; color:#fff; }
.grid-stats .label { margin-top:12px; font-size:12.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.92); }

/* ---- CONTACT ---------------------------------------------------------- */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:48px; align-items:start; margin-top:52px; }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.contact-form .field { display:flex; flex-direction:column; gap:8px; }
.contact-form label { color:var(--astra-grey-2); font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form textarea {
  width:100%; background:transparent; color:#fff; border:1px solid var(--astra-border); border-radius:3px;
  padding:14px 16px; font-family:var(--font-sans); font-size:15px; outline:none;
}
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#6f6f6f; }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--astra-red); }
.contact-form .errorlist { list-style:none; margin:2px 0 0; padding:0; color:#ffb4b4; font-size:12px; }
.contact-form .hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form .btn { align-self:flex-start; margin-top:6px; }
.form-msg { border:1px solid; border-radius:4px; padding:14px 16px; font-size:14px; }
.form-msg.success { border-color:var(--astra-red); color:var(--astra-white); background:rgba(229,66,66,0.08); }
.form-msg.error { border-color:#d23636; color:#ffd7d7; background:rgba(210,54,54,0.12); }

.contact-cards { display:flex; flex-direction:column; gap:16px; }
.info-card { background:var(--surface-card); border:1px solid var(--divider); padding:20px 22px; display:flex; gap:18px; align-items:center; }
.info-card .icon-circle { flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:2px solid var(--astra-red); color:var(--astra-red); display:inline-flex; align-items:center; justify-content:center; }
.info-card .k { margin:0 0 3px; color:var(--astra-grey-2); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }
.info-card .v { margin:0; color:var(--astra-white); font-size:15px; word-break:break-word; }
.info-card a.v:hover { color:var(--astra-red); }

/* ---- FOOTER ----------------------------------------------------------- */
.site-footer { background:#131313; border-top:1px solid var(--divider); padding:64px 0 30px; position:relative; z-index:1; }
.site-footer__cols { max-width:var(--container); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; }
.site-footer .brand img { height:38px; width:auto; }
.site-footer .brand-blurb { margin:18px 0 20px; color:var(--astra-grey-3); font-size:14px; font-weight:300; line-height:1.7; max-width:300px; }
.site-footer h5 { margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.site-footer h3 { margin:0 0 18px; font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.footer-pay { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.footer-pay img { height:26px; width:auto; background:#fff; border-radius:3px; padding:3px 5px; }
.site-footer .links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.site-footer .links a { color:var(--astra-grey-3); font-size:14px; }
.site-footer .links a:hover { color:var(--astra-red); }
.site-footer .fcontact { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; color:var(--astra-grey-3); font-size:14px; font-weight:300; }
.site-footer .fcontact li { display:flex; gap:10px; align-items:center; }
.site-footer .fcontact .ic { color:var(--astra-red); display:inline-flex; }
.site-footer .fcontact a:hover { color:var(--astra-red); }
.social { display:flex; gap:12px; margin-top:18px; }
.social a { width:36px; height:36px; border:1px solid var(--divider); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--astra-grey-2); }
.social a:hover { border-color:var(--astra-red); color:var(--astra-red); }
.site-footer__bottom { max-width:var(--container); margin:44px auto 0; padding:22px 24px 0; border-top:1px solid var(--divider); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
.site-footer__bottom p { margin:0; color:var(--astra-grey-3); font-size:13px; }
.site-footer__bottom ul { list-style:none; margin:0; padding:0; display:flex; gap:22px; }
.site-footer__bottom a { color:var(--astra-grey-3); font-size:13px; }
.site-footer__bottom a:hover { color:var(--astra-red); }

/* ---- RESPONSIVE ------------------------------------------------------- */
@media (max-width: 900px){ .site-footer__cols { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } }
@media (max-width: 782px){ .sec { padding:62px 0; } .grid-services { grid-template-columns:1fr; } .grid-include { grid-template-columns:1fr; } }