/* index page styles */
/* Top page overrides: tighter letter-spacing on headings */
.sec-h{font-weight:700;letter-spacing:0}
.sec-sub{font-weight:400}

/* ===== HERO ===== */
#hero{
  padding:0;margin:0;
  background:linear-gradient(165deg,#153218 0%,#1a4520 20%,var(--brand-dark) 50%,var(--brand) 80%,#3a8a33 100%);
  position:relative;overflow:hidden;
}
#hero::after{
  content:'';position:absolute;top:-20%;left:-10%;width:120%;height:200%;
  background:linear-gradient(160deg,transparent 42%,rgba(181,149,106,.05) 46%,rgba(181,149,106,.09) 50%,rgba(181,149,106,.05) 54%,transparent 58%);
  pointer-events:none;
}
#hero::before{
  content:'';position:absolute;top:20%;right:-5%;width:60%;height:80%;
  background:radial-gradient(ellipse at 60% 50%,rgba(90,174,82,.12) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner{
  display:grid;grid-template-columns:2fr 3fr;gap:48px;
  align-items:center;padding-top:140px;padding-bottom:0;
  position:relative;z-index:1;
}
.hero-text{padding-bottom:80px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-head);font-size:var(--fs-xs);font-weight:500;
  color:rgba(253,250,247,.4);border:1px solid rgba(253,250,247,.12);
  border-radius:var(--r-full);padding:6px 18px;margin-bottom:36px;letter-spacing:.04em;
}
.hero-badge svg{width:14px;height:14px;opacity:.6}
.hero-h{
  font-family:var(--f-head);font-size:clamp(26px,3.2vw,40px);font-weight:700;
  line-height:1.55;color:var(--ci-light);margin-bottom:16px;
  word-break:keep-all;overflow-wrap:break-word;
}
.hero-h .hero-h-line3{display:block;margin-top:8px;font-size:clamp(20px,2.4vw,28px);font-weight:600;color:rgba(253,250,247,.7)}
.hero-sub{
  font-family:var(--f-body);font-size:var(--fs-md);font-weight:400;
  color:rgba(253,250,247,.4);line-height:1.8;margin-bottom:0;
  opacity:0;animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) .6s both;
}

/* CTA bridge */
.hero-cta-bridge{position:relative;z-index:2;margin-top:-24px}
.hero-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:500px;width:100%}
.hero-btn-white,.hero-btn-accent{white-space:nowrap}
.hero-btn-white{
  font-family:var(--f-head);font-size:var(--fs-sm);font-weight:700;
  background:var(--ci-light);color:var(--brand);
  padding:0 32px;height:48px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  transition: box-shadow .3s, transform .3s;border:1.5px solid var(--ci-gold-sub);cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.hero-btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.12)}
.hero-btn-accent{
  font-family:var(--f-head);font-size:var(--fs-sm);font-weight:600;
  background:var(--brand);color:var(--ci-light);border:1.5px solid var(--ci-gold-sub);
  padding:0 32px;height:48px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  transition: background .3s, box-shadow .3s, transform .3s;cursor:pointer;box-shadow:0 2px 12px rgba(46,107,39,.2);
}
.hero-btn-accent:hover{background:var(--brand-light);transform:translateY(-1px);box-shadow:0 6px 24px rgba(46,107,39,.25)}

/* Devices */
.hero-visual{position:relative;align-self:end}
.hero-devices{position:relative;margin-right:-120px;margin-bottom:-30px}
.device-pc{
  width:115%;aspect-ratio:2000/1177;border-radius:12px 12px 0 0;display:block;
  box-shadow:0 -8px 60px rgba(0,0,0,.3),0 0 0 1px rgba(253,250,247,.08),0 20px 60px rgba(0,0,0,.2),0 0 80px rgba(253,250,247,.12);
}
.device-sp{
  position:absolute;bottom:10px;right:calc(-4% + 20px);width:22%;aspect-ratio:980/1931;
  filter:drop-shadow(-6px 6px 24px rgba(0,0,0,.35));border-radius:12px;
}

/* Hero hamburger color */
.nav-ham .ham-close{color:rgba(253,250,247,.8)}
nav.scrolled .nav-ham .ham-close{color:var(--ink)}

/* Entrance animation — hero-sub only */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ===== VIDEO SECTION ===== */
#video-sec{background:var(--bg-2);padding:64px 0;text-align:center}
.video-sec-inner{max-width:720px;margin:0 auto}
.video-sec-thumb{
  position:relative;cursor:pointer;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 4px 24px rgba(46,107,39,.14);aspect-ratio:16/9;
  background:linear-gradient(160deg,#1F5420,var(--brand),#5AAE52);
  display:flex;flex-direction:column;align-items:center;padding:32px 24px 24px;
}
.video-sec-thumb .sec-h{color:var(--ci-light);margin-bottom:4px}
.video-sec-sub{font-size:var(--fs-sm);color:rgba(253,250,247,.5);margin-bottom:0}
.video-sec-thumb img{width:clamp(360px,72%,576px);height:auto;opacity:.85;transition:opacity .3s;filter:brightness(0) invert(1);margin-top:auto}
.video-sec-thumb:hover img{opacity:.6}
.video-sec-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:rgba(253,250,247,.9);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.video-sec-play svg{width:20px;height:20px;fill:var(--brand);margin-left:3px}

/* ===== SCENES ===== */
#scenes{background:var(--bg);padding:72px 0 48px}
.scenes-label{text-align:center;margin-bottom:24px}
.scenes-label span{font-size:var(--fs-md);font-weight:500;color:var(--ink-3);position:relative;padding:0 20px}
.scenes-label span::before,.scenes-label span::after{content:'';position:absolute;top:50%;width:12px;height:1px;background:var(--ink-5)}
.scenes-label span::before{right:100%}
.scenes-label span::after{left:100%}
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scene-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 24px rgba(46,107,39,.14);padding:32px 28px;transition: border-color .3s, box-shadow .3s;position:relative;overflow:hidden}
.scene-card:hover{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.scene-card-tag{font-size:var(--fs-xs);font-weight:500;color:var(--brand);margin-bottom:4px;padding-right:64px}
.scene-card-t{font-size:var(--fs-lg);font-weight:700;margin-bottom:10px;line-height:1.45;color:var(--ink);padding-right:64px}
.scene-card-d{font-size:var(--fs-sm);font-weight:400;color:var(--ink-3);line-height:1.75;margin-bottom:16px}
.scene-card-link{font-size:var(--fs-xs);font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.scene-card-link:hover{gap:8px}
.scene-card-link svg{width:14px;height:14px}
.scene-card-illust{position:absolute;top:20px;right:16px;width:80px;height:80px;border-radius:50%;background:var(--brand-bg);display:flex;align-items:center;justify-content:center;color:var(--brand);opacity:.5}

/* ===== LOGO STRIP ===== */
#logos{background:var(--bg);padding:0 0 56px;text-align:center}
.logos-row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}

/* ===== FEATURE SUMMARY ===== */
#feat-summary{background:var(--bg);padding:100px 0}
.feat-s-sub{font-size:var(--fs-md);font-weight:400;color:var(--ink-3);line-height:1.8}
.feat-s-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.feat-s-badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.feat-s-badge{font-size:var(--fs-xs);font-weight:600;background:var(--gold-bg);color:var(--gold);padding:6px 16px;border-radius:var(--r-full);border:1px solid var(--gold-l)}
.feat-s-visual{position:relative}
.feat-s-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 4px 24px rgba(46,107,39,.14);padding:40px;text-align:center;position:relative;overflow:hidden}
.feat-s-card::before{content:'FLR';font-size:min(40vw,220px);font-weight:900;line-height:1;color:rgba(46,107,39,.06);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);pointer-events:none;letter-spacing:.15em;text-align:center}
.feat-s-card p{position:relative;z-index:1;font-size:var(--fs-md);font-weight:400;line-height:2;color:var(--ink-2)}
.feat-s-card strong{font-weight:700;color:var(--brand)}
.feat-s-card em{color:var(--brand);font-weight:700;font-style:normal}

/* ===== ICE CREAM ===== */
.ice-callout{margin-top:48px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 4px 24px rgba(46,107,39,.14);padding:40px;overflow:hidden}
.ice-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;margin-bottom:-20px;position:relative;z-index:2}
.ice-item{text-align:center}
.ice-label{font-family:var(--f-head);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin-bottom:4px}
.ice-sub{font-size:var(--fs-sm);color:var(--ink-3)}
.ice-sub em{color:var(--brand);font-style:normal;font-weight:700}
.ice-sub .warn{color:#C05538;font-weight:700}
.ice-photo{border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px;position:relative;z-index:1}
.ice-photo img{width:100%;height:auto;display:block}
.ice-caption{font-size:var(--fs-md);font-weight:700;color:var(--ink);line-height:1.5;text-align:center}
.ice-caption span{background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 2px}
.ice-desc{font-size:var(--fs-sm);color:var(--ink-3);margin-top:12px;line-height:1.7;text-align:center}

/* ===== RESULTS ===== */
#results{background:var(--bg-2);padding:80px 0}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.r-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 24px rgba(46,107,39,.14);padding:32px 16px;text-align:center;transition: border-color .3s, box-shadow .3s}
.r-card:hover{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.r-n{font-size:clamp(32px,4vw,48px);font-weight:700;color:var(--brand);line-height:1}
.r-u{font-size:var(--fs-md);font-weight:600;color:var(--brand)}
.r-l{font-size:var(--fs-sm);color:var(--ink-3);margin-top:10px;font-weight:400}

/* ===== VIDEO MODAL ===== */
.video-modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(30,27,24,.85);backdrop-filter:blur(8px);align-items:center;justify-content:center}
.video-modal-inner{position:relative;width:90%;max-width:800px;aspect-ratio:16/9;background:var(--bg);border-radius:var(--r-lg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.video-modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:var(--ci-light);font-size:28px;cursor:pointer;line-height:1}
.video-modal-msg{text-align:center;padding:24px}
.video-modal-msg-title{font-family:var(--f-head);font-size:clamp(20px,2.4vw,28px);font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.5}
.video-modal-msg-sub{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7}

/* ===== RESPONSIVE — TABLET ===== */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:32px;padding-top:88px;padding-bottom:0}
  .hero-text{padding:0 0 32px;text-align:center}
  .hero-badge{margin-left:auto;margin-right:auto}
  .hero-btns{margin-left:auto;margin-right:auto}
  .hero-visual{padding:0 20px 0}
  .hero-devices{margin-right:0;margin-bottom:-24px}
  .device-pc{width:100%;border-radius:10px 10px 0 0}
  .device-sp{width:20%;right:0;bottom:24px}
  .scene-grid{grid-template-columns:1fr}
  .feat-s-grid{grid-template-columns:1fr;gap:40px}
  .results-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== RESPONSIVE — MOBILE ===== */
@media(max-width:768px){
  .hero-text{padding:24px 0 0}
  .hero-h{font-size:clamp(22px,5.8vw,32px)}
  .hero-h .hero-h-line3{font-size:clamp(18px,4.5vw,24px)}
  .hero-sub{font-size:var(--fs-sm)}
  .hero-btns{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto}
  .hero-visual{padding:0 10px}
  .hero-devices{margin-bottom:-20px}
  .device-pc{width:100%;border-radius:8px 8px 0 0}
  .device-sp{width:19%;right:0;bottom:20px}
  /* Ice cream */
  .ice-callout{padding:24px 16px}
  .ice-labels{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:-12px}
  .ice-label{font-size:var(--fs-sm)}
  .ice-sub{font-size:var(--fs-xs)}
  /* Badges */
  .feat-s-badges{gap:8px 10px}
  .feat-s-badge{padding:5px 12px}
  .logos-row{gap:16px}
  /* Results */
  .results-grid{grid-template-columns:1fr 1fr}
  /* Video */
  .video-sec-inner{max-width:100%}
  .video-sec-thumb{padding:24px 16px 24px}
  .video-sec-thumb img{width:clamp(200px,70%,320px)}
}