/*
Theme Name: Kuddu Go
Theme URI: https://kuddugo.com
Author: Kuddu Limited
Description: Custom theme for Kuddu Go — "Ready. Set. Go." Learning that leads to doing.
Version: 1.0
Text Domain: kuddu-go
*/

:root{--ink:#111;--paper:#fbfbf8;--lime:#c7d300;--line:#e4e4df;--muted:#5f5f5b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:1460px;margin:auto;padding:0 38px}

header{height:78px;background:#fff;display:flex;align-items:center;gap:34px}
.logo{font-size:28px;font-weight:950;letter-spacing:-1.5px;white-space:nowrap}
.logo b{color:#b7c200}
nav{display:flex;gap:30px;font-weight:650}
.search{margin-left:auto;width:27px;height:27px;border:2px solid #111;border-radius:50%;position:relative}
.search:after{content:"";position:absolute;width:11px;height:2px;background:#111;right:-8px;bottom:-2px;transform:rotate(45deg)}
.btn{border:0;border-radius:999px;background:#c7d300;padding:13px 20px;font-weight:850;cursor:pointer}

.hero{padding:72px 0 60px;background:#fff}
.hero h1{font-size:clamp(66px,8vw,120px);line-height:.88;letter-spacing:-6px;margin:0}
.hero h1 span{color:#b5c000}
.hero p{font-size:22px;font-weight:750;margin:22px 0 0}

.worlds{display:grid;grid-template-columns:repeat(4,1fr);background:#111}
.world{height:365px;overflow:hidden;position:relative}
.world img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s;filter:none}
.world:hover img{transform:scale(1.025)}
.world:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.world.soon img{filter:grayscale(.55) brightness(.6)}
.world.soon:hover img{transform:none}
.world-label{position:absolute;left:22px;bottom:20px;color:#fff;font-size:22px;font-weight:850;letter-spacing:-.5px;z-index:2}
.soon-badge{position:absolute;top:18px;right:18px;background:var(--lime);color:#111;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px;border-radius:999px;z-index:2}
.hero-roadmap{margin-top:14px;font-size:15px;color:var(--muted);font-weight:600}

.english{padding:68px 0 82px}
.head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:1px;font-weight:900;color:#8d9700}
h2{font-size:46px;letter-spacing:-2px;margin:7px 0}
.lead{color:var(--muted);font-size:18px;line-height:1.5;max-width:600px}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{min-height:310px;border-radius:16px;padding:30px;position:relative;overflow:hidden;cursor:pointer;transition:.25s}
.card:hover{transform:translateY(-4px)}
.level{background:#aa99e6}
.talk{background:#98bea1}
.card h3{font-size:34px;letter-spacing:-1.4px;margin:0 0 10px;color:#fff}
.card p{font-size:18px;line-height:1.45;color:#fff;max-width:300px;margin:0}
.card .round{position:absolute;left:30px;bottom:28px;width:48px;height:48px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:24px}
.bubble{position:absolute;right:35px;bottom:42px;width:180px;height:125px;border-radius:50%;background:#fff}
.bubble:after{content:"";position:absolute;width:30px;height:30px;background:#fff;right:20px;bottom:-8px;transform:rotate(45deg)}
.bubble i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:30px;letter-spacing:7px;color:#6f5acb}
.talk .bubble{width:145px;height:105px;right:42px;bottom:58px}
.talk .bubble i{color:#4e7958}

.random-note{margin-top:17px;font-size:14px;color:#74746f}
.random-note strong{color:#111}

.features{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{padding:26px 22px;border-right:1px solid var(--line)}
.feature:last-child{border-right:0}
.feature strong{display:block;margin-bottom:5px}
.feature span{font-size:14px;color:var(--muted)}

footer{padding:35px 0;background:#fff}
.foot{display:flex;justify-content:space-between;gap:20px;color:#666;font-size:13px}

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:50;padding:18px}
.modal.open{display:grid;place-items:center}
.quiz{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:34px}
.quiz-top{display:flex;justify-content:space-between;align-items:start}
.quiz-top h2{font-size:36px;margin:4px 0}
.close{border:0;background:none;font-size:30px;cursor:pointer}
.progress{height:6px;background:#eee;border-radius:99px;margin:22px 0 30px;overflow:hidden}
.progress span{display:block;height:100%;background:#6651d6;width:0;transition:.2s}
.question{font-size:23px;font-weight:800;line-height:1.35;margin-bottom:18px}
.answers{display:grid;gap:10px}
.answer{padding:14px 16px;border:1px solid #ddd;border-radius:9px;background:#fff;text-align:left;cursor:pointer}
.answer.selected{border-color:#6651d6;background:#f2efff}
.actions{display:flex;justify-content:space-between;margin-top:25px}
.actions button{border:0;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer}
.next{background:#111;color:#fff}
.result{display:none;text-align:center;padding:25px}
.score{font-size:72px;font-weight:950;letter-spacing:-4px}
.again{border:0;border-radius:999px;background:#111;color:#fff;padding:13px 20px;font-weight:850;cursor:pointer;margin-top:18px}
.result-capture{max-width:360px;margin:24px auto 6px;text-align:left}
.result-capture-lead{font-size:14px;color:var(--muted);margin:0 0 10px;text-align:center}
.result-capture form{display:flex;gap:8px}
.result-capture input[type=email]{flex:1;padding:12px 14px;border:1px solid #ddd;border-radius:9px;font-size:14px}
.result-capture .join{border:0;border-radius:999px;background:#111;color:#fff;padding:12px 18px;font-weight:800;cursor:pointer;white-space:nowrap}
.result-capture .done{display:none;text-align:center}
.result-capture .done strong{display:block;font-size:16px;margin-bottom:4px}

.waitlist{width:min(460px,100%);background:#fff;border-radius:16px;padding:34px}
.waitlist h2{font-size:30px;margin:4px 0 8px}
.waitlist p{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 22px}
.waitlist form{display:flex;flex-direction:column;gap:12px}
.waitlist input[type=email]{padding:14px 16px;border:1px solid #ddd;border-radius:9px;font-size:15px}
.waitlist .join{border:0;border-radius:999px;background:#111;color:#fff;padding:14px 18px;font-weight:850;cursor:pointer}
.waitlist .done{display:none;text-align:center;padding:10px 0}
.waitlist .done strong{display:block;font-size:20px;margin-bottom:6px}

@media(max-width:900px){
  .wrap{padding:0 22px}
  nav{display:flex;gap:16px;font-size:14px}
  .worlds{grid-template-columns:1fr 1fr}
  .world{height:390px}
  .feature-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  header{height:68px;gap:12px}
  .logo{font-size:21px}
  nav{gap:10px;font-size:12px}
  .btn{display:none}
  .hero{padding:48px 0}
  .hero h1{font-size:64px;letter-spacing:-3px}
  .worlds,.cards,.feature-grid{grid-template-columns:1fr}
  .world{height:390px}
  .head{align-items:start;flex-direction:column}
  .feature{border-right:0;border-bottom:1px solid var(--line)}
  .foot{flex-direction:column}
}

/* ---------- About page ---------- */
.about-hero{background:#fff;padding:92px 0 86px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.kicker{text-transform:uppercase;letter-spacing:1.2px;font-size:13px;font-weight:900;color:#8d9700}
.about-hero h1{font-size:clamp(64px,7.5vw,118px);line-height:.9;letter-spacing:-6px;margin:12px 0 28px}
.about-hero h1 span{color:#b6c100}
.about-hero p{font-size:23px;line-height:1.5;max-width:650px;margin:0;color:#44443f}
.art{height:390px;position:relative}
.art .ring{position:absolute;width:285px;height:285px;border:48px solid #18a9c4;border-radius:50%;right:50px;top:42px}
.art .slash{position:absolute;width:310px;height:56px;background:#f54f73;border-radius:99px;right:6px;top:166px;transform:rotate(-28deg)}
.art .dot{position:absolute;width:65px;height:65px;border-radius:50%;background:#f2b634;right:318px;top:30px}
.art .block{position:absolute;width:120px;height:120px;background:#7a65dc;right:244px;bottom:26px;transform:rotate(13deg)}
.art .mini{position:absolute;width:35px;height:35px;border-radius:50%;background:#c7d300;right:14px;bottom:44px}

.manifesto{background:#111;color:#fff;padding:105px 0}
.manifesto-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:85px}
.manifesto h2{font-size:clamp(52px,6vw,88px);line-height:.95;letter-spacing:-4px;margin:0}
.manifesto h2 em{font-style:normal;color:#dbe600}
.manifesto-copy{font-size:24px;line-height:1.55;color:#e9e8e3}
.manifesto-copy p{margin:0 0 28px}
.manifesto-copy strong{color:#fff}

.actions{padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
.section-head h2{font-size:50px;letter-spacing:-2.5px;margin:0}
.section-head p{max-width:560px;font-size:18px;line-height:1.5;color:var(--muted);margin:0}
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.action{min-height:330px;padding:28px;position:relative;overflow:hidden}
.action h3{font-size:38px;letter-spacing:-1.5px;margin:0 0 8px}
.action p{font-size:16px;line-height:1.45;max-width:200px;margin:0}
.action.speak{background:#9b8be1}
.action.create{background:#ed795e}
.action.move{background:#8fbba1}
.action.build{background:#efbf48}
.action .shape{position:absolute;right:-20px;bottom:-20px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.75)}
.action.create .shape{border-radius:18px;transform:rotate(20deg);background:#765fda}
.action.move .shape{background:transparent;border:35px solid #fff}
.action.build .shape{border-radius:0;background:#202026;clip-path:polygon(0 100%,35% 55%,55% 72%,100% 0,100% 100%)}

.now{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:90px 0}
.now-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.now h2{font-size:64px;line-height:.96;letter-spacing:-3.5px;margin:0}
.now h2 span{color:#aeba00}
.now-copy{font-size:21px;line-height:1.6;color:#4e4e49}
.now-copy p{margin:0 0 22px}
.go-link{display:inline-flex;align-items:center;gap:13px;font-weight:900;color:#111}
.go-link i{font-style:normal;width:43px;height:43px;border-radius:50%;background:#c7d300;display:grid;place-items:center;font-size:23px}

.principles{padding:86px 0}
.principles h2{font-size:50px;letter-spacing:-2.5px;margin:0 0 34px}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cfcfc9}
.principle{padding:28px 35px 20px 0;border-right:1px solid #cfcfc9;margin-right:35px}
.principle:last-child{border-right:0}
.num{font-size:13px;font-weight:900;color:#8d9700}
.principle h3{font-size:27px;letter-spacing:-.8px;margin:28px 0 10px}
.principle p{font-size:17px;line-height:1.5;color:var(--muted);margin:0}

.end{padding:110px 0;background:#dbe600}
.end h2{font-size:clamp(68px,9vw,135px);line-height:.86;letter-spacing:-7px;margin:0}
.end p{font-size:22px;font-weight:750;margin:28px 0 0}

.founder{padding:90px 0;background:#fff;border-top:1px solid var(--line)}
.founder-grid{display:grid;grid-template-columns:220px 1fr;gap:50px;align-items:center}
.founder-photo{width:220px;height:220px;border-radius:50%;overflow:hidden;flex-shrink:0}
.founder-photo img,.founder-photo-placeholder{width:100%;height:100%;object-fit:cover;object-position:50% 31%;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.founder-photo-placeholder{background:#111;color:#dbe600;font-size:56px;font-weight:900;letter-spacing:-1px;display:grid;place-items:center}
.founder-copy h2{font-size:38px;letter-spacing:-1.5px;margin:8px 0 18px;display:flex;align-items:baseline;gap:12px}
.founder-name-cn{font-size:24px;color:var(--muted);font-weight:600}
.founder-copy p{font-size:18px;line-height:1.6;color:#44443f;max-width:640px;margin:0}

@media(max-width:900px){
  .hero-grid,.manifesto-grid,.now-grid{grid-template-columns:1fr}
  .art{height:300px}
  .action-grid{grid-template-columns:1fr 1fr}
  .principle-grid{grid-template-columns:1fr}
  .principle{border-right:0;border-bottom:1px solid #cfcfc9;margin-right:0;padding-right:0;padding-bottom:28px}
}
@media(max-width:600px){
  .about-hero{padding:58px 0}
  .about-hero h1{font-size:62px;letter-spacing:-3.5px}
  .about-hero p{font-size:19px}
  .art{height:230px}
  .art .ring{width:190px;height:190px;border-width:32px;right:30px}
  .art .slash{width:220px;height:40px;right:0;top:125px}
  .art .dot{right:220px;width:45px;height:45px}
  .art .block{width:80px;height:80px;right:170px}
  .manifesto{padding:70px 0}
  .manifesto h2{letter-spacing:-2.5px}
  .manifesto-copy{font-size:20px}
  .section-head{align-items:start;flex-direction:column}
  .action-grid{grid-template-columns:1fr}
  .action{min-height:260px}
  .now h2{font-size:50px}
  .principles h2{font-size:42px}
  .end{padding:75px 0}
  .end h2{font-size:67px;letter-spacing:-4px}
  .founder{padding:56px 0}
  .founder-grid{grid-template-columns:1fr;text-align:center;gap:22px}
  .founder-photo{width:150px;height:150px;margin:0 auto}
  .founder-copy h2{justify-content:center;font-size:30px}
  .founder-copy p{margin:0 auto}
}