:root{
  --orange:#ff6b35;
  --orange-dark:#e55a2b;
  --blue:#004e98;
  --blue-mid:#0a2f66;
  --white:#ffffff;
  /* subtly blue-tinted neutrals */
  --gray-50:#f3f7ff;
  --gray-100:#e6efff;
  --gray-200:#d7e3ff;
  --gray-400:#94a3b8;
  --gray-600:#475569;
  --gray-800:#1e293b;
  --border-soft:rgba(10,47,102,0.10);
  --border-strong:rgba(10,47,102,0.18);

  --shadow-soft:0 18px 45px rgba(15,23,42,0.10);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-pill:999px;

  --section-padding:clamp(2.5rem,6vw,4rem);
  --container-width:1200px;
  --gap-lg:2rem;
}

/* Local font faces (self-hosted, no external requests) */
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM_Sans/DMSans-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM_Sans/DMSans-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'DM Sans';
  src:url('../fonts/DM_Sans/DMSans-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Space Mono';
  src:url('../fonts/Space_Mono/SpaceMono-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--gray-800);
  background:var(--gray-50);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:72px; /* offset fixed header */
}

/* Disable old blobs / gradients */
.blob{ display:none; }

/* Layout container */
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 1.5rem var(--section-padding);
}

/* Typography */
h1,h2,h3,h4{
  margin:0;
  font-family:"Space Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  color:var(--blue);
}

h1{
  font-size:clamp(2.4rem,4vw,3rem);
  line-height:1.1;
  letter-spacing:-0.03em;
}

h2{
  font-size:clamp(1.6rem,2.4vw,2rem);
  line-height:1.2;
}

h3{
  font-size:1.1rem;
}

p,li,dd{
  margin:0;
  font-size:0.98rem;
  line-height:1.65;
  color:var(--gray-600);
}

a{
  color:var(--blue-mid);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

.lead{
  font-size:1rem;
  line-height:1.7;
  color:var(--gray-600);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.2rem 0.75rem;
  border-radius:var(--radius-pill);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  background:var(--gray-100);
  color:var(--gray-600);
}

.badge-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.25);
}

.highlight{
  color:var(--orange);
}

/* Header */
.site-header{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  height:72px;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(148,163,184,0.25);
  z-index:1000;
}

.site-header > .container{
  padding-block:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  text-decoration:none;
}

.logo{
  width:36px;
  height:36px;
  border-radius:12px;
  background:conic-gradient(from 220deg at 30% 30%,var(--orange),var(--blue-mid),var(--orange));
}

.brand-text{
  font-family:"Space Mono",ui-monospace,monospace;
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:1.1rem;
  color:var(--blue);
}

.nav{
  display:flex;
  align-items:center;
}

/* Hide button wrapper in nav on desktop - only show on mobile */
.nav .btn-cta-wrapper{
  display:none !important;
}

.nav ul{
  display:flex;
  align-items:center;
  gap:1.5rem;
  list-style:none;
  padding:0;
  margin:0;
}

.nav a{
  font-size:0.9rem;
  font-weight:500;
  color:var(--gray-600);
  padding:0.4rem 0.2rem;
  border-radius:999px;
  transition:background-color .15s ease,color .15s ease;
}

.nav a:hover{
  background:var(--gray-100);
  text-decoration:none;
}

.nav a[aria-current="page"]{
  color:var(--blue);
  background:var(--gray-100);
}

/* Dropdown menu */
.nav-dropdown{
  position:relative;
}

.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:0.3rem;
  font-size:0.9rem;
  font-weight:500;
  color:var(--gray-600);
  padding:0.4rem 0.2rem;
  border-radius:999px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:background-color .15s ease,color .15s ease;
}

.nav-dropdown-toggle:hover{
  background:var(--gray-100);
  color:var(--gray-800);
}

.nav-dropdown-toggle[aria-expanded="true"]{
  background:var(--gray-100);
  color:var(--blue);
}

.nav-dropdown-arrow{
  font-size:0.7rem;
  transition:transform .2s ease;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow{
  transform:rotate(180deg);
}

.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:0.5rem;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(15,23,42,0.12);
  list-style:none;
  padding:0.5rem 0;
  margin:0;
  min-width:180px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:1000;
}

.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu,
.nav-dropdown[aria-expanded="true"] .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-dropdown-menu li{
  margin:0;
}

.nav-dropdown-menu a{
  display:flex;
  flex-direction:column;
  padding:0.75rem 1.2rem;
  font-size:0.9rem;
  color:var(--gray-700);
  text-decoration:none;
  border-radius:0;
  transition:background-color .15s ease,color .15s ease;
  gap:0.2rem;
}

.nav-dropdown-menu a:hover{
  background:var(--gray-50);
  color:var(--blue);
  text-decoration:none;
}

.nav-dropdown-title{
  display:block;
  font-weight:500;
  color:inherit;
}

.nav-dropdown-desc{
  display:block;
  font-size:0.75rem;
  color:var(--gray-500);
  line-height:1.3;
}

.nav-dropdown-menu a:hover .nav-dropdown-desc{
  color:var(--gray-600);
}

.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1rem;
  border-radius:var(--radius-pill);
  font-size:0.9rem;
  font-weight:600;
  color:var(--white);
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  box-shadow:0 12px 24px rgba(248,113,113,0.25);
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}

.btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(248,113,113,0.3);
  text-decoration:none;
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--gray-200);
  border-radius:0.75rem;
  padding:0.4rem 0.6rem;
  font-size:1.1rem;
  color:var(--gray-700);
  cursor:pointer;
}

@media (max-width:768px){
  .site-header > .container{
    gap:0.75rem;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .nav{
    position:fixed;
    inset-inline:0;
    top:72px;
    background:rgba(255,255,255,0.98);
    border-bottom:1px solid rgba(148,163,184,0.25);
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease,opacity .2s ease;
  }

  .nav.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:0.75rem 1.5rem 1rem;
  }

  .nav li{
    width:100%;
  }

  .nav a{
    display:block;
    width:100%;
    padding:0.6rem 0;
  }

  /* Mobile dropdown - show items directly with indent */
  .nav-dropdown{
    width:100%;
  }

  .nav-dropdown-toggle{
    display:none;
  }

  .nav-dropdown-menu{
    position:static;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    box-shadow:none;
    border:none;
    margin-top:0;
    padding:0;
    padding-left:1.5rem;
    min-width:auto;
    width:100%;
  }

  .nav-dropdown-menu a{
    padding:0.6rem 0;
  }

  .nav-dropdown-desc{
    font-size:0.7rem;
  }

  /* Keep header button visible on mobile, but make it smaller */
  .btn-cta-header{
    display:flex !important;
  }
  
  .btn-cta-header .btn-cta{
    font-size:clamp(0.7rem, 2.5vw, 0.85rem);
    padding:0.45rem 0.7rem;
    white-space:nowrap;
  }
  
  .btn-cta-header span{
    font-size:0.6rem;
  }
  
  /* Show button in mobile nav only */
  .nav .btn-cta-wrapper{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0.25rem;
    padding:0.75rem 1.5rem 0;
    margin-top:0.5rem;
    border-top:1px solid var(--gray-200);
  }
  
  .nav .btn-cta{
    width:100%;
    justify-content:center;
    font-size:clamp(0.75rem, 3vw, 0.9rem);
    padding:0.5rem 0.9rem;
    white-space:nowrap;
  }
  
  .nav .btn-cta-wrapper span{
    font-size:0.6rem;
    color:var(--gray-400);
    text-align:center;
  }
}

/* Hero section */
.hero{
  padding-block:var(--section-padding);
  background:linear-gradient(180deg,rgba(0,78,152,0.06) 0%,var(--white) 55%,var(--gray-50) 100%);
}

.hero-inner{
  max-width:720px;
}

.hero-stack{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin-top:0.75rem;
}

/* QR generator layout: two-column hero like original design */
.hero--generator{
  padding-block:3.5rem 3.5rem;
}

.hero--generator .container{
  max-width:980px;
  padding:0 1.5rem 3rem;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--gap-lg);
  align-items:stretch;
}

@media (max-width:900px){
  .hero--generator .container{
    grid-template-columns:1fr;
  }
}

/* QR generator typography spacing */
.hero--generator h1{
  margin-bottom:1rem;
}

.hero--generator .lead{
  margin-top:0.4rem;
  margin-bottom:1.6rem;
}

.hero--generator h2{
  margin-top:1.6rem;
  margin-bottom:0.75rem;
}

.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
  padding:0.7rem 1.3rem;
  border-radius:var(--radius-pill);
  font-size:0.95rem;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease,gap .15s ease;
}

.btn-primary{
  background:var(--blue);
  color:var(--white);
  box-shadow:0 18px 40px rgba(15,23,42,0.35);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 50px rgba(15,23,42,0.4);
  text-decoration:none;
}

.btn-secondary{
  background:var(--white);
  color:var(--blue);
  border-color:var(--gray-200);
}

.btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(15,23,42,0.15);
  border-color:var(--gray-300);
  text-decoration:none;
}

.btn-arrow{
  font-size:1rem;
  transform:translateY(1px);
}

.btn-link-arrow{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  font-size:0.9rem;
  font-weight:500;
  color:var(--blue);
}

.btn-link-arrow span{
  transition:transform .15s ease;
}

.btn-link-arrow:hover span{
  transform:translateX(3px);
}

/* Sections */
.section{
  padding-block:var(--section-padding);
}

/* Tighter spacing for about page sections */
.about-page .section{
  padding-block:clamp(2rem,4vw,3rem);
}

.section--wishlist{
  padding-block:clamp(2.5rem,7vw,4.5rem);
  background:var(--gray-50);
}

.wishlist-form{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.wishlist-choices{
  border:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.75rem;
}

.wishlist-option{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 0.8rem;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:var(--white);
  cursor:pointer;
  font-size:0.9rem;
}

.wishlist-option input{
  accent-color:var(--blue);
}

.wishlist-freeform label{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:0.35rem;
}

.wishlist-freeform textarea{
  width:100%;
  border-radius:0.9rem;
  border:1px solid var(--border-soft);
  padding:0.7rem 0.8rem;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:0.9rem;
  resize:vertical;
  min-height:90px;
}

.wishlist-actions{
  display:flex;
  justify-content:flex-start;
}

.wishlist-note{
  font-size:0.8rem;
  color:var(--gray-500);
}

.wishlist-chart-container{
  max-width:720px;
  margin:0 auto 2.5rem;
  padding:1.5rem;
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-soft);
}

.wishlist-chart-title{
  font-size:0.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gray-500);
  margin:0 0 1.25rem 0;
  text-align:center;
}

.wishlist-chart{
  min-height:200px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:1rem;
  padding:1rem 0;
}

.wishlist-chart-bars{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:1rem;
  width:100%;
  height:200px;
}

.wishlist-chart-bar-wrapper{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  max-width:120px;
}

.wishlist-chart-bar{
  width:100%;
  min-height:20px;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:0.3rem;
  transition:opacity 0.2s ease;
}

.wishlist-chart-bar:hover{
  opacity:0.85;
}

.wishlist-chart-value{
  color:var(--white);
  font-size:0.85rem;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.wishlist-chart-label{
  font-size:0.8rem;
  font-weight:500;
  color:var(--gray-600);
  text-align:center;
}

.wishlist-chart-loading,
.wishlist-chart-empty,
.wishlist-chart-error{
  display:flex;
  align-items:center;
  justify-content:center;
  height:200px;
  color:var(--gray-500);
  font-size:0.9rem;
}

@media (max-width:640px){
  .wishlist-choices{
    grid-template-columns:1fr;
  }

  .wishlist-chart-container{
    padding:1rem;
  }

  .wishlist-chart-bars{
    gap:0.5rem;
  }

  .wishlist-chart-bar-wrapper{
    max-width:80px;
  }

  .wishlist-chart-label{
    font-size:0.75rem;
  }
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.section-header{
  text-align:center;
  max-width:640px;
  margin:0 auto 1.5rem;
}

.section-label{
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray-400);
  margin-bottom:0.4rem;
}

.section-title{
  margin-bottom:0.4rem;
}

.section-description{
  font-size:0.95rem;
}

/* Product cards */
.products-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-lg);
}

@media (max-width:900px){
  .products-grid{
    grid-template-columns:1fr;
  }
}

.product-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  padding:1.5rem 1.6rem 1.6rem;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.product-card::before{
  content:\"\";
  position:absolute;
  inset-inline:1.2rem;
  top:0;
  height:3px;
  border-radius:999px;
  background:transparent;
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
  transform:translateY(-6px);
}

.product-card.is-qr::before{
  background:linear-gradient(90deg,var(--orange),var(--orange-dark));
}

.product-card.is-nistory::before{
  background:linear-gradient(90deg,var(--blue-mid),var(--orange));
}

.product-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:0 22px 55px rgba(15,23,42,0.18);
}

.product-card:hover::before{
  opacity:1;
  transform:translateY(0);
}

.product-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:1rem;
}

.product-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
}

.product-icon.orange{
  background:rgba(255,107,53,0.12);
  color:var(--orange-dark);
}

.product-icon.blue{
  background:rgba(26,45,74,0.16);
  color:var(--blue-mid);
}

.product-badge{
  font-size:0.75rem;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background:var(--gray-100);
  color:var(--gray-600);
  border:1px solid var(--border-soft);
}

.product-title{
  font-size:1.15rem;
  margin-bottom:0.2rem;
}

.product-tagline{
  font-size:0.9rem;
  color:var(--orange-dark);
  font-weight:600;
  margin-bottom:0.65rem;
}

.product-description{
  font-size:0.93rem;
  margin-bottom:0.9rem;
}

.product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  margin-bottom:1rem;
}

.product-tag{
  font-size:0.78rem;
  padding:0.18rem 0.5rem;
  border-radius:999px;
  background:var(--gray-100);
  color:var(--gray-600);
}

.product-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  flex-wrap:wrap;
}


.product-link{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  font-size:0.9rem;
  font-weight:500;
  color:var(--blue-mid);
  text-decoration:none;
}

.product-link span{
  transition:transform .15s ease;
}

.product-link:hover{
  text-decoration:none;
  color:var(--blue);
}

.product-link:hover span{
  transform:translateX(4px);
}

.product-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem 1.4rem;
  font-size:0.9rem;
  font-weight:600;
  color:var(--white);
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  border-radius:var(--radius-pill);
  text-decoration:none;
  box-shadow:0 4px 12px rgba(255,107,53,0.25);
  transition:transform .15s ease,box-shadow .15s ease;
  white-space:nowrap;
}

.product-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,107,53,0.35);
  text-decoration:none;
  color:var(--white);
}

.play-badge{
  height:60px;
  width:auto;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(15,23,42,0.18);
}

/* Testimonials section */
.testimonials{
  background:var(--gray-50);
}

.testimonials-empty{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  padding:3rem 1.5rem;
}

.testimonials-empty p{
  font-size:1rem;
  line-height:1.7;
  color:var(--gray-600);
  margin:0.5rem 0;
}

.testimonials-empty p:first-of-type{
  font-size:1.1rem;
  font-weight:600;
  color:var(--gray-800);
}

/* Values section */
.values{
  background:var(--blue-mid);
  color:var(--gray-100);
}

.values .section-header{
  color:var(--gray-100);
}

.values .section-header p{
  color:var(--gray-200);
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-lg);
  max-width:900px;
  margin:0 auto;
  align-items:start;
}

@media (max-width:900px){
  .values-grid{
    grid-template-columns:1fr;
    max-width:100%;
  }
}

.value-item{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  align-items:flex-start;
}

.value-header{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.3rem;
}

.value-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.8);
  color:var(--orange);
  font-size:1.2rem;
}

.value-title{
  font-size:1rem;
  color:var(--gray-50);
  font-weight:600;
}

.value-text{
  font-size:0.9rem;
  color:var(--gray-200);
  line-height:1.6;
}

/* About page values styling (light background) */
.values-grid--about{
  gap:1.5rem;
}

.value-item--about{
  background:var(--white);
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  padding:1.5rem 1.6rem;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.value-item--about:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:0 20px 50px rgba(15,23,42,0.12);
}

.value-title--about{
  font-size:1.1rem;
  font-weight:600;
  color:var(--blue);
  margin-bottom:0.5rem;
}

.value-text--about{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--gray-600);
}

/* Footer */
footer{
  padding:1.8rem 1.5rem 2.4rem;
  background:var(--gray-100);
  border-top:1px solid var(--gray-200);
}

.footer-inner{
  max-width:var(--container-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.75rem;
  flex-wrap:wrap;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  font-size:0.85rem;
  color:var(--gray-500);
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  font-size:0.85rem;
}

.footer-links a{
  color:var(--gray-600);
  text-decoration:none;
}

.footer-links a:hover{
  color:var(--gray-800);
  text-decoration:underline;
}

@media (max-width:640px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Blog list */
.blog-list{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:1.5rem;
}

.blog-post .body{
  padding:1.4rem 1.5rem;
}

.blog-meta{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.8rem;
  font-size:0.85rem;
  color:var(--gray-600);
}

.blog-number{
  font-family:"Space Mono",ui-monospace,monospace;
  font-weight:700;
  color:var(--blue);
}

.blog-date{
  color:var(--gray-500);
}

.blog-post h2{
  margin-bottom:0.3rem;
}

/* Legacy .panel for legal pages etc. */
.panel{
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);
  padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-soft);
}

@media (max-width:640px){
  .panel{
    padding:1.3rem 1.1rem;
  }
}

/* Forms / inputs (QR generator etc.) */
.grid{
  display:grid;
  gap:0.9rem;
  grid-template-columns:1fr 1fr;
}

@media (max-width:700px){
  .grid{
    grid-template-columns:1fr;
  }
}

/* QR Generator controls - clean list layout */
.qr-controls{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-top:1.5rem;
}

.qr-control-group{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
}

.qr-control-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9rem;
}

@media (max-width:700px){
  .qr-control-row{
    grid-template-columns:1fr;
  }
}

label{
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray-500);
  display:block;
  margin-bottom:0.3rem;
}

input[type=\"text\"],
input[type=\"number\"],
input[type=\"color\"],
select{
  width:100%;
  padding:0.6rem 0.7rem;
  border-radius:0.75rem;
  border:1px solid var(--gray-200);
  background:var(--white);
  color:var(--gray-800);
  font-size:0.9rem;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}

input[type=\"text\"]:focus,
input[type=\"number\"]:focus,
input[type=\"color\"]:focus,
select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 1px var(--orange);
}

input[type=\"color\"]{
  padding:0.2rem;
  height:40px;
}

.row{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}

.row > *{
  flex:1 1 160px;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:0.6rem;
}

button{
  appearance:none;
  border-radius:0.9rem;
  border:1px solid transparent;
  padding:0.6rem 1.1rem;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}

button:hover{
  transform:translateY(-1px);
}

button:active{
  transform:translateY(0);
}

.btn-accent{
  background:var(--orange);
  color:var(--white);
  box-shadow:0 10px 25px rgba(248,113,113,0.35);
}

.btn-accent:hover{
  background:var(--orange-dark);
}

.btn-ghost{
  background:var(--white);
  color:var(--gray-700);
  border-color:var(--gray-200);
}

.note{
  font-size:0.8rem;
  color:var(--gray-500);
}

/* QR preview */
.qr-wrap{
  display:grid;
  place-items:center;
  padding:1.5rem;
  background:var(--gray-50);
  border-radius:var(--radius-lg);
}

.qr-card{
  padding:1rem 1rem 1.1rem;
  background:var(--white);
  border-radius:1rem;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border-soft);
}

.qr-actions{
  display:flex;
  gap:0.75rem;
  justify-content:center;
  margin-top:0.75rem;
}

/* QR generator specific tweaks – avoid dull grey controls */
#qr-input,
#qr-size,
#qr-ecc,
#qr-fg,
#qr-bg{
  background:var(--white);
  border-color:var(--border-soft);
  color:var(--blue-mid);
}

#qr-input::placeholder{
  color:var(--gray-400);
}

#download{
  background:var(--blue-mid);
  color:var(--white);
  border-radius:var(--radius-pill);
  padding-inline:1.6rem;
}

#download:hover{
  background:var(--blue);
}

/* Cookie dialog */
.cookie-dialog{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.cookie-dialog.show{
  opacity:1;
  pointer-events:auto;
}

.cookie-dialog-content{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.9rem;
  width:min(480px,100% - 2.5rem);
  box-shadow:0 24px 60px rgba(15,23,42,0.5);
  border:1px solid var(--gray-200);
}

.cookie-dialog h3{
  margin:0 0 0.7rem;
  font-size:1.2rem;
}

.cookie-dialog p{
  margin-bottom:1rem;
}

.cookie-options{
  margin-bottom:1.3rem;
}

.cookie-option{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  padding:0.75rem 0.8rem;
  border-radius:0.9rem;
  border:1px solid var(--gray-200);
  background:var(--gray-50);
}

.cookie-option + .cookie-option{
  margin-top:0.6rem;
}

.cookie-option input[type=\"checkbox\"]{
  margin-top:0.15rem;
  width:18px;
  height:18px;
}

.cookie-dialog .cookie-actions{
  display:flex;
  gap:0.6rem;
  margin-bottom:0.6rem;
}

.cookie-dialog .cookie-actions button{
  flex:1;
}

.cookie-note{
  font-size:0.8rem;
  color:var(--gray-500);
  text-align:center;
}

/* Cookie bar */
.cookiebar{
  position:fixed;
  left:50%;
  bottom:1.2rem;
  transform:translateX(-50%) translateY(12px);
  width:min(920px,100% - 2.4rem);
  background:var(--white);
  border-radius:var(--radius-md);
  border:1px solid var(--gray-200);
  box-shadow:0 18px 45px rgba(15,23,42,0.25);
  padding:0.9rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.9rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:1200;
}

.cookiebar.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

.cookiebar p{
  margin:0;
  font-size:0.84rem;
}

.cookie-actions{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

@media (max-width:640px){
  .cookiebar{
    flex-direction:column;
    align-items:flex-start;
  }
  .cookie-actions{
    width:100%;
    justify-content:flex-end;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
  }
}