/* RESET & BASELINE ================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,nav,output,ruby,section,summary,time,mark,audio,video {
  margin:0; padding:0; border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  box-sizing:border-box;
}
html { 
  scroll-behavior: smooth; 
}
body { line-height:1; font-family:'Roboto', Arial, sans-serif; }
ol, ul { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; border:0; }
button { font-family:inherit; background:none; border:none; cursor:pointer; }
:focus { outline:2px solid #E3A857; outline-offset:1px; }

/* FONT IMPORT & ROOT VARS ========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500;700&display=swap');
:root {
  --brand-primary: #23426C;
  --brand-secondary: #F7F9FB;
  --brand-accent: #E3A857;
  --brand-bg-dark: #101629;
  --brand-card-bg: #20293B;
  --neon-blue: #54B6FF;
  --neon-purple: #A87FFF;
  --neon-pink: #FA52B6;
  --neutral-900: #101319;
  --neutral-700: #2B3646;
  --neutral-200: #E7EBF0;
  --neutral-100: #F7F9FB;
  --header-gradient: linear-gradient(90deg,#23426C 30%,#101629 90%);
  --section-gradient: linear-gradient(120deg,#23426C 40%,#101629 100%);
  --box-shadow-xl: 0 8px 36px 0 rgba(24,35,61,0.27);
  --transition: 0.23s cubic-bezier(.45,.04,.39,1.04);
}

/* LAYOUT CONTAINERS & SECTION SPACING ============ */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  background: var(--section-gradient);
  border-radius: 20px;
  box-shadow: var(--box-shadow-xl);
  gap: 32px;
  position: relative;
}
@media (max-width: 768px) {
  .section {
    padding: 28px 8px;
    gap: 18px;
  }
}

/* TYPOGRAPHY ====================================== */
h1, .h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 900;
  font-size: 2.75rem;
  color: #fff;
  text-shadow: 0 4px 20px #23426C40;
  margin-bottom: 18px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
h2, .h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--brand-accent);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
h3, .h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--neon-blue);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
p, .subtitle, li, ul, ol, blockquote, small {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1.08rem;
  color: #e8eefd;
  margin-bottom: 13px;
  line-height: 1.6;
}
.subtitle {
  font-size: 1.25rem;
  color: var(--neon-blue);
}
strong, b { color: var(--brand-accent); font-weight:700; }

blockquote {
  padding: 18px 32px;
  border-left: 4px solid var(--brand-accent);
  background: #191e2f;
  color: #F0EFFF;
  font-size: 1.15rem;
  border-radius: 8px;
  margin-bottom: 15px;
  font-style: italic;
}

@media (max-width: 768px) {
  h1, .h1 { font-size:2rem; }
  h2, .h2 { font-size:1.3rem; }
}

/* NAVIGATION & HEADER ============================= */
header {
  width: 100%;
  background: var(--header-gradient);
  box-shadow: 0 2px 14px #121E3D36;
  position: relative;
  z-index: 100;
  min-height: 80px;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.main-nav .logo img {
  height: 44px;
  width: auto;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
}
.main-nav ul li a, .footer-nav a {
  color: #D7E4FB;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  position: relative;
  transition: color var(--transition);
}
.main-nav ul li a:hover,
.main-nav ul li a:focus {
  color: var(--brand-accent);
  text-shadow:0 0 4px var(--brand-accent);
}
.cta-primary {
  display: inline-flex;
  align-items: center;
  background: var(--brand-accent);
  color: #21253B;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: bold;
  font-size: 1.11rem;
  letter-spacing: 0.05em;
  padding: 13px 30px;
  border-radius: 32px;
  margin-left: 23px;
  box-shadow: 0 2px 8px #E3A85733;
  border: 2px solid transparent;
  transition: background var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition);
  position: relative;
}
.cta-primary:hover, .cta-primary:focus {
  background: #fff5e5;
  color: var(--brand-primary);
  border: 2px solid var(--brand-accent);
  text-shadow:0 0 4px var(--brand-accent);
  box-shadow: 0 0 12px 3px #e3a85798;
}

/* ---- Mobile Navigation ---- */
.mobile-menu-toggle {
  display: none;
  background: none;
  color: var(--brand-accent);
  font-size: 2.1rem;
  border: none;
  margin-left:18px;
  cursor: pointer;
  z-index:201;
  transition: color var(--transition);
}
.mobile-menu-toggle:hover { color: var(--neon-blue); }

.mobile-menu {
  display: none;
}
@media (max-width:990px) {
  .main-nav ul,
  .main-nav .cta-primary {
    display: none;
  }
  .mobile-menu-toggle {
    display: block;
    position: absolute;
    top: 17px; right: 28px;
  }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #151A29ED;
    z-index: 5002;
    transform: translateX(-100%);
    transition: transform 0.40s cubic-bezier(.86,0,.07,1);
    box-shadow: 0 2px 36px #000c1b80;
    padding:0;
  }
  .mobile-menu.open {
    transform: translateX(0);
    box-shadow: 0 8px 48px #122b5fee;
  }
  .mobile-menu-close {
    color: var(--brand-accent);
    font-size: 2.1rem;
    margin: 18px 0 0 22px;
    align-self: flex-end;
    background:none;
    transition: color var(--transition);
    z-index: 5100;
  }
  .mobile-menu-close:hover, .mobile-menu-close:focus {
    color: var(--neon-pink);
  }
  .mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
    width: 100%;
    align-items: flex-start;
    padding-left: 18px;
    z-index:5101;
  }
  .mobile-nav a {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 1.45rem;
    transition: color var(--transition);
    padding: 8px 0;
    border-radius: 2px;
    min-width: 78vw;
  }
  .mobile-nav a:hover,
  .mobile-nav a:focus {
    color: var(--brand-accent);
    text-shadow:0 0 6px var(--neon-blue);
  }
}

/* MAIN, HERO & SECTION STRUCTURE ================== */
main {
  background: var(--brand-bg-dark);
  min-height: 86vh;
  padding-bottom: 46px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .content-wrapper {
    gap: 13px;
  }
}

/* FLEX LAYOUTS – ENFORCED ========================= */
.card-container {
  display: flex; flex-wrap: wrap; gap: 24px;
}
.card {
  margin-bottom: 20px;
  position: relative;
  background: var(--card-bg, #1a1e2c);
  border-radius: 15px;
  box-shadow: 0 4px 26px #23426C24;
  padding: 32px 22px;
  color: #e8eefd;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  border:1.5px solid #22386044;
  min-width: 260px;
  flex:1 1 280px;
}
.card:hover, .card:focus-within {
  box-shadow: 0 0 32px 0 var(--neon-blue), 0 8px 36px #1a263f7e;
  transform: translateY(-4px) scale(1.025);
  border-color: var(--neon-blue);
  z-index:30;
}
.content-grid {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
}
.text-image-section {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
@media (max-width: 768px) {
  .text-image-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* LISTS (Features, Categories, Steps, Services, Price) */
.features-list, .categories-list, .services-list, .services-summary, .price-list, .steps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.features-list li, .categories-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #19203D8D;
  border-radius:12px;
  padding: 22px 18px 20px 20px;
  min-width: 220px;
  box-shadow: 0 2px 10px #22295d2d;
  color: #FCFCFF;
  font-weight:500;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.features-list li:hover, .categories-list li:hover {
  box-shadow: 0 0 10px 2px var(--neon-blue);
  border-color: var(--neon-blue);
}
.features-list img, .categories-list img {
  width:38px; height:38px;
  margin-right: 7px;
}
.services-summary li, .services-list li, .price-list li {
  margin-bottom: 10px;
  padding: 16px 0;
  border-bottom: 1px solid #28344B;
  color: #f4f6ff;
}
.services-list li:last-child, .services-summary li:last-child, .price-list li:last-child {
  border-bottom: none;
}
.services-list .price, .price-list .checkmark {
  margin-left: 12px;
  color: var(--brand-accent);
  font-weight: 700;
}

/* GALLERY NOTE, PRIVACY NOTE ===================== */
.gallery-note, .privacy-note {
  color: #EDBA5B;
  font-size: 1rem;
  background: #33323d36;
  padding: 8px 15px;
  border-radius:8px;
  margin-top:12px;
}

/* TESTIMONIALS =================================== */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #FFF;
  border-radius: 17px;
  box-shadow: 0 2px 18px #23426C26, 0 0 0 2px #A87FFF0A;
  margin-bottom: 30px;
  color: #222C38;
  min-width: 230px;
  max-width: 660px;
  width: 100%;
  margin-left:auto; margin-right:auto;
  position:relative;
  z-index:2;
}
.testimonial-card strong {
  color: var(--brand-primary);
}
.testimonial-card .star-rating {
  color: var(--neon-pink);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  font-weight: bold;
}
.testimonial-card p {
  color: #222C38;
  font-size: 1.07rem;
}

/* BUTTONS & INTERACTIONS ========================= */
button, .cta-primary {
  cursor:pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
button:active, .cta-primary:active {
  transform: scale(0.98);
}
a.cta-primary svg {
  margin-left: 8px;
}

/* FAQ, LISTS, STEPS ============================== */
.faq-preview, .text-section {
  background: #1a2235;
  border-radius: 10px;
  padding: 18px 20px 10px 21px;
  margin-bottom:13px;
  color: #f6fafc;
}
.steps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  counter-reset: step-counter;
  margin-top:12px;
}
.steps-list li {
  position: relative;
  padding-left: 38px;
  min-width: 210px;
  font-weight: 500;
  color: #94c6f7;
}
.steps-list li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0; top: 2px;
  width: 28px; height: 28px;
  background: var(--brand-accent);
  color: #1A212D;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.15rem;
  box-shadow: 0 0 6px 0 #E3A85799;
}

/* FOOTER ========================================= */
footer {
  background: #181F33;
  color: #D7E4FB;
  box-shadow: 0 -5px 32px #10162917;
  width: 100%;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  margin-top: 48px;
}
.footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 50px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 18px 20px 18px;
  font-size: 1.01rem;
}
.footer-logo img {
  height:48px;
  width:auto;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.footer-contact {
  color: #d7e4fb;
  margin-bottom: 8px;
}
.footer-contact strong {
  color: var(--brand-accent);
  font-weight:600;
}
.footer-nav a {
  transition: color var(--transition);
}
.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--brand-accent);
}
.footer-social {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 8px;
}
.footer-social img {
  width:32px;height:32px;filter:drop-shadow(0 2px 7px #222b59af);
}
.footer-legal {
  border-top: 1.5px solid #39405e;
  padding: 10px 0 8px 0;
  text-align:center;
  font-size:0.95rem;
  color:#b7c4ec;
  background: #101629;
}

@media (max-width: 850px) {
  .footer-main {
    flex-direction: column;
    gap: 18px;
    align-items:flex-start;
  }
}

/* COOKIE CONSENT BANNER ========================= */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  color: #253259;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 -4px 24px #19203D44;
  padding: 20px 18px 18px 18px;
  gap: 16px;
  transition: transform 0.3s cubic-bezier(.76,0,.28,1);
  transform: translateY(0);
}
.cookie-banner.hide {
  transform: translateY(120%);
}
.cookie-banner-text {
  font-size:1.12rem;
  color: #253259;
  margin-bottom: 6px;
  text-align: center;
}
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top:8px;
}
.cookie-btn {
  background: var(--brand-primary);
  color: #fff;
  font-size: 1rem;
  border: none;
  border-radius: 18px;
  padding: 10px 25px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: bold;
  box-shadow: 0 2px 7px #23426C2a;
  margin:0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.cookie-btn:hover,.cookie-btn:focus { background: var(--brand-accent); color:#21253B; }
.cookie-reject {
  background: #FA52B6;
  color: #fff;
}
.cookie-reject:hover,.cookie-reject:focus { background: var(--brand-primary); color:#fff; }
.cookie-settings {
  background: #F6F8FF;
  color: var(--brand-primary);
}
.cookie-settings:hover, .cookie-settings:focus { background: #E3A857; color:#21253B; }

/* Cookie Modal =================== */
.cookie-modal-overlay {
  position: fixed;
  top:0; left:0; width:100vw; height:100vh;
  background: rgba(26,31,44,0.84);
  z-index: 10101;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.23s;
}
.cookie-modal {
  background:#fff;
  color: #111a2f;
  border-radius:14px;
  max-width:410px;
  min-width:70vw;
  max-width:90vw;
  box-shadow: 0 8px 34px #19203D66;
  padding:34px 20px 28px 24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  z-index:10102;
  border:2px solid var(--brand-accent);
  position:relative;
  animation: modalIn .28s var(--transition);
}
@keyframes modalIn {
  0% { transform:translateY(54px); opacity:0; }
  85% { opacity:1; }
  100% { transform:translateY(0); opacity:1; }
}
.cookie-modal-close {
  position:absolute; top:10px; right:13px;
  font-size: 1.5rem;
  color:var(--brand-accent);
  background:none;
  border:none;
  cursor:pointer;
  transition: color var(--transition);
}
.cookie-modal-close:hover { color: var(--neon-blue); }
.cookie-categories {
  display:flex; flex-direction:column; gap:13px;
}
.cookie-category {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Roboto', Arial, sans-serif;
  font-size:1.01rem;
  padding:6px 0;
}
.cookie-category input[type='checkbox'] {
  width:22px;height:22px;
  accent-color: var(--brand-accent);
}

/* MODAL ANIMATION ===================== */
@media (max-width:570px) {
  .cookie-modal { padding:17px 4vw 14px 7vw; }
}

/* RESPONSIVE ========================= */
@media (max-width: 950px) {
  .main-nav { padding: 9px 0; }
  .container { max-width: 97vw;}
}
@media (max-width: 650px) {
  .section { border-radius:12px; margin-bottom:24px; }
  .card { padding: 17px 12px; border-radius:9px; }
}

/* MISC: Animations & Microinteractions === */
.card, .btn, .cta-primary, .features-list li, .testimonial-card {
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition), background var(--transition), color var(--transition);
}
.features-list li:active, .testimonial-card:active, .card:active {
  transform: scale(.985);
  box-shadow: 0 0 18px 2px var(--neon-pink);
}
.content-wrapper > * { width: 100%; }

/* Section Colors & Neon Accents ========== */
.section:nth-child(even) { background: #20293b; }
.section:nth-child(odd) { background: #1d2438; }
@media (max-width: 600px) {
 .section { padding: 11px 3vw; }
}

/* Neon-text utility (for accents) ======== */
.neon {
  color: var(--neon-blue)!important;
  text-shadow:0 0 8px #54B6FF80;
}

/* Utilities ============================= */
.mt-3 { margin-top:30px!important; }
.mb-2 { margin-bottom:20px!important; }
.text-center { text-align:center!important; }

/* Hide visually but remain accessible ===== */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* Remove number input arrows for style ===== */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin:0; }
input[type=number] { -moz-appearance: textfield; }


/* END OF FILE */