:root{
  --orange:#ff7a00;
  --orange-2:#ff9a3d;
  --blue:#1463ff;
  --blue-2:#0b3d91;
  --paper:#ffffff;
  --ring:rgba(20,99,255,.35);
  --shadow:rgba(10,20,40,.25);
  --radius:18px;

  /* navbar */
  --nav-bg:rgba(255,255,255,0.08);
  --nav-border:rgba(255,255,255,0.18);
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--paper);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 35%, var(--orange) 100%);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Subtle blobs */
.blob{ position:fixed; inset:auto; z-index:-1; filter:blur(40px); opacity:.25; pointer-events:none; animation:float 14s ease-in-out infinite; will-change:transform,opacity }
.blob.b1{ width:420px; height:420px; left:-80px; top:-80px; background:conic-gradient(from 0deg at 50% 50%, var(--orange), transparent) }
.blob.b2{ width:520px; height:520px; right:-120px; top:10vh; background:conic-gradient(from 180deg at 50% 50%, var(--blue), transparent); animation-duration:18s; animation-delay:.6s }
.blob.b3{ width:400px; height:400px; left:10vw; bottom:-120px; background:conic-gradient(from 90deg at 50% 50%, var(--orange-2), transparent); animation-duration:22s; animation-delay:1.2s }
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); opacity:.22 }
  50%{ transform:translate3d(0,-10px,0) rotate(2deg); opacity:.30 }
}

/* Layout container */
.container{ max-width:980px; margin-inline:auto; padding:48px 20px 96px }

/* --- Navbar (glass, sticky, responsive) --- */
.site-header{
  position:sticky; top:12px; z-index:1000;
  max-width:980px; margin:0 auto 24px; padding:10px 14px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  border:1px solid var(--nav-border); border-radius:14px;
  box-shadow:0 10px 30px rgba(10,20,60,0.25);
}
.site-header .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:800 }
.logo{ width:42px; height:42px; border-radius:12px; background:conic-gradient(from 220deg at 30% 30%, var(--orange), var(--blue) 40%, var(--blue-2) 70%, var(--orange-2)); box-shadow:0 8px 30px var(--shadow), inset 0 0 0 2px rgba(255,255,255,.15) }
.brand .brand-text{ margin:0; font-weight:800; letter-spacing:.2px; line-height:1; background:linear-gradient(90deg, #fff, #e7f0ff 45%, #ffe6d1 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:clamp(20px,3.6vw,28px) }

.site-header .nav ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.site-header .nav a{
  display:inline-block; padding:8px 12px; border-radius:10px;
  text-decoration:none; color:#fff; font-weight:600; opacity:.95;
  transition:opacity .15s, background .15s;
}
.site-header .nav a:hover{ background:rgba(255,255,255,.12); opacity:1 }
.site-header .nav a[aria-current="page"]{ background:rgba(255,255,255,.18) }

.site-header .btn-cta{
  padding:9px 14px; border-radius:999px; font-weight:700; text-decoration:none;
  background:linear-gradient(135deg,#ffb24d,#ff6a3d); color:#111;
  box-shadow:0 8px 24px rgba(255,122,64,0.35);
}

/* Mobile nav */
.site-header .nav-toggle{
  display:none; background:transparent; border:0; color:#fff;
  font-size:1.2rem; line-height:1; padding:8px 10px; border-radius:8px;
}
.site-header .nav-toggle:hover{ background:rgba(255,255,255,.12) }
@media (max-width:760px){
  .site-header .nav-toggle{ display:inline-block }
  .site-header .btn-cta{ display:none }
  .site-header{ gap:10px }

  .site-header .nav{
    position:absolute; left:12px; right:12px; top:calc(12px + 52px);
    background:var(--nav-bg); backdrop-filter:blur(10px);
    border:1px solid var(--nav-border); border-radius:12px;
    padding:10px; display:none;
  }
  .site-header .nav.open{ display:block }
  .site-header .nav ul{ flex-direction:column; gap:6px }
  .site-header .nav a{ display:block }
}

/* Headings / text */
h1{
  margin:0; font-weight:800; letter-spacing:.2px; line-height:1;
  background:linear-gradient(90deg,#fff,#e7f0ff 45%,#ffe6d1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(20px,3.6vw,28px)
}
h2{ margin-top:1.4rem; font-size:1.2rem; font-weight:700 }
h3{ margin-top:1.0rem; font-size:1.05rem; font-weight:700 }
p,li,dd{ color:#f3f6ff; opacity:.92; font-size:15px; line-height:1.6 }
a{ color:#fff; text-decoration:underline }
ul{ margin:0 0 0 1.1rem }
.badge{ display:inline-block; padding:.1rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.35); font-size:12px; opacity:.9 }

/* Panels / cards */
.panel{
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px) saturate(120%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  box-shadow:0 20px 60px var(--shadow);
  overflow:hidden;
  transform:translateY(6px);
  opacity:0;
  animation:in 540ms cubic-bezier(.2,.8,.2,1) forwards;
  padding:22px;
}
.panel:nth-child(2){ animation-delay:90ms }
@keyframes in{
  from{ opacity:0; transform:translateY(12px) scale(.98) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}
.panel .body{ padding:22px }
/* Unified panel h2 styling (centered) */
.panel h2{
  margin:1.5rem 0 1rem 0;
  font-size:clamp(18px, 2.5vw, 20px);
  font-weight:700;
  color:#e7f0ff;
  opacity:.95;
  text-align:center;
}
.lead{ color:#f3f6ff; opacity:.92; margin:.25rem 0 1.25rem; font-size:15px }

/* Forms */
.grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
@media (max-width:700px){ .grid{ grid-template-columns:1fr } }

label{ font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:#e9f0ff; opacity:.85; display:block; margin:2px 0 6px }
input[type="text"], input[type="number"], input[type="color"], select{
  width:100%; padding:12px 13px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:rgba(8,16,32,.25); color:#fff; outline:none;
  transition: box-shadow .25s, border-color .25s, transform .06s ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="color"]:focus, select:focus{
  border-color:rgba(255,255,255,.5); box-shadow:0 0 0 8px var(--ring);
}
input[type="color"]{ padding:6px; height:44px }
.row{ display:flex; gap:12px; flex-wrap:wrap }
.row > *{ flex:1 1 180px }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
button{
  appearance:none; border:0; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:700;
  color:#0b1e48; background:linear-gradient(180deg,#fff,#eaf1ff);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
  box-shadow:0 10px 24px rgba(12,24,48,.20);
}
button:hover{ transform:translateY(-1px) }
button:active{ transform:translateY(1px) scale(.98) }
.btn-accent{ background:linear-gradient(135deg,#ffd8b0,#fff 35%,#e7f0ff 100%); color:#0a173a }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); box-shadow:none }

/* Essential only button with better contrast */
.btn-ghost.essential-only{
  background:rgba(255,255,255,0.25); color:#0b1e48; border:2px solid rgba(255,255,255,0.4);
  font-weight:700; text-shadow:0 1px 2px rgba(255,255,255,0.8);
}
.btn-ghost.essential-only:hover{
  background:rgba(255,255,255,0.35); border-color:rgba(255,255,255,0.6);
  transform:translateY(-1px);
  box-shadow:0 4px 15px rgba(255,255,255,0.2);
}
.note{ font-size:12px; color:#e8efff; opacity:.85 }

/* QR preview */
.qr-wrap{
  display:grid; place-items:center; padding:22px; min-height:360px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(600px 300px at 50% 0%, rgba(255,255,255,.10), transparent 60%);
}
.qr-card{ padding:16px 16px 18px; background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(7,16,40,.25); border:1px solid #e9eefb; transform-origin:center }
.qr-img{ display:block; max-width:100%; height:auto; border-radius:10px; box-shadow: inset 0 0 0 8px #fff, 0 0 0 1px #dfe8fb }
.qr-actions{ display:flex; gap:10px; justify-content:center; margin-top:12px }

/* Footer */
footer{ margin-top:28px; text-align:center; color:#e8f0ff; opacity:.9; font-size:12px }
.footer-links{ margin-top:8px }
.footer-links a{ color:#e8f0ff; opacity:.9; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.45) }
.footer-links a:hover{ opacity:1; border-bottom-color:#fff }
/* Cookie settings link specific styling */
.footer-links a[href="#"]{ cursor:pointer }

/* Cookie settings trigger (if used as a button) */
.cookie-settings-trigger{
  background:linear-gradient(135deg, var(--orange), var(--orange-2)) !important;
  color:#fff !important; cursor:pointer; position:relative; overflow:hidden;
}
.cookie-settings-trigger::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left .5s;
}
.cookie-settings-trigger:hover::before{ left:100% }
.cookie-settings-trigger:hover{
  transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,122,0,0.4);
}

/* Cookie dialog */
.cookie-dialog{
  position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:2000;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.cookie-dialog.show{ opacity:1; pointer-events:auto }
.cookie-dialog-content{
  background:rgba(255,255,255,0.95); color:#1a1a1a; border-radius:20px; padding:32px;
  max-width:500px; width:calc(100% - 40px); box-shadow:0 25px 60px rgba(0,0,0,0.3);
  backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.2);
}
.cookie-dialog h3{ margin:0 0 16px 0; font-size:24px; font-weight:700; color:var(--blue-2) }
.cookie-dialog p{ margin:0 0 24px 0; font-size:16px; line-height:1.6; color:#333 }
.cookie-options{ margin:0 0 24px 0 }
.cookie-option{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:16px;
  background:rgba(255,255,255,0.8); border-radius:12px; border:1px solid rgba(0,0,0,0.1);
}
.cookie-option input[type="checkbox"]{ margin-top:2px; width:18px; height:18px; accent-color:var(--orange) }
.cookie-option label{ font-size:14px; line-height:1.5; color:#333; cursor:pointer }
.cookie-option label strong{ color:var(--blue-2) }

.cookie-dialog .cookie-actions{ display:flex; gap:12px; margin-bottom:16px }
.cookie-dialog .cookie-actions button{ flex:1; padding:14px 20px; font-size:16px; font-weight:600 }
.cookie-note{ text-align:center; margin:0; color:#666; font-size:13px }

/* Cookie bar */
.cookiebar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(10px);
  width:min(920px, calc(100% - 28px));
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:14px; padding:14px 16px; box-shadow:0 18px 50px rgba(7,16,40,.28);
  backdrop-filter:blur(10px) saturate(120%); display:flex; gap:12px; align-items:center; justify-content:space-between;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.cookiebar.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto }
.cookiebar p{ margin:0; font-size:13px; line-height:1.4 }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap }
.cookie-actions .btn-ghost{ border-color:rgba(255,255,255,.35) }

/* Hero section for main page */
.hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:stretch }
@media (max-width:900px){ .hero{ grid-template-columns:1fr } }

/* Blog list symmetry */
.blog-list{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:10px }
.blog-post h2{ text-align:center; margin-bottom:10px }
.blog-post p{ text-align:center; max-width:68ch; margin-inline:auto }

/* Center the intro (first card) content when used */
.hero .panel .body{ text-align:center }
.hero .panel .body h1{ margin-bottom:10px }
.hero .panel .body p{ max-width:60ch; margin:0 auto }

/* Buy me a coffee floating button (optional; hide if using header CTA) */
.coffee-button{
  position:fixed; top:20px; right:20px; width:auto; height:60px;
  background:linear-gradient(135deg, var(--orange), var(--orange-2));
  color:#fff; text-decoration:none; border-radius:30px; display:flex; align-items:center; justify-content:center;
  gap:8px; padding:0 20px; font-size:16px; font-weight:600; box-shadow:0 8px 25px rgba(255,122,0,0.3);
  transition:all .3s cubic-bezier(.4,0,.2,1); z-index:1000; backdrop-filter:blur(10px); border:2px solid rgba(255,255,255,0.2); white-space:nowrap;
}
.coffee-emoji{ font-size:20px }
.coffee-text{ font-size:14px }
.coffee-button:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 35px rgba(255,122,0,0.4); background:linear-gradient(135deg, var(--orange-2), var(--orange)) }
.coffee-button:active{ transform:translateY(-1px) scale(1.02) }
@media (max-width:640px){ .coffee-button{ top:14px; right:14px } }

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none }
  .panel{ animation:none; opacity:1; transform:none }
  button, input, select{ transition:none }
  .coffee-button{ transition:none }
}