/* Funtime.co.bw — marketing site styles
   Brand palette borrows from both apps: calm lilac/blue + color-the-world brights. */
:root{
  --ink:#1F2233;
  --muted:#6B7088;
  --bg:#F7F7FB;
  --card:#FFFFFF;
  --line:#E7E8F0;

  --purple:#7B61E0;  --purple-2:#5E45C9;
  --pink:#EC4D8C;
  --blue:#3A9BE0;
  --green:#34C77B;
  --gold:#EFA42B;
  --orange:#EE7044;

  --shadow:0 18px 40px rgba(60,50,120,.14);
  --radius:22px;
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(16px,5vw,40px);
  background:rgba(247,247,251,.82);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;}
.brand.small{font-size:15px;font-weight:700;color:var(--muted);}
.nav{display:flex;gap:clamp(10px,3vw,28px);font-weight:600;color:var(--muted);}
.nav a{padding:6px 4px;border-radius:8px;transition:color .15s;}
.nav a:hover{color:var(--purple-2);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:999px;transition:transform .15s,box-shadow .15s,background .15s;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;box-shadow:0 10px 22px rgba(123,97,224,.34);}
.btn-primary:hover{box-shadow:0 14px 28px rgba(123,97,224,.42);}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple-2);}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(48px,9vw,108px) clamp(16px,5vw,40px);}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;}
.eyebrow{font-weight:700;color:var(--purple-2);letter-spacing:.02em;margin-bottom:14px;}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-.03em;margin-bottom:18px;}
.lede{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:600px;margin:0 auto 30px;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.hero-blobs{position:absolute;inset:0;z-index:1;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;}
.blob.b1{width:340px;height:340px;background:#D8C9FF;top:-90px;right:-60px;}
.blob.b2{width:300px;height:300px;background:#FFC9E4;bottom:-110px;left:-70px;}
.blob.b3{width:240px;height:240px;background:#B9E7FF;top:40%;left:46%;opacity:.4;}

/* ---------- sections ---------- */
section{scroll-margin-top:72px;}
.section-title{font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;text-align:center;}
.section-sub{text-align:center;color:var(--muted);max-width:560px;margin:12px auto 0;}

.games{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,84px) clamp(16px,5vw,40px);}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:40px;}

.game-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.game-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(60,50,120,.20);}
.game-art{position:relative;height:168px;display:flex;align-items:center;justify-content:center;}
.game-card.calm .game-art{background:linear-gradient(160deg,#FDE9F4,#E7ECFF 55%,#E4F7FF);}
.game-card.ctw  .game-art{background:linear-gradient(160deg,#FFF0F8,#EAefff 60%,#E6F8FF);}
.game-body{padding:22px 24px 26px;}
.tag{display:inline-block;font-size:12px;font-weight:700;color:var(--purple-2);
  background:rgba(123,97,224,.10);padding:5px 11px;border-radius:999px;margin-bottom:12px;}
.game-body h3{font-size:22px;letter-spacing:-.01em;margin-bottom:8px;}
.game-body p{color:var(--muted);margin-bottom:16px;}
.card-link{font-weight:700;color:var(--purple-2);}
.card-link:hover{text-decoration:underline;}

/* calm dots art */
.dot{width:46px;height:46px;border-radius:50%;margin:0 7px;box-shadow:0 8px 16px rgba(120,90,180,.25);}
.dot.d1{background:#FF7EB6;} .dot.d2{background:#9D8DF1;}
.dot.d3{background:#56C7F5;} .dot.d4{background:#54D898;}

/* crayon art */
.art-crayons{gap:8px;transform:rotate(-8deg);}
.crayon{width:20px;height:96px;border-radius:6px 6px 4px 4px;position:relative;box-shadow:0 8px 14px rgba(120,90,180,.22);}
.crayon::before{content:"";position:absolute;top:-13px;left:0;border-left:10px solid transparent;
  border-right:10px solid transparent;border-bottom:14px solid currentColor;}
.crayon.c1{background:#EC4D8C;color:#EC4D8C;}
.crayon.c2{background:#EFA42B;color:#EFA42B;}
.crayon.c3{background:#34C77B;color:#34C77B;}
.crayon.c4{background:#3A9BE0;color:#3A9BE0;}
.crayon.c5{background:#7B61E0;color:#7B61E0;}

/* ---------- about ---------- */
.about{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.about-inner{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,84px) clamp(16px,5vw,40px);}
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:38px;}
.value h3{font-size:18px;margin-bottom:8px;}
.value p{color:var(--muted);}

/* ---------- contact ---------- */
.contact-inner{max-width:640px;margin:0 auto;text-align:center;padding:clamp(48px,8vw,96px) clamp(16px,5vw,40px);}
.contact-inner p{color:var(--muted);margin:14px 0 26px;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#fff;}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:24px clamp(16px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.copyright{color:var(--muted);font-size:14px;}

/* ---------- game detail pages ---------- */
.detail{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,72px) clamp(16px,5vw,40px);}
.back-link{display:inline-block;color:var(--purple-2);font-weight:700;margin-bottom:24px;}
.detail h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.02em;margin-bottom:14px;}
.detail .lede{text-align:left;margin:0 0 28px;}
.feature-list{list-style:none;display:grid;gap:14px;margin:24px 0 32px;}
.feature-list li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;}
.feature-list b{display:block;margin-bottom:2px;}

@media (max-width:540px){
  .nav{font-size:14px;}
  .footer-inner{justify-content:center;text-align:center;}
}