:root{
  --blue:#1f43a6;
  --blue-dark:#153583;
  --blue-soft:#eef3ff;
  --yellow:#f7c934;
  --yellow-dark:#e2ac00;
  --text:#17315c;
  --text-soft:#587099;
  --white:#ffffff;
  --bg:#f6f8fe;
  --card:#ffffff;
  --shadow:0 16px 48px rgba(31,67,166,.12);
  --radius:28px;
}

.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:24px; }
.account-card { background:#fff; border:1px solid rgba(10,63,145,.16); border-radius:22px; padding:24px; box-shadow:0 16px 40px rgba(7,42,103,.08); }
.account-card h2 { margin-top:0; }
.secure-form { display:grid; gap:12px; }
.secure-form label { display:grid; gap:6px; font-weight:600; }
.secure-form input { width:100%; box-sizing:border-box; border:1px solid #b9c6db; border-radius:12px; padding:12px 13px; font:inherit; }
.secure-form input:focus { outline:3px solid rgba(255,213,0,.35); border-color:#0b55bd; }
.form-result { min-height:24px; margin:4px 0 0; font-weight:600; white-space:pre-line; }
.form-result.ok { color:#14763a; }
.form-result.error { color:#b3261e; }
.security-note { background:#eef5ff; border-left:5px solid #0b55bd; border-radius:12px; padding:14px; }
@media (max-width:800px) { .account-grid { grid-template-columns:1fr; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Fredoka", system-ui, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(247,201,52,.22), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}

.shell{width:min(1180px, calc(100% - 40px)); margin:0 auto}

.hero{
  padding:22px 0 50px;
  background:
    linear-gradient(180deg, rgba(31,67,166,.05), rgba(31,67,166,0)),
    linear-gradient(135deg, #ffffff 0%, #f5f8ff 50%, #fff9e7 100%);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(31,67,166,.08);
  box-shadow:var(--shadow);
  border-radius:999px;
  padding:12px 18px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:64px; height:64px; border-radius:18px}
.brand-name{display:block; font-size:1.8rem; font-weight:700; color:var(--blue)}
.brand-sub{display:block; font-size:.95rem; color:var(--text-soft)}
.nav-links{display:flex; gap:18px; flex-wrap:wrap}
.nav-links a{font-weight:500; color:var(--text)}
.nav-links a:hover{color:var(--blue)}
.nav-links .nav-play{
  display:inline-flex;align-items:center;gap:8px;margin:-7px -7px -7px 2px;
  padding:9px 16px;border-radius:999px;background:var(--blue);color:#fff;
  box-shadow:0 8px 20px rgba(31,67,166,.2)
}
.nav-links .nav-play:hover{color:#fff;background:var(--blue-dark)}

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:34px; padding-top:42px;
}
.eyebrow{
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(247,201,52,.22);
  color:var(--blue-dark);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.04em;
}
.hero-copy h1{
  font-size:clamp(2.5rem, 5vw, 4.8rem);
  line-height:1.02;
  margin:16px 0 14px;
  color:var(--blue-dark);
}
.hero-copy p{
  font-size:1.08rem;
  line-height:1.75;
  color:var(--text-soft);
  max-width:630px;
}
.hero-copy .hero-question{
  margin:0 0 4px;
  color:var(--blue-dark);
  font-size:1.22rem;
  font-weight:600;
}
.campaign-slogan{
  margin:0 0 14px;
  color:var(--blue-dark);
  font-size:clamp(1.15rem, 2vw, 1.55rem) !important;
  font-weight:700;
  line-height:1.2 !important;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 20px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:12px 22px; border-radius:999px;
  font-weight:600; transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(180deg, var(--yellow) 0%, #f0bb10 100%);
  color:#2f2f2f;
  box-shadow:0 12px 28px rgba(247,201,52,.35);
}
.btn-secondary{
  border:2px solid rgba(31,67,166,.15);
  background:#fff;
  color:var(--blue);
}
.btn.disabled{opacity:.75; pointer-events:none}
.play-btn{gap:12px;text-align:left;padding-inline:20px}
.play-btn .play-symbol{font-size:1.35rem;line-height:1}
.play-btn span:last-child{display:flex;flex-direction:column;line-height:1.05;font-size:1.05rem}
.play-btn small{font-size:.6rem;letter-spacing:.08em;margin-bottom:4px}
.hero-list{
  margin:0; padding-left:20px; color:var(--text);
}
.hero-list li{margin-bottom:8px}

.hero-visual{position:relative}
.phone-stack{
  min-height:620px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.phone-card{
  position:absolute;
  width:230px;
  border-radius:34px;
  padding:10px;
  background:#ffffff;
  box-shadow:0 26px 54px rgba(31,67,166,.18);
  border:1px solid rgba(31,67,166,.07);
}
.phone-card img{border-radius:26px}
.phone-card.main{width:270px; z-index:3}
.phone-card.tilt-left{left:0; top:110px; transform:rotate(-10deg)}
.phone-card.tilt-right{right:0; top:120px; transform:rotate(10deg)}

.mascot-badge{
  display:flex; align-items:center; gap:16px;
  background:#fff;
  border-radius:26px;
  padding:14px 22px 14px 12px;
  box-shadow:var(--shadow);
  width:max-content;
  margin:6px auto 0;
}
.mascot-badge img{width:104px; height:104px; object-fit:contain; margin:-20px 0 -12px -8px}
.mascot-badge strong{display:block; color:var(--blue); font-size:1.16rem}
.mascot-badge span{display:block; color:var(--text-soft); font-size:.95rem}

.section{padding:88px 0}
.section-head{max-width:820px; margin-bottom:32px}
.section-head.centered{text-align:center; margin-inline:auto}
.section-head h2{
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.1;
  margin:14px 0 12px;
  color:var(--blue-dark);
}
.section-head p{color:var(--text-soft); font-size:1.04rem; line-height:1.7}

.team-start-section{padding-bottom:32px;scroll-margin-top:110px}
.team-start-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}
.team-start-card{
  position:relative;
  padding:28px 24px 24px;
  border:1px solid rgba(31,67,166,.10);
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 40px rgba(32,74,120,.10);
}
.team-start-card h3{margin:14px 0 8px;color:var(--blue-dark)}
.team-start-card p{margin:0;color:var(--text-soft);line-height:1.65}
.team-start-card.admin-card{border-top:5px solid var(--blue)}
.team-start-card.share-card{border-top:5px solid var(--yellow)}
.team-start-card.member-card{border-top:5px solid var(--green)}
.step-number{
  position:absolute;top:16px;right:18px;
  display:grid;width:32px;height:32px;place-items:center;
  border-radius:50%;background:var(--blue-dark);color:#fff;font-weight:700;
}
.team-start-note{
  margin:20px auto 0;padding:14px 18px;max-width:820px;
  border-radius:14px;background:rgba(31,67,166,.08);text-align:center;
}
.team-membership-note{
  margin:10px auto 0;padding:14px 18px;max-width:820px;
  border:1px solid rgba(45,158,101,.18);border-radius:14px;
  background:rgba(45,158,101,.08);text-align:center;color:var(--text-soft);
}

.connected-section{padding-top:72px;padding-bottom:30px}
.connected-panel{
  display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  padding:36px;border-radius:34px;background:linear-gradient(135deg,#eef3ff 0%,#fff9e7 100%);
  border:1px solid rgba(31,67,166,.08);box-shadow:var(--shadow)
}
.connected-copy h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.08;margin:14px 0 12px;color:var(--blue-dark)}
.connected-copy p{margin:0;color:var(--text-soft);font-size:1.05rem;line-height:1.75}
.connected-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.connected-points div{background:#fff;border-radius:20px;padding:18px;border:1px solid rgba(31,67,166,.07)}
.connected-points strong,.connected-points span{display:block}
.connected-points strong{color:var(--blue-dark);margin-bottom:5px}
.connected-points span{color:var(--text-soft);font-size:.92rem;line-height:1.45}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
}
.feature-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  border:1px solid rgba(31,67,166,.06);
}
.feature-icon{
  width:58px; height:58px; display:grid; place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
  border-radius:18px;
  font-size:1.7rem;
  margin-bottom:14px;
}
.feature-icon.app-icon,.feature-icon.photo-icon{overflow:hidden;padding:0;background:#fff}
.feature-icon.app-icon img{width:100%;height:100%;object-fit:cover}
.feature-icon.photo-icon{width:86px;height:58px}
.feature-icon.photo-icon img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.feature-card h3{
  margin:0 0 8px;
  font-size:1.32rem;
  color:var(--blue-dark);
}
.feature-card p{margin:0; color:var(--text-soft); line-height:1.7}

.question-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}
.question-card{
  border-radius:var(--radius);
  padding:26px;
  border:1px solid rgba(31,67,166,.08);
  box-shadow:var(--shadow);
}
.question-card.blue{background:#eef3ff}
.question-card.yellow{background:#fff8dd}
.question-card.orange{background:#fff0e8}
.question-card.green{background:#eafbf7}
.question-card h3{margin:0 0 10px;color:var(--blue-dark);font-size:1.35rem}
.question-card p{margin:0;color:var(--text-soft);line-height:1.7}

.workday-band{background:linear-gradient(180deg,#fff9e7 0%,#f7f9ff 100%)}
.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scenario-card{background:#fff;border:1px solid rgba(31,67,166,.08);border-radius:28px;padding:22px;box-shadow:var(--shadow)}
.scenario-card.open-card{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}
.worker{display:flex;align-items:center;gap:12px}
.worker>span{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:var(--blue-soft);font-size:1.6rem}
.worker strong,.worker small{display:block}.worker strong{color:var(--blue-dark)}.worker small{color:var(--text-soft);margin-top:2px}
.scenario-card blockquote{margin:20px 0 0;padding:17px;border-radius:20px;background:#f6f8fe;color:var(--text);line-height:1.65;font-weight:500}
.open-card .worker>span{background:rgba(255,255,255,.16)}.open-card .worker strong,.open-card .worker small{color:#fff}.open-card blockquote{background:rgba(255,255,255,.12);color:#fff}

.light-band{
  background:
    linear-gradient(180deg, rgba(31,67,166,.04), rgba(31,67,166,.02)),
    linear-gradient(180deg, #fbfcff 0%, #f1f5ff 100%);
}
.screens-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:24px;
}
.screen-card{
  background:#fff;
  border-radius:32px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(31,67,166,.06);
}
.screen-card img{
  width:100%;
  aspect-ratio:5 / 10;
  object-fit:cover;
  background:#fff;
}
.screen-copy{padding:18px 18px 22px}
.screen-copy h3{
  margin:0 0 8px;
  font-size:1.22rem;
  color:var(--blue-dark);
}
.screen-copy p{margin:0; color:var(--text-soft); line-height:1.65}

.visual-showcase{padding-top:72px}
.visual-board-grid{display:grid;gap:26px}
.visual-board{margin:0;background:#fff;border-radius:32px;padding:14px;box-shadow:var(--shadow);border:1px solid rgba(31,67,166,.08);overflow:hidden}
.visual-board img{width:100%;border-radius:22px}
.visual-board figcaption{padding:15px 10px 8px;text-align:center;color:var(--text-soft);font-weight:500}

.split-panel{
  display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:stretch;
}
.split-copy, .split-card{
  background:#fff;
  border-radius:32px;
  box-shadow:var(--shadow);
  border:1px solid rgba(31,67,166,.06);
  padding:28px;
}
.split-copy h2{
  margin:14px 0 12px;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.1;
  color:var(--blue-dark);
}
.split-copy p{color:var(--text-soft); line-height:1.8}
.check-list{padding-left:18px; color:var(--text)}
.check-list li{margin-bottom:8px}
.logo-large{
  width:min(100%, 320px);
  margin:0 auto 24px;
  border-radius:34px;
}
.mini-stat-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.mini-stat{
  background:var(--blue-soft);
  border-radius:22px;
  padding:18px;
  text-align:center;
}
.mini-stat strong{
  display:block;
  font-size:1.8rem;
  color:var(--blue-dark);
}
.mini-stat span{
  color:var(--text-soft);
  font-size:.94rem;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:22px;
}
.faq-item{
  background:#fff;
  border-radius:28px;
  box-shadow:var(--shadow);
  border:1px solid rgba(31,67,166,.06);
  padding:24px;
}
.faq-item h3{margin:0 0 10px; color:var(--blue-dark)}
.faq-item p{margin:0; color:var(--text-soft); line-height:1.75}

.download-section{padding-top:72px;scroll-margin-top:0}
.download-box{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius:36px;
  padding:28px;
  color:#fff;
  box-shadow:0 22px 52px rgba(21,53,131,.24);
}
.download-brand{display:flex;align-items:center;gap:22px}
.download-brand>img{width:108px;height:108px;object-fit:cover;border-radius:28px;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.download-copy h2{margin:12px 0 10px; font-size:2rem}
.download-copy p{margin:0; color:rgba(255,255,255,.85)}
.download-actions{
  display:flex; flex-wrap:wrap; gap:12px;
}
.download-actions .google-play-badge{min-height:76px;padding:12px 24px}
.google-play-badge{
  min-height:62px;padding:9px 19px;border-radius:14px;background:#111;color:#fff;
  display:inline-flex;align-items:center;gap:13px;box-shadow:0 12px 28px rgba(0,0,0,.2)
}
.google-play-badge .google-play-mark{font-size:1.7rem}
.google-play-badge span:last-child{display:flex;flex-direction:column;line-height:1}
.google-play-badge small{font-size:.62rem;letter-spacing:.08em;margin-bottom:5px}
.google-play-badge strong{font-size:1.22rem;font-weight:500}
.google-play-badge.disabled{opacity:.82;pointer-events:none}
.download-box .btn-secondary{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}

.footer{
  padding:28px 0 46px;
  background:#0f2359;
  color:#fff;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .8fr .8fr;
  gap:18px;
  align-items:start;
}
.footer-brand{
  font-size:1.6rem;
  font-weight:700;
}
.footer p{margin:8px 0; color:rgba(255,255,255,.8)}
.footer-links{
  display:flex; flex-direction:column; gap:10px;
}
.footer a{color:#fff}
.footer a:hover{color:var(--yellow)}

.inner-page{
  background:linear-gradient(180deg, #f8faff 0%, #eef4ff 100%);
}
.top-back{padding:24px 0 0}
.back-link{color:var(--blue); font-weight:600}
.legal-wrap{padding:22px 0 72px}
.legal-card{
  background:#fff;
  border-radius:34px;
  padding:30px;
  box-shadow:var(--shadow);
  border:1px solid rgba(31,67,166,.06);
}
.legal-card h1{
  margin:16px 0 12px;
  font-size:clamp(2rem, 4vw, 3rem);
  color:var(--blue-dark);
}
.legal-card h2{
  margin-top:24px;
  color:var(--blue-dark);
}
.legal-card p, .legal-card li{
  color:var(--text-soft);
  line-height:1.8;
}
.legal-card ul{padding-left:18px}

@media (max-width: 980px){
  .hero-grid, .split-panel, .download-box, .footer-grid, .connected-panel{
    grid-template-columns:1fr;
    display:grid;
  }
  .download-box{align-items:flex-start}
  .phone-stack{min-height:560px}
  .scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .team-start-grid{grid-template-columns:1fr}
  .question-grid{grid-template-columns:1fr}
  .nav{border-radius:28px}
  .nav-links{gap:12px}
  .brand-name{font-size:1.5rem}
  .hero-grid{padding-top:28px}
  .phone-card{width:180px}
  .phone-card.main{width:220px}
  .phone-card.tilt-left{top:130px}
  .phone-card.tilt-right{top:140px}
  .mascot-badge{width:100%}
  .download-brand{width:100%}
}
@media (max-width: 560px){
  .scenario-grid{grid-template-columns:1fr}
  .shell{width:min(100% - 24px, 1180px)}
  .section{padding:68px 0}
  .hero-copy h1{font-size:2.3rem}
  .connected-panel{padding:24px}
  .connected-points{grid-template-columns:1fr}
  .phone-stack{
    min-height:auto;
    display:grid;
    gap:14px;
  }
  .phone-card{
    position:static;
    transform:none !important;
    width:100%;
  }
  .phone-card.main{width:100%}
  .mascot-badge{margin-top:16px}
  .download-actions{
    flex-direction:column;
    width:100%;
  }
  .download-actions .btn{
    width:100%;
  }
  .google-play-badge{width:100%;justify-content:center}
  .download-brand{align-items:flex-start}
  .download-brand>img{width:82px;height:82px;border-radius:22px}
}