/* ============================================================
   CooBase LP — sections & components
   ============================================================ */

/* ===== HEADER ===== */
#hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s, box-shadow .3s, padding .3s, backdrop-filter .3s;
  padding:18px 0;
}
#hd.scrolled{
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(20,40,90,.06), 0 8px 24px rgba(20,40,90,.05);
  padding:11px 0;
}
.hd-row{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.hd-logo{display:flex;align-items:center;gap:11px;}
.hd-logo img{height:30px;width:auto;}
.hd-logo .tag{
  font-size:11px;color:var(--ink-3);font-weight:700;
  border-left:1px solid var(--line);padding-left:11px;line-height:1.25;letter-spacing:.04em;
}
.nav{display:flex;align-items:center;gap:30px;}
.nav-link{
  font-size:14px;font-weight:700;color:var(--ink-2);
  font-family:"Zen Kaku Gothic New",sans-serif;
  position:relative;padding:4px 0;transition:color .2s;white-space:nowrap;
}
.nav{flex:none;}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--grad);border-radius:2px;transition:right .25s;}
.nav-link:hover{color:var(--brand);}
.nav-link.active{color:var(--brand);}
.nav-link.active::after{right:0;}
.hd-cta{display:flex;align-items:center;gap:12px;}
.hd-cta .btn{padding:11px 22px;font-size:14px;}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;position:relative;cursor:pointer;}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}
.burger span:nth-child(1){top:14px;}
.burger span:nth-child(2){top:20px;}
.burger span:nth-child(3){top:26px;}
.burger.open span:nth-child(1){top:20px;transform:rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){top:20px;transform:rotate(-45deg);}

#mnav{
  position:fixed;inset:0;z-index:99;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:40px;
  opacity:0;pointer-events:none;transform:translateY(-8px);transition:.3s;
}
#mnav.open{opacity:1;pointer-events:auto;transform:none;}
#mnav a{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:21px;padding:14px 8px;border-bottom:1px solid var(--line-2);}
#mnav .btn{margin-top:18px;}

/* ===== HERO ===== */
#hero{
  position:relative;padding:150px 0 96px;overflow:hidden;
  background:
    radial-gradient(1100px 560px at 78% -8%, #e7f3ff 0%, rgba(231,243,255,0) 60%),
    radial-gradient(800px 500px at 0% 100%, #eef6ff 0%, rgba(238,246,255,0) 55%),
    var(--paper);
}
.hero-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:36px;align-items:center;}
.hero-copy{position:relative;z-index:6;min-width:0;}
.hero-pill{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid #d4e3fb;border-radius:999px;
  padding:8px 16px 8px 10px;font-size:12.5px;font-weight:700;color:var(--brand-deep);
  box-shadow:var(--shadow-sm);margin-bottom:50px;
}
.hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(37,99,217,.14);}
#hero h1{
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;
  font-size:clamp(35px,5.6vw,64px);line-height:1.26;letter-spacing:-.01em;color:var(--ink);
  text-wrap:balance;position:relative;z-index:6;
}
#hero h1 .head-top{display:block;white-space:nowrap;text-shadow:0 2px 18px rgba(255,255,255,.85),0 1px 3px rgba(255,255,255,.95);}
#hero h1 .small{display:block;margin-top:46px;font-size:clamp(18px,2.1vw,26px);font-weight:700;color:var(--brand-deep);line-height:1.6;letter-spacing:0;}
#hero .lede{margin:46px 0 52px;font-size:clamp(16px,1.5vw,18.5px);line-height:2;color:var(--ink-2);max-width:540px;text-wrap:pretty;}
#hero .ctas{display:flex;gap:14px;flex-wrap:wrap;}
#hero .micro{margin-top:30px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px;}
#hero .micro svg{width:15px;height:15px;color:var(--good);flex:none;}

/* hero visual: product window with alert overlay */
.hero-visual{position:relative;z-index:1;transform:scale(0.92);transform-origin:center right;}
.hero-visual .win{transform:perspective(1600px) rotateY(-8deg) rotateX(2deg);transform-origin:center;}
.hero-visual .win img{width:100%;display:block;}
.glow{position:absolute;inset:-8% -6%;z-index:-1;background:var(--grad);filter:blur(70px);opacity:.18;border-radius:50%;}

.float-card{
  position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 16px;
  display:flex;align-items:center;gap:12px;animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.float-alert{top:8%;left:-26px;border-left:4px solid var(--alert);max-width:236px;}
.float-alert .ico{width:38px;height:38px;border-radius:11px;background:var(--alert-bg);color:var(--alert);display:flex;align-items:center;justify-content:center;flex:none;}
.float-alert .ico svg{width:20px;height:20px;}
.float-alert b{font-size:13px;font-family:"Zen Kaku Gothic New";display:block;color:var(--ink);}
.float-alert span{font-size:11.5px;color:var(--ink-3);}
.float-skill{top:30%;right:-30px;animation-delay:1.4s;}
.float-skill .ring{width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--brand) 0 75%, #e6edf8 75% 100%);display:flex;align-items:center;justify-content:center;flex:none;}
.float-skill .ring i{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--brand);font-style:normal;}
.float-skill b{font-size:13px;font-family:"Zen Kaku Gothic New";display:block;color:var(--ink);}
.float-skill span{font-size:11.5px;color:var(--good);font-weight:700;}

/* hero stat strip */
#hero-stats{
  margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding:30px 36px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
}
.hstat{text-align:center;position:relative;}
.hstat + .hstat::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:1px;height:42px;background:var(--line);}
.hstat .num{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:clamp(30px,3.7vw,48px);color:var(--brand-deep);line-height:1;letter-spacing:-.02em;}
.hstat .num .u{font-size:.5em;margin-left:2px;color:var(--brand);}
.hstat .lbl{margin-top:9px;font-size:12.5px;color:var(--ink-3);font-weight:500;line-height:1.5;}

/* logo / trust ribbon */
.ribbon{padding:34px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--bg);}
.ribbon-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;}
.ribbon .t{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.05em;}
.ribbon .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.ribbon .chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-sm);}
.ribbon .chip svg{width:16px;height:16px;color:var(--brand);}

/* ===== PROBLEM ===== */
#problem{background:var(--bg);}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;}
.prob-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:0;
  box-shadow:var(--shadow-sm);transition:transform .3s, box-shadow .3s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.prob-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.prob-banner{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef4fc;border-bottom:1px solid var(--line-2);}
.prob-banner img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s ease;}
.prob-card:hover .prob-banner img{transform:scale(1.04);}
.prob-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;}
.prob-card h3{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:19px;line-height:1.55;margin-bottom:12px;color:var(--ink);}
.prob-card p{font-size:14.5px;color:var(--ink-2);line-height:1.95;}
.prob-card .voice{margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--ink-3);font-style:italic;border-top:1px dashed var(--line);}
.prob-card .voice-sp{margin-top:16px;}

/* ===== REFRAME ===== */
#reframe{background:var(--grad);color:#fff;text-align:center;overflow:hidden;}
#reframe::before,#reframe::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);}
#reframe::before{width:420px;height:420px;top:-180px;left:-120px;}
#reframe::after{width:520px;height:520px;bottom:-260px;right:-140px;}
#reframe .inner{position:relative;z-index:1;}
#reframe .big{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:clamp(26px,3.9vw,46px);line-height:1.6;max-width:900px;margin:0 auto;text-wrap:balance;letter-spacing:-.01em;}
#reframe .big em{font-style:normal;position:relative;white-space:nowrap;}
#reframe .big em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.5em;background:rgba(255,255,255,.22);z-index:-1;border-radius:4px;}
#reframe .follow{margin-top:26px;font-size:16px;line-height:2;color:rgba(255,255,255,.86);max-width:660px;margin-left:auto;margin-right:auto;}

/* ===== CONCEPT (fan-out flow: 1 report → everything) ===== */
#concept{background:var(--bg);overflow:hidden;}
.concept-stage{
  margin-top:64px;display:grid;grid-template-columns:288px 132px 1fr;gap:0;align-items:center;
}

/* core = daily report (the single start) */
.core{
  position:relative;background:#fff;border-radius:var(--r-xl);padding:40px 28px;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:2;
}
.core::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);padding:2px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.core .badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--brand);background:var(--grad-soft);padding:5px 14px;border-radius:999px;margin-bottom:16px;}
.core .ico{width:72px;height:72px;border-radius:22px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;box-shadow:var(--shadow-brand);}
.core .ico svg{width:36px;height:36px;}
.core h3{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:26px;color:var(--ink);}
.core p{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.7;}
.core .time{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--good);background:var(--good-bg);padding:6px 14px;border-radius:999px;}

/* fan connector */
.fan{position:relative;align-self:stretch;}
.fan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fan .fan-line{fill:none;stroke:url(#fanGrad);stroke-width:2.4;stroke-linecap:round;}
.fan .fan-flow{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:10 150;opacity:.9;}
html.cb-animate .fan .fan-flow{animation:fanflow 2.4s linear infinite;}
@keyframes fanflow{from{stroke-dashoffset:160;}to{stroke-dashoffset:0;}}
.fan .fan-src{fill:var(--brand);}
html.cb-animate .fan .fan-src{animation:fanpulse 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes fanpulse{0%,100%{r:5;opacity:1;}50%{r:7;opacity:.6;}}
.fan .fan-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border:1px solid #cfe0f7;border-radius:999px;padding:7px 14px;
  font-family:"Zen Kaku Gothic New";font-weight:700;font-size:12.5px;color:var(--brand-deep);
  box-shadow:var(--shadow-sm);white-space:nowrap;display:flex;align-items:center;gap:7px;z-index:2;
}
.fan .fan-label .ai{width:20px;height:20px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;}

/* spokes = 6 outputs that move, stacked */
.spokes{display:flex;flex-direction:column;gap:12px;}
.spoke{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;
  display:flex;align-items:center;gap:15px;min-height:64px;
  box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s, border-color .25s;
}
.spoke:hover{transform:translateX(5px);box-shadow:var(--shadow);border-color:#cdddf6;}
.spoke .si{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none;}
.spoke .si svg{width:23px;height:23px;}
.spoke .stext{flex:1;}
.spoke h4{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:15.5px;color:var(--ink);}
.spoke p{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:2px;}
.spoke .auto{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;color:var(--brand);background:var(--grad-soft);padding:5px 11px;border-radius:999px;letter-spacing:.04em;}

.concept-foot{margin-top:46px;text-align:center;}
.concept-foot .line{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:clamp(23px,3.2vw,36px);color:var(--ink);letter-spacing:-.01em;}
.concept-foot .line b{color:var(--brand);}