/* ============================================================
   BeAWhale AI - shared blueprint base
   Used by all three visual variations.
   Principle: text lives on the blueprint as white line-art +
   marker handwriting. Only PHOTOS and UI "windows" get the
   white sticker border. No repeating text-bearing white cards.
   ============================================================ */

:root{
  /* brighter cobalt, matched to the LinkedIn creative */
  --bg-top:#2A5AD2;
  --bg-mid:#1B47C4;
  --bg-deep:#11307E;
  --ink:#0B1330;
  --ink-soft:#3A4368;
  --paper:#ffffff;
  --sky:#9BD4F2;          /* light accent for colored words on blue */
  --success:#C7ECFF;      /* handwritten eyebrow tint */
  --peach:#FFBC7D;        /* tape / stamp / pin only */
  --text:#ffffff;
  --soft:rgba(255,255,255,0.82);
  --faint:rgba(255,255,255,0.55);
  --line:rgba(255,255,255,0.85);
  --line-mid:rgba(255,255,255,0.42);
  --line-soft:rgba(255,255,255,0.16);
  --grid:rgba(255,255,255,0.06);
  --grid-strong:rgba(255,255,255,0.11);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(120% 95% at 72% 8%, var(--bg-top) 0%, var(--bg-mid) 46%, var(--bg-deep) 100%);
  background-size:38px 38px,38px 38px,cover;
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block}
h1,h2,h3{font-family:'Saira',sans-serif;font-weight:700;letter-spacing:-0.5px}

.container{max-width:1120px;margin:0 auto;padding:0 30px}
section{padding:108px 0}
:where(section,footer)[id]{scroll-margin-top:88px}
@media (max-width:767px){:where(section,footer)[id]{scroll-margin-top:72px}}

/* ---- handwriting + display layers ---- */
.hand{font-family:'Caveat',cursive;font-weight:600;font-size:27px;color:var(--success);line-height:1.15}
.rough{font-family:'Rubik Distressed',system-ui;font-weight:400}
em.hl{font-style:normal;color:var(--sky)}

/* ---- section heads ---- */
.section-head{max-width:720px;margin:0 auto 70px;text-align:center}
.section-head .hand{display:block;margin-bottom:12px}
.section-head h2{font-size:clamp(30px,4vw,46px);text-transform:uppercase;line-height:1.18}
.section-head p{margin-top:18px;color:var(--soft);font-size:17px}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--text);color:var(--bg-deep);
  font-family:'Saira',sans-serif;font-weight:700;font-size:16px;
  text-transform:uppercase;text-decoration:none;letter-spacing:0.6px;
  padding:15px 32px;border-radius:4px;border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(3,12,48,0.38);
  transition:transform .16s, box-shadow .2s;
}
.btn:hover{transform:translateY(-3px) rotate(-0.6deg);box-shadow:0 18px 36px rgba(3,12,48,0.5)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,0.08)}

/* ---- the cut-out sticker (alpha-aware white outline) ----
   Works on transparent-background PNGs: the stacked drop-shadows
   trace the silhouette in white. On a rectangular photo it simply
   outlines the rectangle. Real cut-out PNGs -> true sticker halo. */
.cutout{
  filter:
    grayscale(1) contrast(1.06) brightness(1.02)
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 22px 30px rgba(3,10,40,0.45));
}
/* photo framed as a sticker rectangle (for screenshots / when no alpha) */
.photo-sticker{
  border-radius:6px;
  box-shadow:0 0 0 6px #fff, 0 22px 40px rgba(3,10,40,0.45);
}
.bw{filter:grayscale(1) contrast(1.06)}

/* ---- header / nav ---- */
header{position:sticky;top:0;z-index:60;background:rgba(18,46,140,0.55);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px}
.logo{font-family:'Saira',sans-serif;font-weight:700;font-size:19px;letter-spacing:1px;text-decoration:none;display:flex;align-items:center;gap:10px;justify-self:start}
.logo .mark{width:30px;height:30px;border:2px solid #fff;border-radius:5px;display:grid;place-items:center;font-size:15px;transform:rotate(-5deg)}
.nav ul{display:flex;gap:32px;list-style:none;justify-self:center}
.nav ul a{font-family:'Saira',sans-serif;font-weight:500;font-size:13.5px;text-transform:uppercase;text-decoration:none;letter-spacing:1px;color:var(--soft);padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav ul a:hover{color:#fff;border-bottom-color:#fff}
.nav .btn{padding:10px 20px;font-size:13.5px;box-shadow:none;justify-self:end}
.menu-toggle{display:none;background:none;border:0;color:#fff;padding:0;border-radius:4px;cursor:pointer}
.menu-toggle svg{width:32px;height:32px;display:block}
.menu-toggle .mt-bar{stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-origin:12px 12px;transition:transform .22s ease,opacity .18s ease}
.menu-toggle[aria-expanded="true"] .mt-mid{opacity:0}
.menu-toggle[aria-expanded="true"] .mt-top{transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .mt-bot{transform:translateY(-5px) rotate(-45deg)}
.nav-foot{display:none}

/* variation badge (top-right floating) */
.var-tag{
  position:fixed;right:16px;bottom:16px;z-index:70;
  font-family:'Caveat',cursive;font-weight:600;font-size:18px;color:#11307E;
  background:#fff;padding:6px 14px;border-radius:30px;text-decoration:none;
  box-shadow:0 8px 22px rgba(3,10,40,0.4);transform:rotate(-2deg);
  display:inline-flex;align-items:center;gap:8px;
}
.var-tag:hover{transform:rotate(0) translateY(-2px)}

/* ---- marquee ---- */
.marquee{padding:30px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden}
.marquee .label{text-align:center;font-family:'Caveat',cursive;font-size:24px;color:var(--soft);margin-bottom:16px}
.track{display:flex;width:max-content;gap:60px;animation:scroll 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:'Saira',sans-serif;font-weight:500;font-size:17px;letter-spacing:1.5px;color:rgba(255,255,255,0.62);text-transform:uppercase;white-space:nowrap}
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft);padding:32px 0}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--soft)}
.foot nav{display:flex;gap:24px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}

/* ---- klarna numbers (shared, no card) ---- */
.klarna{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:44px}
.klarna .num{font-family:'Saira',sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,40px);color:#fff;line-height:1}
.klarna p{font-size:14px;color:var(--soft);margin-top:10px}
.klarna-src{display:block;margin-top:28px;font-size:12px;color:var(--faint);text-align:center}

/* ---- a11y + motion ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .track{flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---- shared responsive ---- */
@media (max-width:1024px){
  section{padding:82px 0}
  .klarna{grid-template-columns:repeat(2,1fr);gap:30px}
}
/* full-screen mobile menu */
@media (max-width:1024px){
  .nav{display:flex;align-items:center}
  .nav ul{
    display:none;position:fixed;top:74px;left:0;right:0;height:calc(100dvh - 74px);z-index:55;
    background:
      linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px),
      radial-gradient(135% 80% at 82% 0%,var(--bg-top) 0%,var(--bg-mid) 50%,var(--bg-deep) 100%);
    background-size:38px 38px,38px 38px,cover;
    flex-direction:column;gap:0;padding:24px 26px 30px;overflow-y:auto;
    border-top:1px solid var(--line-soft);
  }
  .nav ul.open{display:flex;animation:navFade .24s ease both}
  .nav ul li:not(.nav-foot) a{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:18px 2px;font-size:22px;font-weight:700;color:#fff;letter-spacing:.4px;
    border-bottom:1.5px dashed rgba(255,255,255,0.16);
  }
  .nav ul li:not(.nav-foot) a::after{
    content:"";flex:none;width:9px;height:9px;
    border-right:2.5px solid var(--success);border-top:2.5px solid var(--success);
    transform:rotate(45deg);opacity:.6;transition:transform .16s,opacity .16s;
  }
  .nav ul li:not(.nav-foot) a:hover{color:var(--sky)}
  .nav ul li:not(.nav-foot) a:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}

  .nav-foot{display:block;margin-top:auto;padding-top:26px}
  .nav-foot-eyebrow{display:block;font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--success);margin-bottom:12px}
  .nav-contacts{display:flex;flex-direction:column;gap:0;margin-bottom:22px}
  .nav-foot .nav-contact{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:15px 2px;border-bottom:1.5px dashed rgba(255,255,255,0.28);text-decoration:none}
  .nav-foot .nav-contact:first-child{border-top:1.5px dashed rgba(255,255,255,0.28)}
  .nc-label{font-family:'Saira',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--soft)}
  .nc-val{font-family:'Saira',sans-serif;font-weight:700;font-size:16px;color:#fff;white-space:nowrap;transition:color .16s}
  .nav-foot .nav-contact:hover .nc-val{color:var(--sky)}
  .nav-foot .nav-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;font-size:16px;font-weight:700;color:var(--bg-deep);background:#fff;border-radius:6px;box-shadow:0 14px 30px rgba(3,10,40,0.5)}
  .nav-foot .nav-cta:hover{transform:translateY(-2px);color:var(--bg-deep);border-bottom-color:transparent}
  .nav-foot-loc{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--faint);letter-spacing:.3px}

  .menu-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:48px;min-height:48px;order:3;margin-left:14px;padding:0}
  .nav .btn{order:2;margin-left:auto}
  .logo{order:1;position:relative;z-index:1}
}
@keyframes navFade{from{opacity:0}to{opacity:1}}
@media (max-width:767px){
  section{padding:62px 0}
  .nav{height:64px}
  .nav ul{top:64px;height:calc(100dvh - 64px)}
  .section-head{margin-bottom:48px}
  .foot{justify-content:center;text-align:center}
  .foot nav{justify-content:center;flex-wrap:wrap}
}
@media (max-width:480px){
  section{padding:52px 0}
  .container{padding:0 20px}
  section:not(.hero)::before{width:calc(100% - 40px)}
  .nav .btn{padding:9px 15px;font-size:12.5px}
  .foot{justify-content:center;text-align:center}
}