:root{
  --bg:#071d2c;
  --bg-2:#0d2d43;
  --surface:#0f3049;
  --surface-2:#11293a;
  --soft:#eaf6fb;
  --line:rgba(255,255,255,.1);
  --text:#eaf4f8;
  --muted:#b6cdd8;
  --heading:#ffffff;
  --primary:#4fc9e2;
  --primary-2:#8be4f3;
  --accent:#d0f6fb;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --card-shadow:0 18px 40px rgba(2,16,25,.12);
  --radius:22px;
  --radius-lg:30px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Noto Sans JP","Noto Sans KR","Noto Sans SC","PingFang SC","Hiragino Sans","Malgun Gothic","Microsoft YaHei",Arial,sans-serif;
  background:linear-gradient(180deg,#041a28 0%,#071d2c 40%,#0a2133 100%);
  color:var(--text);
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 40px), var(--max)); margin:0 auto}
.narrow{width:min(100%, 860px)}
.mt-32{margin-top:32px}
.center{text-align:center}

.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(18px);
  background:rgba(7,29,44,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:82px;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand img{
  width:48px; height:48px; border-radius:50%;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.brand span{display:flex; flex-direction:column; min-width:0}
.brand strong{
  font-size:1.06rem; letter-spacing:.02em; color:#fff; white-space:nowrap;
}
.brand small{
  color:var(--muted); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.site-nav{display:flex; align-items:center; gap:18px}
.site-nav ul{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.site-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; color:#d8e7ef; font-weight:600; font-size:.95rem;
}
.site-nav a:hover,.site-nav a.active{background:rgba(255,255,255,.08); color:#fff}
.lang-switch{display:flex; gap:8px; flex-wrap:wrap}
.lang-pill{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#d5edf4; padding:8px 12px; border-radius:999px; font-size:.82rem; font-weight:700;
}
.lang-pill.is-active{background:rgba(79,201,226,.16); border-color:rgba(79,201,226,.4); color:#fff}
.nav-toggle{display:none; width:48px; height:48px; border:0; border-radius:14px; background:rgba(255,255,255,.06); padding:0; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:999px}

.hero{
  position:relative;
  overflow:hidden;
}
.hero-home{padding:88px 0 46px}
.hero-page{padding:82px 0 24px}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 16%, rgba(79,201,226,.18), transparent 18rem),
    radial-gradient(circle at 82% 18%, rgba(79,201,226,.12), transparent 20rem),
    radial-gradient(circle at 80% 78%, rgba(139,228,243,.1), transparent 16rem),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.0));
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center;
}
.hero-copy h1,.page-title{
  margin:0 0 18px;
  font-size:clamp(2.2rem, 4vw, 4.4rem);
  line-height:1.05;
  color:var(--heading);
  letter-spacing:-.03em;
}
.lead,.page-intro{
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem, 1.4vw, 1.16rem);
  max-width:760px;
}
.page-title{font-size:clamp(2rem,3.2vw,3.2rem)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:16px; padding:8px 14px; border-radius:999px;
  background:rgba(79,201,226,.12); color:var(--accent);
  border:1px solid rgba(79,201,226,.22); font-size:.86rem; font-weight:700;
  letter-spacing:.03em;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:14px 22px; font-weight:700; cursor:pointer; transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#052334}
.btn-secondary{background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.1)}
.text-link{color:var(--primary-2); font-weight:700}
.pilot-inline{
  margin-top:28px; padding:18px 20px; border-radius:18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:8px;
}
.pilot-inline strong{color:#fff; font-size:1rem}
.pilot-inline span{color:var(--muted)}
.hero-visual{position:relative; min-height:460px}
.visual-card{
  position:absolute; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08);
  background:#0c2233;
}
.visual-card.primary{right:0; top:18px; width:min(100%,560px)}
.visual-card.primary img{aspect-ratio:4/3; object-fit:cover; width:100%}
.visual-card.secondary{
  left:0; bottom:14px; width:min(52%,260px); padding:18px; background:rgba(9,25,38,.92)
}
.visual-card.secondary img{border-radius:20px; background:#fff}

.section{padding:28px 0 64px}
.section-soft{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04))}
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:30px; max-width:800px}
.section-head.left{max-width:900px}
.section-head h2{margin:0; color:#fff; font-size:clamp(1.5rem, 2.8vw, 2.3rem); line-height:1.15}
.section-head p{margin:0; color:var(--muted)}

.grid{display:grid; gap:24px}
.platform-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
.cards-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
.info-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.founder-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.simple-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
.tech-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.contact-grid{grid-template-columns:1fr 1fr; align-items:start}

.icon-card,.media-card,.post-card,.founder-card,.info-card,.tech-card,.project-card,.policy-card,.results-panel,.contact-panel,.form-panel,.simple-point{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
}
.icon-card,.simple-point,.info-card{padding:22px}
.icon-dot{
  width:18px; height:18px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 0 0 6px rgba(79,201,226,.12);
  margin-bottom:18px;
}
.icon-card h3,.media-card h3,.post-card h3,.founder-card h3,.tech-card h3,.project-card h3,.policy-card h2{margin:0 0 10px; color:#fff}
.icon-card p,.media-card p,.post-card p,.founder-card p,.tech-card p,.project-card p,.policy-card p,.results-panel p,.simple-point{margin:0; color:var(--muted)}
.card-media{position:relative}
.card-media img{width:100%; aspect-ratio:16/10; object-fit:cover}
.media-card-body,.post-card-body,.tech-card-body,.project-card-body{padding:20px}
.meta-chip,.status-pill,.role{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; font-size:.8rem; font-weight:700; margin-bottom:12px;
}
.meta-chip,.role{background:rgba(79,201,226,.12); color:var(--accent); border:1px solid rgba(79,201,226,.18)}
.status-pill{background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.12)}
.status-active{background:rgba(58,195,130,.18); border-color:rgba(58,195,130,.3)}
.status-planned{background:rgba(79,201,226,.14); border-color:rgba(79,201,226,.3)}
.post-meta{color:#98bac8; font-size:.92rem; margin-bottom:14px}
.hero-meta{margin-top:8px}
.info-card span{display:block; color:#9fc0cf; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px}
.info-card strong{color:#fff; font-size:1.05rem; line-height:1.45}
.founder-mark img{width:66px; height:66px; border-radius:50%; background:#fff; margin-bottom:14px}
.timeline{display:grid; gap:16px}
.timeline-item{
  position:relative; padding:18px 18px 18px 22px; border-left:3px solid rgba(79,201,226,.45);
  background:rgba(255,255,255,.03); border-radius:18px; border:1px solid rgba(255,255,255,.06)
}
.timeline-step{display:block; color:#fff; font-weight:800; margin-bottom:8px}
.notice-box{
  margin-top:24px; padding:18px 20px; border-radius:18px;
  background:rgba(79,201,226,.12); border:1px solid rgba(79,201,226,.18); color:#dff9ff
}
.results-panel{padding:28px}
.results-placeholder{
  margin-top:18px; padding:18px; border:1px dashed rgba(79,201,226,.3); border-radius:18px;
  color:var(--accent); font-weight:700; text-align:center; background:rgba(79,201,226,.06)
}
.feature-image{
  overflow:hidden; border-radius:28px; margin-bottom:28px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)
}
.feature-image img{width:100%; max-height:440px; object-fit:cover}
.rich-text{color:#dbeaf0}
.rich-text p,.rich-text ul{margin:0 0 18px}
.rich-text ul{padding-left:20px}
.rich-text li{margin-bottom:8px}
.contact-list{display:grid; gap:16px}
.map-frame{margin-top:18px; overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.08); min-height:420px}
.map-frame iframe{width:100%; height:100%; min-height:420px; border:0}
.form-panel{padding:24px}
.form-panel h2{margin:0 0 18px; color:#fff}
.contact-form{display:grid; gap:14px}
.contact-form label{display:grid; gap:8px}
.contact-form span{font-weight:700; color:#e5f7fb}
.contact-form input,.contact-form textarea{
  width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:rgba(3,17,26,.48); color:#fff; outline:none
}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(79,201,226,.5); box-shadow:0 0 0 4px rgba(79,201,226,.14)}
.consent{display:flex !important; align-items:flex-start; gap:10px}
.consent input{width:18px !important; height:18px; margin-top:4px}
.form-message{
  padding:14px 16px; border-radius:16px; margin-bottom:14px; font-weight:600
}
.form-message.success{background:rgba(58,195,130,.16); border:1px solid rgba(58,195,130,.3); color:#eafff4}
.form-message.error{background:rgba(255,95,95,.16); border:1px solid rgba(255,95,95,.3); color:#fff1f1}
.hp-field{position:absolute !important; left:-9999px !important; opacity:0 !important; pointer-events:none !important}
.policy-stack{display:grid; gap:18px}
.policy-card{padding:24px}
.policy-card h2{font-size:1.2rem}
.policy-card p{white-space:normal}

.site-footer{
  padding:48px 0 26px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(2,12,18,.36)
}
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; align-items:start;
}
.footer-brand{display:flex; gap:14px}
.footer-brand img{width:52px; height:52px; border-radius:50%; background:#fff}
.footer-brand strong{color:#fff; font-size:1.02rem}
.footer-brand p{margin:6px 0 0; color:var(--muted)}
.footer-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer-list li,.footer-list a{color:var(--muted)}
.footer-list a:hover{color:#fff}
.footer-bottom{margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06)}
.footer-bottom p{margin:0; color:#9eb5c2}
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:45;
  padding:13px 18px; border-radius:999px; background:#18c37d; color:#082415; font-weight:800; box-shadow:var(--shadow)
}

.cookie-banner{
  position:fixed; left:0; right:0; bottom:18px; z-index:60;
}
.cookie-card{
  width:min(calc(100% - 40px), 1040px);
  margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:18px;
  padding:18px 20px; border-radius:22px;
  background:rgba(7,29,44,.94); border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow)
}
.cookie-card p{margin:6px 0 0; color:var(--muted)}
.cookie-options{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px}
.cookie-options label{display:inline-flex; align-items:center; gap:8px; color:#e7f8fb}
.cookie-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cookie-actions .btn{padding:12px 18px}

@media (max-width: 1100px){
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-grid,.simple-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .site-nav{
    position:fixed; inset:82px 20px auto 20px; display:none; flex-direction:column; align-items:stretch;
    padding:18px; border-radius:24px; background:rgba(7,29,44,.98); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)
  }
  .site-nav.is-open{display:flex}
  .site-nav ul{flex-direction:column; align-items:stretch}
  .site-nav a{justify-content:flex-start}
  .nav-toggle{display:block}
  .hero-grid,.contact-grid,.footer-grid,.info-grid,.founder-grid,.tech-grid{grid-template-columns:1fr}
  .hero-visual{min-height:420px}
  .visual-card.primary{position:relative; top:0; right:auto; width:100%}
  .visual-card.secondary{position:absolute; left:12px; bottom:-10px; width:42%}
  .cookie-card{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .container{width:min(calc(100% - 28px), var(--max))}
  .cards-grid,.platform-grid,.simple-grid{grid-template-columns:1fr}
  .hero-home{padding-top:64px}
  .site-header .brand small{display:none}
  .hero-copy h1,.page-title{font-size:clamp(2rem,9vw,3rem)}
  .btn{width:100%}
  .hero-actions{flex-direction:column}
  .visual-card.secondary{display:none}
  .wa-float{right:14px; left:14px; text-align:center}
  .cookie-actions{flex-direction:column}
  .cookie-actions .btn{width:100%}
}