:root{
  /* Colors */
  --bg: #f6f8fb;
  --bg-glow-1: rgba(79,124,255,0.14);
  --bg-glow-2: rgba(122,255,196,0.10);

  --surface: #ffffff;            /* cards */
  --surface-2: #f2f5fb;          /* subtle surfaces (topbar hover etc) */
  --topbar-bg: rgba(255,255,255,0.78);

  --border: #e3e7ee;

  --text: #1f2937;
  --muted: #6b7280;

  --accent: #4f7cff;
  --accent-weak: rgba(79,124,255,0.12);
  --accent-hover: rgba(79,124,255,0.08);
  --focus-ring: rgba(79,124,255,0.22);

  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --shadow-soft: 0 8px 18px rgba(0,0,0,0.06);

  /* Layout + spacing */
  --radius: 18px;
  --radius-sm: 12px;

  --page-max: 1100px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;

  --content-gap: 14px;          /* gap between sections/cards */
  --card-padding: 18px;          /* inside cards */
  --topbar-padding-y: 12px;
  --topbar-padding-x: 18px;

  --field-padding-y: 11px;
  --field-padding-x: 12px;
  --label-gap: 6px;              /* space under labels */
  --field-gap: 12px;             /* form grid gap */

  --line-height: 1.55;
}




body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 0%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, var(--bg-glow-2), transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: var(--line-height);
}

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-4);
}


/* Top Nav */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}

.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--topbar-padding-y) var(--topbar-padding-x);
  max-width: var(--page-max);
  margin: 0 auto;
}

.brand{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.brand-badge{
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(79,124,255,0.9), rgba(122,255,196,0.7));
  box-shadow: var(--shadow-soft);
}

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

.tab{
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: 140ms ease;
}

.tab:hover{
  color: var(--text);
  background: var(--accent-hover);
  border-color: rgba(79,124,255,0.18);
}

.tab[aria-selected="true"]{
  color: var(--text);
  background: var(--accent-weak);
  border-color: rgba(79,124,255,0.30);
}



/* Mobile menu button */
.menu-btn{
  display: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}



.menu-panel{
    display: none;
    padding: 10px 18px 14px;
    max-width: 1100px;
    margin: 0 auto;
}

.menu-panel.open{
    display: block;
}

.menu-panel .nav{
    flex-direction: column;
    align-items: stretch;
}

/* Content */
.hero{
  margin-top: var(--content-gap);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card{
  margin-top: var(--content-gap);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


.hero h1{
    margin: 0 0 6px 0;
    font-size: clamp(20px, 3.5vw, 30px);
}

.hero p{
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.card h2{
    margin: 0 0 10px 0;
    font-size: 18px;
}

.muted{ color: var(--muted); }

/* Panels (tabs content) */
.panel{
    display: none; /* hidden by default */
}
.panel.active{
    display: block;
}

/* Form styling */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--field-gap);
}

label{
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--label-gap);
  font-weight: 600;
}


input, textarea, select{
  width: 95%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: var(--field-padding-y) var(--field-padding-x);
  border-radius: var(--radius-sm);
  outline: none;
}

textarea{
  min-height: 140px; /* lite mindre brutal, men fortfarande skön */
  resize: vertical;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(79,124,255,0.55);
  box-shadow: 0 0 0 4px var(--focus-ring);
}


.full{ grid-column: 1 / -1; }

.btn{
  border: 1px solid rgba(79,124,255,0.45);
  background: rgba(79,124,255,0.14);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: 140ms ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(79,124,255,0.20);
}

.info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.clean-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.clean-list li{
  margin-bottom: 8px;
}

.faq-item{
  margin-top: 35px;
}

#sponsor-block{
  display: flex;
  justify-content: center; /* horisontellt */
  align-items: center;     /* vertikalt */
}

.sponsor-logo{
  max-height: 100px;
  width: auto;
  display: block;
}

fieldset{
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0; /* behåll luft mellan sektioner */
}

legend{
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: 16px;
}

.confirm{
  margin-top: var(--space-4);
}

.checkbox-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-bottom: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"]{
  margin-top: 2px; /* optisk justering mot text */
  flex-shrink: 0;
  width: auto;
}


/* Responsive */
@media (max-width: 720px){
    .nav.desktop{ display: none; }
    .menu-btn{ display: inline-flex; align-items: center; gap: 8px; }
    .form-grid{ grid-template-columns: 1fr; }
}