:root{
  --overlay-1: rgba(0,0,0,.45);
  --overlay-2: rgba(0,0,0,.55);
  --accent: #16a085;
  --text-on-dark: #f6f7f8;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:#121212;
  background:#fff;
  line-height:1.5;
}

/* yleinen kääre */
.wrap{ width:min(1100px, 92vw); margin-inline:auto; position:relative; z-index:2; }
.wrap.narrow{ width:min(900px, 92vw); }

/* yläpalkki + iOS safe-area */
.topbar{
  position:fixed; inset:0 0 auto 0;
  height:64px; display:flex; align-items:center;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:5;
  padding-top: env(safe-area-inset-top);
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; }
.brand{ font-weight:700; letter-spacing:.2px; }
.actions .btn{ margin-left:.5rem; }

/* paneelit (taustakuvat img-elementtinä) */
.panel{
  position:relative;
  min-height: min(90dvh, 90svh, 90vh);
  display:flex; align-items:center;
  color:var(--text-on-dark);
  overflow:hidden;
}
.hero{ min-height: min(100dvh, 100svh, 100vh); }
.panel .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform: scale(1.02);
  transition: filter .5s ease, opacity .4s ease, transform .6s ease;
  will-change: filter, opacity, transform;
}
.panel .bg.is-blur{ filter: blur(12px); transform: scale(1.06); }
.panel .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, var(--overlay-1), var(--overlay-2));
  z-index:1;
}
.panel .wrap{ padding: calc(64px + env(safe-area-inset-top)) 0 56px; position:relative; z-index:2; }

.panel.light{
  color:#0f0f10; background:#fafafa;
  min-height:auto; padding:96px 0 88px;
}
.panel.video{ background:#0f0f10; padding:96px 0; }

.hero h1{ font-size: clamp(2rem, 3.8vw, 3.25rem); line-height:1.1; margin:0 0 .6rem; }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 56ch; }

h2{ font-size: clamp(1.6rem, 2.6vw, 2rem); margin:0 0 .5rem; }
p{ margin:.5rem 0 1rem; }

.bullets{ margin:.5rem 0 0; padding-left:1.2rem; }
.bullets li{ margin:.2rem 0; }
.steps{ margin:.5rem 0 .5rem 1.2rem; }
.steps li{ margin:.25rem 0; }
.note{ opacity:.95; font-size:.975rem; }

.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:transform .12s ease, background-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.primary:hover{ background:#0f8d76; }
.btn.ghost{ color:#0f0f10; background:rgba(255,255,255,.86); border:1px solid rgba(0,0,0,.08); }
.hero .btn.ghost{ color:#fff; background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); }
.hero .btn.ghost:hover{ background:rgba(255,255,255,.25); }
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }

.video-embed{
  position:relative; width:100%;
  aspect-ratio:16/9;
  border-radius:14px; overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }
@supports not (aspect-ratio: 16/9){
  .video-embed{ height:0; padding-bottom:56.25%; }
  .video-embed iframe{ position:absolute; inset:0; }
}

/* Footer */
.footer{
  background:#0f0f10; color:#e9e9ea; padding:64px 0 48px;
  text-align:center;
}
.footer a{ color:#c6f0e9; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer .tiny{ font-size:.85rem; opacity:.8; margin-top:.5rem; }

/* Pienet näytöt */
@media (max-width: 720px){
  .topbar{ height:56px; }
  .panel .wrap{ padding: calc(56px + env(safe-area-inset-top)) 0 40px; }
  .cta-row{ gap:.5rem; }
}

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


/* === buddy.ai mobile optimizations === */
img, video, iframe { max-width: 100%; height: auto; }

.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.btn, .button, a.btn { min-height: 44px; padding: 0.875rem 1.1rem; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; }

.wrap { max-width: 1100px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

/* Prevent overflow on small screens */
.panel { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 4.8vw, 1.5rem); }
  .lead { font-size: 1rem; line-height: 1.55; }
  .topbar .actions .btn { padding: 0.9rem 1.1rem; }
  .panel.hero .wrap { padding-top: 4.5rem; padding-bottom: 2.5rem; }
  .panel { padding-top: 2.25rem; padding-bottom: 2.25rem; }
}