:root{
  --primary: #1e40af;
  --primary-600:#1e40af;
  --primary-500:#3b82f6;
  --primary-400:#60a5fa;
  --primary-300:#93c5fd;
  --primary-200:#bfdbfe;

  --secondary:#64748b;
  --muted:#94a3b8;

  --bg:#ffffff;
  --surface:#f8fafc;
  --surface-2:#f1f5f9;

  --text:#0f172a;
  --text-on-primary:#ffffff;

  --footer-bg:#0f172a;
  --footer-text:#e2e8f0;

  --accent-start:#7c3aed;
  --accent-end:#1e40af;

  --radius-2:16px;
  --radius-3:20px;
  --radius-4:24px;

  --shadow-soft:0 10px 30px -10px rgba(15, 23, 42, 0.15);
  --shadow-card:0 16px 40px -16px rgba(2, 6, 23, 0.22), 0 4px 14px -8px rgba(2, 6, 23, 0.15);
  --shadow-subtle:0 8px 24px -10px rgba(2, 6, 23, 0.14);

  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:1.75rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter","Quicksand","system-ui","-apple-system","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--primary-600);text-decoration:none}
a:hover{color:var(--primary-500)}
a:focus{outline:2px solid var(--primary-400);outline-offset:3px;border-radius:8px}
button:focus, input:focus, textarea:focus, select:focus{outline:2px solid var(--primary-400);outline-offset:3px}

h1,h2,h3,h4,h5,h6{
  color:var(--text);
  line-height:1.25;
  letter-spacing:0.01em;
  margin:0 0 var(--space-4) 0;
  font-weight:700;
}

h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.25rem,2.5vw,1.75rem)}
h4{font-size:clamp(1.125rem,2vw,1.5rem)}

p{margin:0 0 var(--space-4) 0}
ul,ol{margin:0 0 var(--space-4) 0;padding-left:1.2rem}
strong{font-weight:700}
small{font-size:0.875rem;color:var(--muted)}

.section{
  padding:var(--space-16) 0;
}
.section-alt{
  background:var(--surface);
}
.section-muted{
  background:var(--surface-2);
}

.container{
  width:min(1200px, 92%);
  margin:0 auto;
}

.grid{
  display:grid;
  gap:var(--space-6);
}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.98));
  border:1px solid rgba(2,6,23,0.06);
  border-radius:var(--radius-4);
  box-shadow:var(--shadow-card);
  padding:var(--space-6);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px -24px rgba(2,6,23,0.35);
  border-color:rgba(2,6,23,0.10);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 120% at 0% 0%, rgba(30,64,175,0.07) 0%, transparent 50%), 
             radial-gradient(100% 100% at 100% 100%, rgba(124,58,237,0.06) 0%, transparent 50%);
  opacity:.9;
}

.badge{
  display:inline-block;
  padding:0.35rem 0.75rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.875rem;
  background:linear-gradient(135deg, var(--primary-500), var(--primary-400));
  color:var(--text-on-primary);
  box-shadow:var(--shadow-subtle);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.8rem 1.25rem;
  border-radius:var(--radius-3);
  border:0;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.02em;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  will-change:transform;
}
.btn-primary{
  color:var(--text-on-primary);
  background:linear-gradient(135deg, var(--accent-start), var(--accent-end));
  box-shadow:0 12px 28px -10px rgba(124,58,237,0.45), 0 8px 16px -10px rgba(30,64,175,0.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 18px 36px -16px rgba(124,58,237,0.55), 0 12px 24px -16px rgba(30,64,175,0.45);
}
.btn-primary:active{
  transform:translateY(0);
  filter:brightness(0.98);
}
.btn-outline{
  background:transparent;
  color:var(--primary-600);
  border:1.5px solid var(--primary-500);
}
.btn-outline:hover{
  background:linear-gradient(135deg, rgba(59,130,246,0.06), rgba(124,58,237,0.06));
  border-color:var(--primary-400);
  transform:translateY(-1px);
}

.header{
  position:relative;
  padding:var(--space-16) 0 var(--space-12);
  background:
    radial-gradient(1000px 400px at 10% -10%, rgba(124,58,237,0.15) 0%, transparent 60%),
    radial-gradient(800px 360px at 90% -20%, rgba(30,64,175,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  overflow:hidden;
}
.header .hero-title{
  font-size:clamp(2.25rem, 5vw, 4rem);
  line-height:1.1;
  margin-bottom:var(--space-4);
  letter-spacing:-0.02em;
}
.header .lead{
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  color:#334155;
  max-width:60ch;
}

.header .decor{
  position:absolute;
  inset:auto -10% -30% -10%;
  height:300px;
  background:
    radial-gradient(closest-side, rgba(124,58,237,0.18), transparent 70%) 10% 40%/220px 220px no-repeat,
    radial-gradient(closest-side, rgba(30,64,175,0.18), transparent 70%) 90% 30%/260px 260px no-repeat,
    radial-gradient(closest-side, rgba(59,130,246,0.14), transparent 70%) 50% 70%/300px 300px no-repeat;
  filter:blur(10px);
  pointer-events:none;
}

.footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  padding:var(--space-12) 0 var(--space-8);
  margin-top:var(--space-16);
}
.footer a{color:#cbd5e1}
.footer a:hover{color:#ffffff}
.footer .brand{
  font-weight:800;
  font-size:1.125rem;
  color:#ffffff;
  letter-spacing:0.01em;
}

.form{
  display:grid;
  gap:var(--space-4);
}
.form-row{
  display:grid;
  gap:var(--space-4);
}
@media (min-width: 640px){
  .form-row-2{grid-template-columns:1fr 1fr}
}
.label{
  font-weight:600;
  font-size:0.95rem;
  color:#334155;
  margin-bottom:0.35rem;
}
.input, .textarea, .select{
  width:100%;
  border-radius:var(--radius-2);
  border:1.5px solid #e2e8f0;
  background:#ffffff;
  padding:0.8rem 1rem;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 2px 0 rgba(2,6,23,0.02) inset;
}
.input:hover, .textarea:hover, .select:hover{border-color:#cbd5e1}
.input:focus, .textarea:focus, .select:focus{
  border-color:var(--primary-400);
  box-shadow:0 0 0 4px rgba(59,130,246,0.15);
  background:linear-gradient(180deg, #ffffff, #fbfdff);
}
.textarea{min-height:120px;resize:vertical}

.kicker{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
  color:var(--secondary);
}

.split{
  display:grid;
  gap:var(--space-8);
  align-items:center;
}
@media (min-width: 900px){
  .split-2{grid-template-columns:1.2fr 1fr}
}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(2,6,23,0.08), transparent);
  margin:var(--space-8) 0;
}

.quote{
  position:relative;
  padding:var(--space-6);
  border-radius:var(--radius-3);
  background:linear-gradient(135deg, rgba(59,130,246,0.10), rgba(124,58,237,0.08));
  border:1px solid rgba(2,6,23,0.08);
}
.quote::before{
  content:"“";
  position:absolute;
  top:-10px; left:12px;
  font-size:3rem;
  color:rgba(30,64,175,0.25);
  line-height:1;
}

.code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.9rem;
  background:#0b1220;
  color:#e2e8f0;
  border-radius:var(--radius-2);
  padding:0.6rem 0.8rem;
  overflow:auto;
}

.nav{
  display:flex;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.nav a{
  padding:0.5rem 0.9rem;
  border-radius:999px;
  font-weight:600;
  color:#1f2937;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(2,6,23,0.08);
  backdrop-filter:blur(6px);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.nav a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.85);
  border-color:rgba(2,6,23,0.12);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table th{
  text-align:left;
  font-weight:700;
  color:#334155;
  padding:0.6rem 0.8rem;
}
.table td{
  padding:0.8rem;
  background:#ffffff;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
}
.table tr td:first-child{border-left:1px solid #e2e8f0;border-top-left-radius:var(--radius-2);border-bottom-left-radius:var(--radius-2)}
.table tr td:last-child{border-right:1px solid #e2e8f0;border-top-right-radius:var(--radius-2);border-bottom-right-radius:var(--radius-2)}

.mono{font-family:ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.tag{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.35rem 0.6rem;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(59,130,246,0.08), rgba(124,58,237,0.08));
  color:#1e293b;
  border:1px solid rgba(2,6,23,0.08);
  font-weight:600;
  font-size:0.85rem;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media (max-width: 640px){
  .section{padding:var(--space-12) 0}
  .header{padding:var(--space-12) 0 var(--space-8)}
}


/* 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;
    }
}