@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --primary:#2563EB;
  --primary-contrast:#ffffff;
  --secondary:#059669;
  --background:#F8FAFC;
  --surface:#ffffff;
  --surface-2:#F1F5F9;
  --surface-3:#ECFDF5;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --footer:#1E293B;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:9999px;

  --shadow-xs:0 1px 2px rgba(2,8,23,0.05);
  --shadow-sm:0 1px 3px rgba(2,8,23,0.08), 0 1px 2px rgba(2,8,23,0.04);
  --shadow-md:0 6px 20px rgba(2,8,23,0.10);
  --shadow-lg:0 20px 40px rgba(2,8,23,0.16);

  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;

  --transition:all .18s ease;
}

*{box-sizing:border-box}

html{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility}
body{margin:0; background:var(--background); color:var(--text)}

img,svg,video,canvas{max-width:100%; height:auto}
a{color:var(--primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; transition:var(--transition)}
a:hover{color:#1d4ed8}
a:focus{outline:2px solid var(--primary); outline-offset:2px; border-radius:2px}

h1,h2,h3,h4,h5,h6{font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", Times, serif; font-weight:700; line-height:1.25; letter-spacing:.01em; margin:0 0 var(--space-sm); color:#0b1220}
h1{font-size:clamp(2.2rem, 5vw, 3.5rem)}
h2{font-size:clamp(1.8rem, 4vw, 2.4rem)}
h3{font-size:clamp(1.4rem, 3vw, 1.8rem)}
p{margin:0 0 var(--space-sm); color:var(--text)}

ul,ol{margin:0 0 var(--space-sm); padding-left:1.25rem}
li{margin-bottom:.5rem}

.section{background:var(--surface)}
.section.alt{background:var(--surface-2)}
.section.alt-2{background:var(--surface-3)}
.container{max-width:1200px; margin-inline:auto; padding-inline:var(--space-sm)}
.header{padding-block:calc(var(--space-sm) + 4px)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm)}
.brand{font-family:"Playfair Display", ui-serif, Georgia, serif; font-weight:700; font-size:1.5rem; letter-spacing:.02em; text-decoration:none; color:#0b1220}
.nav{list-style:none; padding:0; margin:0; display:flex; gap:var(--space-sm)}
.nav a{padding:.5rem .75rem; border-radius:8px; text-decoration:none; color:var(--text)}
.nav a:hover{background:var(--surface-2); color:#0b1220}
.nav a.active{color:var(--primary)}
.header-cta{margin-left:auto}

.section{padding-block:var(--space-xl)}
.section-sm{padding-block:var(--space-lg)}

h1.section-title{margin-bottom:var(--space-md)}
p.section-lead{color:var(--muted); font-size:1.125rem; max-width:70ch}

.stack{display:flex; flex-direction:column; gap:var(--space-sm)}
.cluster{display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center}
.center{text-align:center}
.spacer-xxl{height:var(--space-xl)}
.spacer-xl{height:var(--space-lg)}
.spacer-md{height:var(--space-md)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:var(--radius-pill); padding:.75rem 1.25rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:var(--transition); line-height:1; font-size:1rem}
.btn-primary{background:var(--primary); color:var(--primary-contrast); border-color:transparent}
.btn-primary:hover{background:#1d4ed8; transform:translateY(-1px)}
.btn-secondary{background:var(--surface); color:#0b1220; border-color:var(--border)}
.btn-secondary:hover{border-color:#cbd5e1; box-shadow:var(--shadow-xs)}
.btn-ghost{background:transparent; color:var(--primary); border-color:transparent}
.btn-ghost:hover{background:rgba(37,99,235,0.08)}
.btn-lg{padding:1rem 1.5rem; font-size:1.125rem}
.btn:focus{outline:2px solid transparent; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--primary)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); padding:var(--space-md); transition:var(--transition)}
.card:hover{box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.25rem}
.card .muted{color:var(--muted); font-size:.95rem}

.link-underline{display:inline-block; position:relative; text-decoration:none; color:var(--text)}
.link-underline::after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .18s ease}
.link-underline:hover{color:#0b1220}
.link-underline:hover::after{transform:scaleX(1)}

input,select,textarea{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.75rem .9rem; font:inherit; transition:var(--transition); outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.15)}
input::placeholder,textarea::placeholder{color:#94a3b8}
.form .row{display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-bottom:var(--space-sm)}
.form .row > .col{flex:1 1 280px}
label{font-weight:600; font-size:.95rem; margin-bottom:.35rem; display:block}

.testimonial{padding:var(--space-md); background:var(--surface); border-left:4px solid var(--primary); border-radius:var(--radius-md); box-shadow:var(--shadow-xs)}
.testimonial p{font-size:1.125rem}

.hr{height:1px; background:var(--border); border:0; margin-block:var(--space-lg)}

.footer{background:var(--footer); color:#E2E8F0; padding-block:var(--space-lg)}
.footer-inner{max-width:1200px; margin-inline:auto; padding-inline:var(--space-sm)}
.footer .brand{color:#ffffff}
.footer a{color:#cbd5e1; text-decoration:none}
.footer a:hover{color:#ffffff; text-decoration:underline}

.kicker{display:inline-block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:.5rem}

@media (max-width: 768px){
  .header-inner{flex-wrap:wrap}
  .nav{gap:.25rem}
  .nav a{padding:.4rem .6rem}
  .cluster{gap:.6rem}
}

@media (max-width: 480px){
  .btn{padding:.7rem 1rem}
  .section{padding-block:56px}
}


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}