body{margin:0;background:#FFFFFF}
a{color:#0274BE}a:hover{color:#015A93}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- opening ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#032C49;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;animation:loaderOut .9s cubic-bezier(.76,0,.24,1) 2.1s forwards;pointer-events:none}
.loader-logo{width:200px;height:auto;animation:logoIn 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
.loader-bar{width:160px;height:2px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.loader-bar::after{content:"";position:absolute;inset:0;background:#5BC0DE;transform-origin:left;animation:barFill 1.5s cubic-bezier(.6,0,.2,1) .4s both}
@keyframes loaderOut{to{transform:translateY(-100%);visibility:hidden}}
@keyframes logoIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes barFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- hero ---------- */
.hero-video{animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(6px);animation:chIn .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes chIn{to{opacity:1;transform:none;filter:none}}
.underline path{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.1s cubic-bezier(.6,0,.3,1) 3.85s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fade-up{opacity:0;transform:translateY(24px);animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.scroll-cue{position:relative;width:1px;height:72px;background:rgba(255,255,255,.3);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:28px;background:#FFFFFF;animation:cue 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cue{from{transform:translateY(-28px)}to{transform:translateY(72px)}}

/* ---------- value ---------- */
.ring circle.prog{stroke-dasharray:302;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box}
.horse-float{animation:float 6s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-14px)}}

/* ---------- cards ---------- */
.card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -24px rgba(3,44,73,.35)}
.card:hover .card-icon{background:#0274BE}
.card-icon{transition:background .3s}
.btn{transition:transform .3s,background .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- group diagram ---------- */
.logo-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.logo-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -16px rgba(0,0,0,.45)}
.logo-card img{transition:transform .35s}
.logo-card:hover img{transform:scale(1.06)}

/* ---------- mobile menu ---------- */
.mobile-menu{animation:menuIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.mm-link{opacity:0;animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) forwards}

/* ---------- smartphone ---------- */
@media (max-width: 767px){
  .pc-nav{display:none !important}
  .menu-btn{display:flex !important}
  .site-header{padding:14px 20px !important}
  .logo-img{height:46px !important}
  .hero-sec{height:auto !important;min-height:720px !important}
  .hero-inner{padding:24px 20px 120px !important}
  .hero-h1{font-size:34px !important;margin-bottom:28px !important}
  .sec{padding:88px 20px !important}
  .join-card{padding:32px 24px !important}
  .card{padding:32px 24px 36px !important}
  .value-horse{width:300px !important;right:-90px !important;top:40px !important}
  .table-wrap{padding:4px 20px 12px !important}
  .co-table{min-width:0 !important}
  .co-table tr{display:block}
  .co-table th,.co-table td{display:block;width:auto !important}
  .co-table th{padding:20px 0 0 !important;font-size:13px}
  .co-table td{padding:4px 0 20px !important}
}

/* ---------- scroll-driven reveals ---------- */
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
  .rv-d1{animation-range:entry 15% entry 65%}
  .rv-d2{animation-range:entry 25% entry 75%}
  .rv-d3{animation-range:entry 35% entry 85%}
  @keyframes rv{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
  .wipe{animation:wipe linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  @keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .line-grow{animation:grow linear both;animation-timeline:view();animation-range:entry 20% entry 70%;transform-origin:left}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .zoom-in{animation:zoomIn linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  @keyframes zoomIn{from{transform:scale(1.18)}to{transform:scale(1)}}
  .fill-text{color:transparent;background:linear-gradient(90deg,#032C49 50%,#CAD6E1 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:fillText linear both;animation-timeline:view();animation-range:cover 15% cover 45%}
  @keyframes fillText{from{background-position:100% 0}to{background-position:0 0}}
  .ring circle.prog{animation:ring linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  @keyframes ring{from{stroke-dashoffset:302}to{stroke-dashoffset:0}}
  .horse-run{animation:horseRun linear both;animation-timeline:view()}
  @keyframes horseRun{from{transform:translateX(-30%)}to{transform:translateX(18%)}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ch,.fade-up,.mm-link{opacity:1;transform:none;filter:none}
  .loader{display:none}
  .underline path{stroke-dashoffset:0}
}

/* closed menu must stay hidden even though it carries an inline display:flex */
[hidden]{display:none !important}