/* om-os.css – Opally-inspireret layout i Dinghy blå tema + logo.png */

:root{
  --primary-blue:#0a2540;
  --accent-blue:#007aff;
  --bg:#f6f9ff;
  --card:#ffffff;
  --muted:#35506a;
  --border: rgba(0,122,255,.18);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--primary-blue);
  background:var(--bg);
}

/* HERO */
.about-hero{
  padding:76px 5% 56px;
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(0,122,255,.16), transparent 60%),
    radial-gradient(700px 380px at 85% 30%, rgba(10,37,64,.10), transparent 55%),
    #eef4ff;
  border-bottom:1px solid rgba(0,122,255,.18);
}

.about-hero-inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}

.kicker{
  margin:0 0 10px;
  color:var(--accent-blue);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.85rem;
}

.about-hero h1{
  margin:0 0 12px;
  font-size:2.9rem;
  letter-spacing:-1.2px;
}

.lead{
  margin:0 auto 28px;
  max-width:860px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.7;
}

.hero-cards{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  text-align:left;
}

.hero-card{
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 12px 28px rgba(10,37,64,.06);
}

.hero-card h3{
  margin:0 0 8px;
  font-size:1.1rem;
}

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

/* MAIN */
.about-content{
  padding:60px 5% 90px;
}

/* FOUNDER SECTION */
.founder{
  max-width:1100px;
  margin:0 auto 64px;
}

.founder-inner{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:26px;
  align-items:stretch;
}

/* Logo image card */
.founder-photo{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:contain;                  /* logo skal ikke croppes */
  background:#ffffff;                  /* pæn baggrund bag logo */
  border-radius:18px;
  border:1px solid rgba(10,37,64,.10);
  box-shadow:0 18px 38px rgba(10,37,64,.10);
  padding:34px;                        /* luft rundt om logoet */
}

.founder-text{
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px 22px;
  box-shadow:0 12px 28px rgba(10,37,64,.06);
}

.founder-text h2{
  margin:6px 0 12px;
  font-size:1.75rem;
  letter-spacing:-.6px;
}

blockquote{
  margin:0 0 14px;
  padding:14px 16px;
  border-left:4px solid rgba(0,122,255,.45);
  background:rgba(0,122,255,.06);
  border-radius:12px;
  color:var(--primary-blue);
  line-height:1.65;
  font-weight:700;
}

.muted{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.founder-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Buttons */
.btn-main{
  background:var(--accent-blue);
  color:#fff;
  padding:16px 34px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  display:inline-block;
  transition:transform .2s, background .2s, box-shadow .2s;
  box-shadow:0 12px 26px rgba(0,122,255,.22);
}

.btn-main:hover{
  transform:scale(1.05);
  background:#0062cc;
}

.btn-ghost{
  display:inline-block;
  padding:16px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  color:var(--primary-blue);
  border:2px solid rgba(0,122,255,0.22);
  background:rgba(255,255,255,0.75);
  transition:transform .2s, background .2s;
}

.btn-ghost:hover{
  transform:scale(1.03);
  background:rgba(255,255,255,0.95);
}

/* STORY / TIMELINE */
.story{
  max-width:1100px;
  margin:0 auto 64px;
}

.story-inner h2{
  margin:6px 0 18px;
  font-size:1.75rem;
  letter-spacing:-.6px;
}

.timeline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.timeline-card{
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 12px 28px rgba(10,37,64,.06);
}

.timeline-card h3{
  margin:0 0 8px;
  font-size:1.1rem;
}

.timeline-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* FINAL CTA */
.final-cta{
  max-width:1100px;
  margin:0 auto;
}

.final-cta-inner{
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(0,122,255,.14), transparent 60%),
    radial-gradient(700px 380px at 85% 30%, rgba(10,37,64,.10), transparent 55%),
    rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px 22px;
  box-shadow:0 12px 28px rgba(10,37,64,.06);
  text-align:center;
}

.final-cta-inner h2{
  margin:0 0 10px;
  font-size:1.8rem;
  letter-spacing:-.6px;
}

.final-buttons{
  margin-top:16px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.cta-bullets{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  color:var(--muted);
}

.cta-bullets li{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,122,255,.08);
  border:1px solid rgba(0,122,255,.14);
}

/* RESPONSIVE */
@media (max-width:980px){
  .hero-cards{ grid-template-columns:1fr; }
  .founder-inner{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:1fr; }

  .founder-photo{
    min-height:240px;
    padding:26px;
  }
}