/*
Theme Name: Madio Coming Soon
Theme URI: https://madio.dk
Author: Madio
Description: Minimal one-page teaser / coming-soon WordPress theme for Madio.
Version: 1.0.0
Text Domain: madio-coming-soon
*/

:root{
  --madio-green:#A8D400;
  --madio-ink:#111111;
  --madio-muted:#6C7068;
  --madio-line:#E6E8DE;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Poppins,Arial,sans-serif;color:var(--madio-ink)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 30%, rgba(168,212,0,.18), transparent 28%),
    linear-gradient(180deg,#FCFCF8 0%,#F3F5ED 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.madio-wrap{max-width:1180px;margin:auto;padding:0 24px}
.madio-header{padding:28px 0}
.madio-nav{display:flex;align-items:center;justify-content:space-between}
.madio-brand img{height:56px;width:auto;display:block}
.madio-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;background:#EEF8C7;
  font-size:13px;font-weight:700;
}
.madio-dot{width:9px;height:9px;border-radius:50%;background:var(--madio-green)}
.madio-hero{
  min-height:calc(100vh - 160px);
  display:grid;align-items:center;
  padding:40px 0 80px;
}
.madio-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.madio-title{
  font-size:clamp(52px,7vw,92px);
  line-height:.98;letter-spacing:-4px;
  margin:0 0 28px;
}
.madio-title span{color:#8CB600}
.madio-lead{
  max-width:680px;
  font-size:20px;line-height:1.7;color:var(--madio-muted);
  margin:0 0 30px;
}
.madio-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.madio-tag{
  padding:10px 14px;border:1px solid var(--madio-line);
  background:rgba(255,255,255,.72);
  border-radius:14px;font-size:13px;font-weight:600
}
.madio-note{font-size:13px;color:#8A8D85;margin-top:24px}
.madio-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:560px}
.madio-orb{
  position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#C9F23C 0%,var(--madio-green) 58%,#8AB500 100%);
  box-shadow:0 35px 85px rgba(168,212,0,.26);
}
.madio-phone{
  width:290px;height:580px;background:#111;border-radius:48px;padding:10px;
  position:relative;z-index:2;transform:rotate(4deg);
  box-shadow:0 35px 70px rgba(0,0,0,.22);
}
.madio-screen{
  height:100%;background:#FAFAF6;border-radius:40px;padding:22px 18px;overflow:hidden;
}
.madio-notch{width:102px;height:25px;border-radius:15px;background:#111;margin:-10px auto 18px}
.madio-apphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.madio-apphead img{width:46px;height:46px;border-radius:12px}
.madio-week{font-size:20px;font-weight:800;margin-bottom:12px}
.madio-day{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EAEBE4;
  border-radius:17px;padding:14px;margin:10px 0;
  box-shadow:0 5px 16px rgba(0,0,0,.035)
}
.madio-food{width:50px;height:50px;border-radius:13px;background:linear-gradient(135deg,#F0D87F,#D7A842)}
.madio-food.two{background:linear-gradient(135deg,#D6674A,#9B3825)}
.madio-food.three{background:linear-gradient(135deg,#A8CE61,#5C8A39)}
.madio-day b{font-size:14px}
.madio-day small{display:block;color:#8A8A8A;margin-top:3px}
.madio-tick{
  margin-left:auto;width:25px;height:25px;border-radius:50%;
  background:var(--madio-green);display:grid;place-items:center;font-weight:900
}
.madio-float{
  position:absolute;z-index:3;background:#fff;border-radius:18px;padding:15px 18px;
  box-shadow:0 18px 45px rgba(0,0,0,.13);font-size:13px;font-weight:700
}
.madio-float.one{top:115px;right:-5px}
.madio-float.two{bottom:105px;left:-15px}
.madio-float small{display:block;font-weight:500;color:#888;margin-top:3px}
.madio-footer{
  border-top:1px solid var(--madio-line);
  padding:26px 0 34px;
  color:#858880;font-size:12px;
}
.madio-foot{display:flex;justify-content:space-between;align-items:center;gap:20px}
.madio-foot img{height:36px;width:auto}
@media(max-width:900px){
  .madio-grid{grid-template-columns:1fr;gap:28px}
  .madio-hero{padding-top:20px}
  .madio-visual{min-height:500px}
  .madio-orb{width:360px;height:360px}
}
@media(max-width:560px){
  .madio-wrap{padding:0 18px}
  .madio-brand img{height:44px}
  .madio-badge{font-size:11px;padding:8px 11px}
  .madio-title{letter-spacing:-2.5px}
  .madio-lead{font-size:17px}
  .madio-visual{min-height:460px}
  .madio-phone{width:245px;height:495px}
  .madio-orb{width:310px;height:310px}
  .madio-float{display:none}
  .madio-foot{flex-direction:column;align-items:flex-start}
}