/* RAMP product page — theme v3 (2026-11-06)
   参考: Midnight Black #02070A / Electric Blue #0297DE / Cantaloupe Orange #FC734D
   暗い面に、青→オレンジのグロー。ボタンはオレンジ、LEDの点は青。
   元に戻すときは index.html の theme.css の1行を消す。 */
:root{
  --midnight:#02070A;
  --blue:#0297DE;
  --orange:#FC734D;
  --panel:#08121a;
  --panel-2:#0d1c27;
  --line:rgba(238,243,246,.12);
  --text:#eef3f6;
  --text-dim:#93a4af;
  --led:var(--blue);
}
html{background:var(--midnight)}
body{background:var(--midnight);color:var(--text)}
::selection{background:var(--orange);color:var(--midnight)}
:focus-visible{outline-color:var(--orange)}

/* type */
.label,.micro,.body,.sub{color:var(--text-dim)}
.sub strong{color:var(--text)}
.led{box-shadow:0 0 0 3px rgba(2,151,222,.2),0 0 12px rgba(2,151,222,.85)}
@keyframes breathe{50%{opacity:.5;box-shadow:0 0 0 2px rgba(2,151,222,.1),0 0 5px rgba(2,151,222,.4)}}

/* bar */
.bar__logo{background:rgba(2,7,10,.6);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.bar__cta{background:var(--orange);color:var(--midnight);font-weight:600}
.dock{background:var(--orange);color:var(--midnight);box-shadow:0 10px 30px rgba(252,115,77,.3)}

/* buttons */
.btn{background:var(--orange);color:var(--midnight);font-weight:600;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(252,115,77,.35)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(238,243,246,.28)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--blue);background:rgba(2,151,222,.1)}
.btn--light{background:var(--orange);color:var(--midnight)}

/* hero: 下から青→オレンジのグロー */
.hero{position:relative;overflow:hidden;background:var(--midnight)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% 104%,rgba(252,115,77,.95),rgba(252,115,77,0) 72%),
    radial-gradient(95% 78% at 50% 112%,rgba(2,151,222,.9),rgba(2,151,222,0) 76%),
    radial-gradient(70% 50% at 10% 104%,rgba(2,151,222,.4),rgba(2,151,222,0) 70%)}
.hero .wrap{position:relative;z-index:1}
.h1{color:var(--text)}
.hero__img img{filter:brightness(.66) contrast(1.12) saturate(.9);mix-blend-mode:normal}
.hero__img figcaption{color:rgba(238,243,246,.62)}

/* problem（もともと暗い面）: 時計の薄い文字を青に */
.night{background:var(--midnight)}
.night__time{color:var(--blue)}
.night__day,.night__ampm{color:var(--orange);opacity:.6}
.night__label,.line .dim{color:var(--text-dim)}
.line--end .led{background:var(--orange);box-shadow:0 0 0 4px rgba(252,115,77,.2),0 0 16px rgba(252,115,77,.9)}

/* how: 小さな24時間の円 */
.hw__dot,.hw__glow,.hw__day-glow{fill:var(--orange)}
.hw__arc--wake{stroke:var(--orange)}
.hw__arc--sleep{stroke:var(--blue)}
.hw__arc--bed{stroke:var(--blue)}
.hw__mini{background:rgba(2,7,10,.62)}
.hw__stage{background:var(--midnight)}

/* light sections → dark panels */
.light{background:var(--midnight);color:var(--text)}
.h2{color:var(--text)}
.vs{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.vs__vs{color:var(--text-dim)}
.vs__col{background:var(--panel-2);color:var(--text)}
.vs__col--ramp{background:linear-gradient(145deg,rgba(2,151,222,.34),rgba(252,115,77,.3) 120%),var(--panel-2);box-shadow:inset 0 0 0 1px rgba(2,151,222,.45);color:var(--text)}
.vs__sub{color:var(--text-dim)}
.vs__col--ramp .vs__sub{color:#c9d6de}
.founder__body{color:var(--text)}
.founder__sig span{color:var(--text-dim)}
.founder__ph img{filter:none;box-shadow:0 0 0 1px var(--line),0 30px 80px -20px rgba(2,151,222,.35)}
.advisors{background:var(--panel);box-shadow:inset 0 1px 0 var(--line)}
.adv__card{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.adv__rl{color:var(--text-dim)}
.adv__pts li{border-top-color:var(--line);color:#b6c3cb}
.adv__pts li::before{background:var(--orange)}
.adv__logos img{background:#eef3f6;border-radius:10px;padding:6px 10px;height:44px;box-sizing:content-box}

/* join: 写真と同じ青→オレンジのグロー */
.join{background:var(--midnight)}
.join__card{background:
    radial-gradient(52% 78% at 50% 112%,rgba(252,115,77,.95),rgba(252,115,77,0) 72%),
    radial-gradient(100% 100% at 50% 122%,rgba(2,151,222,.95),rgba(2,151,222,0) 74%),
    var(--midnight);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.join__label,.join__lead{color:#b6c3cb}

/* footer */
.foot{background:var(--midnight);color:var(--text-dim);border-top-color:var(--line)}
.foot__logo{color:var(--text)}