@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Serif+JP:wght@500;700&display=swap');

:root{
  --sa-bg:#1a0f3d;
  --sa-bg2:#2d145a;
  --sa-bg3:#3f1f6b;
  --sa-surface:#ffffff;
  --sa-card:#241147;
  --sa-card2:#2c1654;
  --sa-accent:#f3c94b;
  --sa-accent-2:#6b6bff;
  --sa-text:#f7f2ff;
  --sa-muted:#d7ccf4;
  --sa-line:rgba(255,255,255,.15);
  --sa-shadow:0 20px 45px rgba(16,10,40,.35);
  --sa-radius:20px;
}

body.sa-lp{
  font:16px/1.7 "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  color:var(--sa-text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(107,107,255,.45), transparent 60%),
    radial-gradient(1000px 600px at 95% 5%, rgba(243,201,75,.25), transparent 65%),
    linear-gradient(180deg, var(--sa-bg), var(--sa-bg2) 45%, var(--sa-bg3));
}

h1,h2,h3{font-family:"Noto Serif JP", serif;margin:0}

.sa-container{max-width:1120px;margin:0 auto;padding:0 20px}

.sa-header{
  position:sticky;top:0;z-index:20;
  background:rgba(20,10,44,.75);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--sa-line);
}
.sa-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.sa-brand{font-weight:700;letter-spacing:.2px}
.sa-nav{display:flex;align-items:center;gap:16px;font-size:14px}
.sa-nav a{color:var(--sa-muted)}
.sa-nav a:hover{color:var(--sa-text)}

.sa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:999px;
  background:linear-gradient(135deg, var(--sa-accent), #ffd76f);
  color:#3b2500;font-weight:700;border:0;
  box-shadow:0 12px 30px rgba(243,201,75,.35);
}
.sa-btn--sm{padding:10px 16px;font-size:13px}
.sa-btn--block{width:100%}

.sa-hero{padding:70px 0 40px;position:relative}
.sa-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.sa-hero__content{animation:sa-fade-up .9s ease both}
.sa-hero h1{font-size:44px;line-height:1.2}
.sa-hero h1 span{color:var(--sa-accent)}
.sa-lead{margin:14px 0 18px;color:var(--sa-muted);font-size:17px}
.sa-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  font-size:13px;color:var(--sa-muted);
}
.sa-hero__actions{margin-top:18px}
.sa-note{color:var(--sa-muted);font-size:12px;margin:8px 0 0}

.sa-metrics{display:flex;gap:16px;margin:18px 0}
.sa-metrics > div{background:rgba(255,255,255,.08);border:1px solid var(--sa-line);padding:12px 14px;border-radius:14px;min-width:120px}
.sa-metrics__label{font-size:12px;color:var(--sa-muted);margin:0}
.sa-metrics__value{font-size:26px;font-weight:700;margin:2px 0 0}
.sa-metrics__value span{font-size:14px;margin-left:2px}

.sa-hero__visual{position:relative;display:grid;place-items:center;animation:sa-float 5s ease-in-out infinite}
.sa-hero__glow{position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(243,201,75,.5), transparent 70%)}
.sa-hero__card{
  width:320px;background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid var(--sa-line);border-radius:var(--sa-radius);
  padding:18px;box-shadow:var(--sa-shadow);position:relative;
}
.sa-hero__badge{
  position:absolute;top:18px;right:18px;
  background:#5b3bb7;color:white;padding:6px 10px;border-radius:999px;font-size:12px
}
.sa-hero__photo{height:180px;border-radius:16px;background:linear-gradient(120deg, #b696ff, #f5d67f);margin-bottom:14px}
.sa-hero__list div{height:10px;border-radius:999px;background:rgba(255,255,255,.25);margin:10px 0}

.sa-section{padding:60px 0}
.sa-section__head{margin-bottom:26px}
.sa-section__head h2{font-size:30px}
.sa-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--sa-muted);margin:0 0 8px}

.sa-grid{display:grid;gap:20px}
.sa-grid--3{grid-template-columns:repeat(3,1fr)}

.sa-card{
  background:linear-gradient(160deg, var(--sa-card), var(--sa-card2));
  border:1px solid var(--sa-line);
  border-radius:var(--sa-radius);
  padding:22px;box-shadow:var(--sa-shadow);
  animation:sa-fade-up .8s ease both;
}
.sa-card:nth-child(2){animation-delay:.1s}
.sa-card:nth-child(3){animation-delay:.2s}

.sa-section--cases{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.sa-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sa-case{
  background:white;color:#2a1a4a;border-radius:16px;padding:20px;box-shadow:var(--sa-shadow);
  position:relative;overflow:hidden;min-height:200px
}
.sa-case span{font-size:12px;color:#7254b2}
.sa-case h3{font-size:18px;margin:8px 0}
.sa-case p{color:#5e4f78}

.sa-section--why{
  background:linear-gradient(140deg, #2f1a63, #47208d);
}
.sa-why{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.sa-why__copy p{color:var(--sa-muted)}
.sa-why__art{position:relative;height:260px;border-radius:24px;background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));border:1px solid var(--sa-line)}
.sa-why__bubble{position:absolute;right:30px;bottom:30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #f3c94b, #ffffff)}
.sa-why__bubble--sm{width:70px;height:70px;right:130px;bottom:110px;background:radial-gradient(circle at 30% 30%, #6b6bff, #ffffff)}

.sa-metrics-grid .sa-metric{
  background:rgba(255,255,255,.08);
  border:1px solid var(--sa-line);
  border-radius:var(--sa-radius);
  padding:20px;text-align:center
}
.sa-metrics-grid h3{font-size:44px;margin:8px 0;color:var(--sa-accent)}
.sa-metrics-grid h3 span{font-size:18px}
.sa-metrics-grid p{color:var(--sa-muted);margin:0}

.sa-section--pricing{background:rgba(255,255,255,.05)}
.sa-plan{
  background:white;color:#2a1a4a;border-radius:18px;padding:22px;box-shadow:var(--sa-shadow)
}
.sa-plan__price{font-size:20px;font-weight:700;margin:8px 0}
.sa-plan ul{padding-left:18px;margin:0;color:#5e4f78}
.sa-plan--main{border:2px solid #f3c94b;transform:translateY(-10px)}

.sa-prose{
  background:rgba(255,255,255,.08);
  border:1px solid var(--sa-line);
  border-radius:var(--sa-radius);
  padding:22px;color:var(--sa-muted)
}

.sa-section--cta{padding-bottom:80px}
.sa-cta{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.sa-cta h2{font-size:30px}
.sa-cta p{color:var(--sa-muted)}
.sa-form{
  background:rgba(255,255,255,.08);
  border:1px solid var(--sa-line);
  border-radius:var(--sa-radius);
  padding:20px
}
.sa-form label{display:block;font-size:12px;color:var(--sa-muted);margin:12px 0}
.sa-form input,.sa-form textarea{
  width:100%;margin-top:6px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:rgba(10,8,20,.45);color:var(--sa-text)
}

.sa-footer{padding:24px 0 36px;border-top:1px solid var(--sa-line);color:var(--sa-muted)}

@keyframes sa-fade-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes sa-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@media (max-width: 980px){
  .sa-hero__grid,.sa-why,.sa-cta{grid-template-columns:1fr}
  .sa-grid--3,.sa-cases{grid-template-columns:1fr}
  .sa-hero h1{font-size:34px}
  .sa-nav{display:none}
  .sa-hero__visual{margin-top:16px}
  .sa-plan--main{transform:none}
}