:root{
  --bg:#f7f8fb; --surface:#ffffff; --surface-2:#f1f2f7; --text:#171923; --text-muted:#5b616e;
  --border:#e3e5ec; --primary:#4f46e5; --primary-dark:#3f37c9; --accent:#f59e0b; --success:#16a34a; --danger:#dc2626;
  --heads:#eab308; --tails:#94a3b8; --shadow:0 10px 30px rgba(20,20,40,.08);
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#0f1117; --surface:#171a23; --surface-2:#1e2230; --text:#eef0f6; --text-muted:#9aa0b2;
  --border:#2b3040; --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; width:100%;
}
h1,h2,h3,.brand{font-family:'Outfit',sans-serif;}
a{color:inherit;}
img,svg{max-width:100%;}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}
button{font-family:inherit; cursor:pointer;}

/* Header */
header.site-header{
  position:sticky; top:0; z-index:9998; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; text-decoration:none; color:var(--text);}
.brand .coin-logo{width:30px; height:30px; border-radius:50%; background:linear-gradient(145deg,#ffd76a,#c9971f); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#3a2c00;}
nav.primary-nav{display:flex; align-items:center; gap:22px;}
nav.primary-nav a{text-decoration:none; font-weight:500; font-size:14.5px; color:var(--text-muted);}
nav.primary-nav a:hover{color:var(--primary);}
.header-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:inherit;
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px;
}
.hamburger{display:none; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:inherit; width:38px; height:38px; border-radius:10px;}
.mobile-menu{display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); z-index:9999; padding:10px 20px 16px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block; padding:10px 0; text-decoration:none; color:var(--text); border-bottom:1px solid var(--border); font-weight:500;}
.mobile-menu a:last-child{border-bottom:none;}

/* Hero / App */
.hero{padding:26px 0 10px;}
.hero-inner{text-align:center; max-width:760px; margin:0 auto;}
.hero h1{font-size:clamp(24px,4vw,38px); margin:0 0 8px; font-weight:800;}
.hero p.sub{color:var(--text-muted); font-size:15.5px; margin:0 auto 4px; max-width:600px;}

.app-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; margin:20px auto; max-width:820px;
}

/* prediction */
.predict-row{display:flex; justify-content:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.predict-btn{
  padding:10px 22px; border-radius:999px; border:2px solid var(--border); background:var(--surface-2);
  color:var(--text); font-weight:600; font-size:14px; transition:.15s;
}
.predict-btn.active{border-color:var(--primary); background:var(--primary); color:#fff;}

/* coin stage */
.coin-stage{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:18px;
  min-height:200px; perspective:1000px; margin:10px 0 18px;
}
.coin{
  width:150px; height:150px; position:relative; transform-style:preserve-3d; cursor:pointer;
  transition:transform .15s ease; touch-action:manipulation;
}
.coin:active{transform:scale(.97);}
.coin .face{
  position:absolute; inset:0; border-radius:50%; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-weight:800; font-family:'Outfit',sans-serif; box-shadow:inset 0 0 0 6px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.25);
  border:3px solid rgba(0,0,0,.15); user-select:none;
}
.coin .face.heads{background:linear-gradient(145deg,#ffe08a,#d4a017); color:#4a3600; font-size:15px;}
.coin .face.tails{background:linear-gradient(145deg,#e2e8f0,#94a3b8); color:#1f2937; transform:rotateY(180deg); font-size:15px;}
.coin .face .emoji{font-size:48px; line-height:1;}
.coin .face .label{margin-top:4px; font-size:13px; letter-spacing:.5px; text-transform:uppercase;}

@keyframes flipFast{0%{transform:rotateY(0) rotateX(0);}100%{transform:rotateY(1800deg);}}
@keyframes flipNormal{0%{transform:rotateY(0) rotateX(0);}100%{transform:rotateY(2520deg);}}
@keyframes flipSlow{0%{transform:rotateY(0) rotateX(0);}100%{transform:rotateY(3240deg);}}
.coin.flipping-fast{animation:flipFast .5s cubic-bezier(.2,.8,.3,1) forwards;}
.coin.flipping-normal{animation:flipNormal .9s cubic-bezier(.2,.8,.3,1) forwards;}
.coin.flipping-slow{animation:flipSlow 1.4s cubic-bezier(.2,.8,.3,1) forwards;}
.coin.show-tails{transform:rotateY(180deg);}
.coin.show-heads{transform:rotateY(0deg);}
.no-anim .coin{transition:none; animation:none !important;}

.result-banner{text-align:center; min-height:34px; font-size:18px; font-weight:700; margin-bottom:10px;}
.result-banner .r-heads{color:#b8860b;}
.result-banner .r-tails{color:#64748b;}
.streak-line{text-align:center; font-size:13px; color:var(--text-muted); margin-bottom:14px;}

/* main flip button */
.flip-btn{
  display:block; margin:0 auto 20px; padding:15px 46px; font-size:17px; font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none;
  border-radius:14px; box-shadow:0 8px 20px rgba(79,70,229,.35); transition:.15s;
}
.flip-btn:hover:not(:disabled){transform:translateY(-2px);}
.flip-btn:disabled{opacity:.65; cursor:not-allowed; transform:none;}
.flip-btn .spin{display:none; width:15px; height:15px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; margin-right:8px; animation:spin .6s linear infinite; vertical-align:-2px;}
.flip-btn.loading .spin{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* control groups */
.controls-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
@media(max-width:640px){.controls-grid{grid-template-columns:1fr;}}
.control-block{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px;}
.control-block label{display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); margin-bottom:8px;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  padding:7px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-size:13px; font-weight:600;
}
.chip.active{background:var(--primary); border-color:var(--primary); color:#fff;}
.field-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
input[type=number], input[type=text], select{
  background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px;
  padding:9px 10px; font-size:13.5px; font-family:inherit; width:100%;
}
select{background:var(--surface); font-family:inherit; color:var(--text);}
.hint-err{color:var(--danger); font-size:12px; margin-top:6px; display:none;}
.hint-err.show{display:block;}

.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0;}
.switch{position:relative; width:42px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider-tog{position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:999px; transition:.2s;}
.slider-tog:before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
input:checked + .slider-tog{background:var(--primary);}
input:checked + .slider-tog:before{transform:translateX(18px);}

/* coin design + custom */
.coin-design-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px;}
.design-opt{
  border:2px solid var(--border); background:var(--surface); border-radius:10px; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--text-muted);
}
.design-opt .dot{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px;}
.design-opt.active{border-color:var(--primary); color:var(--primary);}
.custom-fields{display:none; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
.custom-fields.show{display:grid;}

/* action buttons row */
.action-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px;}
.action-btn{
  padding:9px 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font-family:inherit; font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px;
}
.action-btn:hover{border-color:var(--primary); color:var(--primary);}

/* history */
.history-wrap{margin-top:18px;}
.history-wrap h3{font-size:15px; margin:0 0 8px;}
.history-list{display:flex; flex-wrap:wrap; gap:6px; max-height:140px; overflow-y:auto; padding:4px;}
.hist-chip{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}
.hist-chip.H{background:#d4a017;}
.hist-chip.T{background:#64748b;}
.stats-row{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; font-size:13.5px; color:var(--text-muted);}
.stats-row b{color:var(--text);}

/* share row */
.share-row{display:flex; justify-content:center; gap:10px; margin:26px 0; flex-wrap:wrap;}
.share-link{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); text-decoration:none; font-size:16px;
}
.share-link:hover{background:var(--primary); color:#fff; border-color:var(--primary);}

/* sections */
section{padding:50px 0;}
.section-title{text-align:center; font-size:clamp(22px,3.5vw,30px); margin:0 0 8px; font-weight:800;}
.section-sub{text-align:center; color:var(--text-muted); max-width:620px; margin:0 auto 34px; font-size:15px;}
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.feature-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px;}
.feature-card .fi{font-size:26px; margin-bottom:10px;}
.feature-card h3{font-size:16px; margin:0 0 6px;}
.feature-card p{font-size:13.5px; color:var(--text-muted); margin:0; line-height:1.5;}

.steps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px;}
.step-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; position:relative;}
.step-num{width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:10px;}
.step-card h3{font-size:15px; margin:0 0 6px;}
.step-card p{font-size:13.5px; color:var(--text-muted); margin:0; line-height:1.5;}

.content-block{max-width:820px; margin:0 auto;}
.content-block p{line-height:1.75; color:var(--text-muted); font-size:15px; margin-bottom:14px;}
.content-block h2{font-size:24px; margin-bottom:14px;}

.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden;}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--text); font-family:inherit;
  padding:16px 18px; font-weight:600; font-size:14.5px; display:flex; justify-content:space-between; align-items:center;
}
.faq-q .plus{transition:.2s; font-size:18px; color:var(--primary);}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 18px;}
.faq-a p{padding-bottom:16px; color:var(--text-muted); font-size:14px; line-height:1.6; margin:0;}

.cta-section{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-radius:20px; text-align:center;
  padding:48px 24px; color:#fff; max-width:1000px; margin:0 auto;
}
.cta-section h2{font-size:26px; margin:0 0 10px;}
.cta-section p{opacity:.9; margin:0 0 20px;}
.cta-btn{background:#fff; color:var(--primary-dark); border:none; padding:13px 32px; border-radius:12px; font-weight:700; font-size:15px;}

footer{border-top:1px solid var(--border); padding:36px 0 20px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; margin-bottom:24px;}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin:0 0 10px;}
.footer-grid a{display:block; text-decoration:none; color:var(--text-muted); font-size:13.5px; margin-bottom:8px;}
.footer-grid a:hover{color:var(--primary);}
.footer-bottom{text-align:center; font-size:12.5px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:18px;}
.disclaimer{font-size:11.5px; color:var(--text-muted); text-align:center; max-width:700px; margin:10px auto 0; line-height:1.6;}

/* cookie banner */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border);
  z-index:10000; padding:14px 20px; display:none; box-shadow:0 -6px 20px rgba(0,0,0,.1);
}
.cookie-banner.show{display:flex;}
.cookie-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.cookie-inner p{margin:0; font-size:13px; color:var(--text-muted); flex:1; min-width:220px;}
.cookie-inner a{color:var(--primary); text-decoration:underline;}
.cookie-actions{display:flex; gap:8px;}
.cookie-btn{padding:9px 18px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-family:inherit; font-weight:600; font-size:13px;}
.cookie-btn.primary{background:var(--primary); border-color:var(--primary); color:#fff;}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

.mobile-only{display:none;}
@media(max-width:760px){
  nav.primary-nav{display:none;}
  .hamburger{display:flex; align-items:center; justify-content:center;}
  .desktop-cta{display:none;}
  section.marketing{display:none;}
  .mobile-only{display:block;}
  .app-card{padding:16px; margin:14px auto;}
  .coin{width:120px; height:120px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}