/*
Theme Name: Aoi Spanish Pro Theme Red Yellow
Theme URI: https://example.com/
Author: OpenAI for Aoi Tezuka
Description: Spanish lesson LP WordPress theme with Spain-inspired red and yellow palette.
Version: 1.1
Text Domain: aoi-spanish-pro
*/

:root{
  --bg:#fff8ef;
  --paper:#fffdf8;
  --cream:#fff4da;
  --yellow:#f4c542;
  --yellow-soft:#f8deb0;
  --red:#b32025;
  --red-deep:#7d1218;
  --red-soft:#d55a4e;
  --text:#2f1d18;
  --muted:#7b6358;
  --line:rgba(179,32,37,.14);
  --shadow:0 18px 45px rgba(125,18,24,.10);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(244,197,66,.18), transparent 32%),
    radial-gradient(circle at top right, rgba(179,32,37,.10), transparent 28%),
    linear-gradient(180deg,#fff9f0 0%,#fff7ea 100%);
  line-height:1.9;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:rgba(255,248,239,.82);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1120px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--red-deep);
}
.header-nav{display:flex; gap:18px; align-items:center; font-size:13px; color:var(--muted)}
.header-nav a:hover{color:var(--red)}
.header-cta{
  padding:11px 16px; border-radius:999px; background:linear-gradient(135deg,var(--red),var(--red-soft));
  color:#fff; box-shadow:0 10px 24px rgba(179,32,37,.18); font-weight:700;
}

.section{
  max-width:1120px; margin:0 auto; padding:96px 20px;
}
.hero{
  min-height:100svh;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:44px;
  padding-top:112px;
}
.hero-copy .eyebrow{
  display:inline-block; margin-bottom:18px; padding:8px 14px; border-radius:999px;
  background:rgba(244,197,66,.22); color:var(--red-deep); font-size:12px; letter-spacing:.12em; font-weight:700;
}
.hero h1{
  margin:0 0 18px; font-size:clamp(34px,6vw,72px); line-height:1.08;
  letter-spacing:.02em; font-weight:800;
}
.hero .lead{
  font-size:clamp(15px,1.8vw,19px); color:var(--muted); max-width:560px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:0 24px; border-radius:999px; font-weight:700; transition:.25s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--red) 0%, var(--red-soft) 100%); color:#fff; box-shadow:0 14px 34px rgba(179,32,37,.22);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{
  background:#fff; border:1px solid rgba(179,32,37,.18); color:var(--red-deep);
}
.btn-secondary:hover{background:var(--cream)}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,247,230,.92));
  border:1px solid rgba(179,32,37,.12);
  box-shadow:var(--shadow);
  border-radius:30px; overflow:hidden; position:relative;
}
.hero-card::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:8px;
  background:linear-gradient(90deg,var(--yellow),var(--red),var(--yellow));
}
.hero-photo{
  aspect-ratio:4/5;
  background:
    linear-gradient(180deg, rgba(125,18,24,.08), rgba(244,197,66,.12)),
    url('https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
}
.hero-info{padding:24px}
.hero-points{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px}
.point{
  background:#fff; border:1px solid rgba(244,197,66,.34); border-radius:18px; padding:14px 14px 12px;
}
.point strong{display:block; color:var(--red); font-size:20px; line-height:1.1}
.point span{font-size:12px; color:var(--muted)}

.split{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:start;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,251,244,.96));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px;
}
.card.soft-red{
  background:linear-gradient(180deg, rgba(181,32,37,.92), rgba(125,18,24,.98)); color:#fff;
}
.card.soft-yellow{
  background:linear-gradient(180deg, rgba(248,222,176,.95), rgba(255,243,213,.98));
}
.kicker{
  color:var(--red); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; margin-bottom:12px;
}
h2{
  margin:0 0 16px; font-size:clamp(28px,4vw,46px); line-height:1.18;
}
p{margin:0 0 14px}
.muted{color:var(--muted)}
.checklist, .price-list{list-style:none; padding:0; margin:18px 0 0}
.checklist li, .price-list li{
  padding:12px 0; border-bottom:1px dashed rgba(179,32,37,.18);
}
.checklist li::before{
  content:"✓"; color:var(--red); font-weight:800; margin-right:10px;
}

.number-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;
}
.number-box{
  padding:24px; border-radius:24px; background:#fff; border:1px solid rgba(244,197,66,.36); box-shadow:var(--shadow);
}
.number-box .num{font-size:30px; font-weight:800; color:var(--red)}
.number-box h3{margin:6px 0 8px; font-size:18px}

.program-grid, .steps-grid, .faq-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.program-item, .step-item, .faq-item{
  background:#fff; padding:24px; border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow);
}
.program-item h3, .step-item h3, .faq-item h3{margin:0 0 10px; font-size:20px; color:var(--red-deep)}

.profile{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; align-items:center;
}
.profile-image{
  min-height:430px; border-radius:28px;
  background:
    linear-gradient(180deg, rgba(244,197,66,.10), rgba(179,32,37,.12)),
    url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
  box-shadow:var(--shadow);
}

.price-box{
  text-align:center; padding:42px 26px;
  background:linear-gradient(180deg, #fffdf8, #fff5de);
  border:1px solid rgba(244,197,66,.46);
  border-radius:30px; box-shadow:var(--shadow);
}
.price-box .price{
  font-size:clamp(40px,6vw,72px); font-weight:800; color:var(--red); line-height:1;
}
.price-box .yen{font-size:.45em}
.price-box .sub{color:var(--muted); margin-top:12px}

.cta-panel{
  background:linear-gradient(135deg,var(--red) 0%, var(--red-deep) 55%, #a62f22 100%);
  color:#fff; border-radius:32px; padding:40px; box-shadow:0 26px 60px rgba(125,18,24,.22);
}
.cta-panel .kicker{color:#ffe49d}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:24px}
.cta-panel .btn-primary{background:#fff; color:var(--red-deep)}
.cta-panel .btn-secondary{background:transparent; border-color:rgba(255,255,255,.28); color:#fff}

.footer{
  padding:36px 20px 70px; color:var(--muted); text-align:center; font-size:14px;
}

.reveal{
  opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1; transform:none;
}

.floating-cta{
  position:fixed; right:18px; bottom:18px; z-index:999;
  display:flex; flex-direction:column; gap:10px;
}
.floating-cta a{
  display:flex; align-items:center; justify-content:center;
  min-width:170px; min-height:52px; padding:0 18px;
  border-radius:999px; color:#fff; font-weight:800; box-shadow:0 14px 34px rgba(125,18,24,.24);
}
.floating-main{background:linear-gradient(135deg,var(--red),var(--red-soft))}
.floating-sub{background:linear-gradient(135deg,#f0b52b,#d98d00)}

@media (max-width: 920px){
  .hero, .split, .profile{grid-template-columns:1fr}
  .number-grid, .program-grid, .steps-grid, .faq-grid{grid-template-columns:1fr}
  .header-nav{display:none}
  .hero{min-height:auto}
  .floating-cta{left:14px; right:14px; bottom:12px}
  .floating-cta a{min-width:0; width:100%}
}