/* ============================================================
   CooBase LP — Design System
   Brand: royal-blue wordmark + sky/cyan gradient mark
   ============================================================ */

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

:root{
  /* brand */
  --brand:        #2456c7;   /* wordmark royal blue */
  --brand-deep:   #1b3d96;
  --brand-700:    #1e47a8;
  --sky:          #1e9bf0;
  --cyan:         #34c3f3;
  --grad: linear-gradient(118deg, #1e47a8 0%, #2563d9 38%, #1e9bf0 72%, #34c3f3 100%);
  --grad-soft: linear-gradient(135deg, #e9f1ff 0%, #eafaff 100%);

  /* ink + neutrals (cool toned) */
  --ink:        #18202f;
  --ink-2:      #41506a;
  --ink-3:      #6b7990;
  --line:       #e3e9f2;
  --line-2:     #eef2f8;
  --paper:      #ffffff;
  --bg:         #f5f8fc;
  --bg-cool:    #eef4fc;

  /* semantic accents (kept low chroma, varied hue) */
  --warn:       #e8743b;
  --warn-bg:    #fdf0e8;
  --good:       #1f9d6b;
  --good-bg:    #e9f7f0;
  --alert:      #e0506b;
  --alert-bg:   #fcebef;
  --gold:       #d8a32a;

  /* shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(20,40,90,.05), 0 2px 8px rgba(20,40,90,.04);
  --shadow:    0 4px 14px rgba(24,52,120,.08), 0 14px 40px rgba(24,52,120,.07);
  --shadow-lg: 0 18px 50px rgba(20,45,110,.14), 0 6px 18px rgba(20,45,110,.08);
  --shadow-brand: 0 12px 30px rgba(37,99,217,.30);

  --maxw: 1180px;
  --gut: 32px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;}
body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:#c9defb;color:var(--brand-deep);}

.disp{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 var(--gut);}
section{position:relative;}
.sec-pad{padding:108px 0;}
.sec-pad-sm{padding:80px 0;}

/* eyebrow / titles */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.22em;
  color:var(--brand);text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{display:none;}

.sec-title{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900;
  font-size:clamp(31px,4.9vw,54px);
  line-height:1.32;
  letter-spacing:-.005em;
  color:var(--ink);
  text-wrap:balance;
}
.sec-lead{
  margin-top:24px;font-size:clamp(16px,1.4vw,18px);line-height:2;color:var(--ink-2);
  max-width:700px;text-wrap:pretty;
}
.eyebrow{margin-bottom:22px;}
.center-head{text-align:center;}
.center-head .sec-lead{margin-left:auto;margin-right:auto;}

.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hl{
  background:linear-gradient(transparent 62%, #bfe0ff 62%);
  padding:0 .06em;font-weight:700;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:700;font-size:15.5px;letter-spacing:.02em;
  padding:16px 30px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .2s, color .2s;
  white-space:nowrap;line-height:1;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-brand);background-size:140% 140%;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(37,99,217,.38);}
.btn-ghost{background:#fff;color:var(--brand-deep);border-color:#cdd9ee;box-shadow:var(--shadow-sm);}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow);}
.btn-lg{padding:19px 38px;font-size:16.5px;}
.btn-block{width:100%;}
.btn-white{background:#fff;color:var(--brand-deep);}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18);}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn-line:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}

/* ---------- reveal animation (transform-only: never hides content) ---------- */
.reveal{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
html.cb-animate .reveal:not(.in){transform:translateY(28px);}
.reveal.d1{transition-delay:.07s;}
.reveal.d2{transition-delay:.14s;}
.reveal.d3{transition-delay:.21s;}
.reveal.d4{transition-delay:.28s;}
.reveal.d5{transition-delay:.35s;}
@media(prefers-reduced-motion:reduce){
  html.cb-animate .reveal:not(.in){transform:none;}
  .reveal{transition:none;}
  html{scroll-behavior:auto;}
}

/* product-window chrome (used for screenshots / mockups) */
.win{
  border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.win-bar{
  display:flex;align-items:center;gap:7px;
  padding:13px 16px;background:#fbfcfe;border-bottom:1px solid var(--line-2);
}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#dde3ee;display:block;}
.win-bar i:nth-child(1){background:#f0a9ad;}
.win-bar i:nth-child(2){background:#f4d08a;}
.win-bar i:nth-child(3){background:#a7d8b0;}
.win-bar .url{
  margin-left:12px;font-size:11.5px;color:var(--ink-3);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px 14px;font-family:"Noto Sans JP";
}