/* RtP Bento 랜딩 — 메인(/) 다크 벤토 디자인.
   폰트: 한글 = Pretendard(자체 호스팅 서브셋) · 숫자/영문 = Barlow / Barlow Condensed(Google Fonts). */

/* Pretendard — 페이지에 쓰인 글자만 서브셋한 자체 호스팅 woff2 (CDN 미의존). */
@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:url("../fonts/pretendard-400.subset.woff2") format('woff2');}
@font-face{font-family:'Pretendard';font-weight:500;font-display:swap;src:url("../fonts/pretendard-500.subset.woff2") format('woff2');}
@font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:url("../fonts/pretendard-600.subset.woff2") format('woff2');}
@font-face{font-family:'Pretendard';font-weight:700;font-display:swap;src:url("../fonts/pretendard-700.subset.woff2") format('woff2');}
@font-face{font-family:'Pretendard';font-weight:800;font-display:swap;src:url("../fonts/pretendard-800.subset.woff2") format('woff2');}
@font-face{font-family:'Pretendard';font-weight:900;font-display:swap;src:url("../fonts/pretendard-900.subset.woff2") format('woff2');}

/* Barlow — 숫자·영문 라벨. Latin 서브셋 자체 호스팅. */
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url("../fonts/barlow-500.subset.woff2") format('woff2');}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url("../fonts/barlow-600.subset.woff2") format('woff2');}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url("../fonts/barlow-700.subset.woff2") format('woff2');}
@font-face{font-family:'Barlow';font-weight:800;font-display:swap;src:url("../fonts/barlow-800.subset.woff2") format('woff2');}
@font-face{font-family:'Barlow';font-weight:900;font-display:swap;src:url("../fonts/barlow-900.subset.woff2") format('woff2');}

/* Barlow Condensed — 대형 디스플레이 숫자. Latin 서브셋 자체 호스팅. */
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url("../fonts/barlow-condensed-700.subset.woff2") format('woff2');}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url("../fonts/barlow-condensed-800.subset.woff2") format('woff2');}
@font-face{font-family:'Barlow Condensed';font-weight:900;font-display:swap;src:url("../fonts/barlow-condensed-900.subset.woff2") format('woff2');}

:root{
  --bg:#0a0f1a; --bg2:#0e1523; --tile:#131c2e; --tile2:#172236; --line:#243149;
  --ink:#eef3fa; --mut:#8e9bb0; --mut2:#5f6d84;
  --orange:#ff6a2b; --orange2:#ff9057; --osoft:rgba(255,106,43,.12);
  --ko:'Pretendard',system-ui,sans-serif; --num:'Barlow',sans-serif; --disp:'Barlow Condensed',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ko);background:var(--bg);color:var(--ink);line-height:1.5;word-break:keep-all;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-weight:800;font-size:15px;
  padding:13px 22px;border-radius:11px;border:none;cursor:pointer;box-shadow:0 6px 22px rgba(255,106,43,.3);transition:transform .15s,box-shadow .15s;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,106,43,.42);}

header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,15,26,.75);backdrop-filter:blur(14px);border-bottom:1px solid rgba(36,49,73,.5);}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;}
.logo{font-family:var(--num);font-weight:900;font-size:26px;letter-spacing:-1px;}
.logo b{color:var(--orange);}
.nav-links{display:flex;gap:30px;}
.nav-links a{color:var(--mut);font-size:14.5px;font-weight:600;}
.nav-links a:hover{color:var(--ink);}

/* HERO with graph bg */
.hero{position:relative;padding:150px 0 96px;overflow:hidden;}
.hero-graph{position:absolute;inset:0;z-index:0;opacity:.5;}
.hero-graph svg{position:absolute;bottom:0;left:0;width:100%;height:60%;}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(36,49,73,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(36,49,73,.35) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);}
.hero-in{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto;}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--num);font-weight:700;font-size:12.5px;letter-spacing:1.5px;
  color:var(--orange);background:var(--osoft);border:1px solid rgba(255,106,43,.34);padding:7px 15px;border-radius:999px;margin-bottom:24px;text-transform:uppercase;}
.hero h1{font-size:64px;line-height:1.02;font-weight:900;letter-spacing:-2.4px;}
.hero h1 .hl{color:var(--orange);}
.hero .sub{font-size:18.5px;color:var(--mut);margin:24px auto 34px;max-width:540px;line-height:1.6;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.ghost{color:var(--ink);font-weight:700;font-size:15px;padding:13px 20px;border:1px solid var(--line);border-radius:11px;}
.ghost:hover{border-color:var(--mut);}

/* bento */
section.block{padding:90px 0;}
.sec-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.sec-tag{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:2.5px;color:var(--orange);text-transform:uppercase;}
.sec-head h2{font-size:40px;font-weight:900;letter-spacing:-1.3px;margin:12px 0 14px;line-height:1.14;}
.sec-head p{color:var(--mut);font-size:16.5px;line-height:1.6;}
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:16px;}
.bt{background:var(--tile);border:1px solid var(--line);border-radius:20px;padding:26px;position:relative;overflow:hidden;transition:transform .18s,border-color .18s;display:flex;flex-direction:column;}
.bt:hover{transform:translateY(-5px);border-color:var(--orange);}
.bt .lab{font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--orange);text-transform:uppercase;}
.bt h3{font-size:21px;font-weight:800;letter-spacing:-.5px;margin:8px 0 8px;}
.bt p{color:var(--mut);font-size:14px;line-height:1.6;}
.bt.big{grid-column:span 2;grid-row:span 1;}
.bt.tall{grid-row:span 1;}
.bt .spacer{flex:1;}
.search-count{font-family:var(--disp);font-weight:800;font-size:30px;color:#fff;}
.search-count em{color:var(--orange);font-style:normal;font-size:18px;}
.mini-stats{display:flex;gap:20px;margin-top:auto;}
.mini-stats .ms .v{font-family:var(--disp);font-weight:800;font-size:36px;line-height:1;color:#fff;}
.mini-stats .ms .v em{color:var(--orange);font-style:normal;font-size:18px;}
.mini-stats .ms .k{font-size:11.5px;color:var(--mut2);margin-top:4px;font-weight:600;}
.bt-chart{position:absolute;right:0;bottom:0;left:0;height:88px;opacity:.9;}
.rank-rows{display:flex;flex-direction:column;gap:7px;margin-top:auto;}
.rank-rows .rr{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.rank-rows .rr .bar{flex:1;height:7px;border-radius:4px;background:var(--tile2);overflow:hidden;}
.rank-rows .rr .bar i{display:block;height:100%;background:var(--orange);border-radius:4px;}
.rank-rows .rr .pc{font-family:var(--num);font-weight:800;color:var(--orange);font-size:12px;width:52px;text-align:right;}
.rank-rows .rr .nm{width:34px;color:var(--mut);font-weight:600;}
.bt-media{padding:0;}
.media-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--tile2),var(--tile));color:var(--mut2);}
.media-ph svg{width:44px;height:44px;stroke:var(--orange);opacity:.85;}
.media-ph span{font-size:12.5px;font-weight:600;}

/* why */
.why{background:var(--bg2);}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.why-card{padding:30px 26px;border-radius:18px;background:var(--tile);border:1px solid var(--line);}
.why-card .ic{width:46px;height:46px;border-radius:12px;background:var(--osoft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.why-card .ic svg{width:24px;height:24px;stroke:var(--orange);}
.why-card h4{font-size:19px;font-weight:800;margin-bottom:9px;}
.why-card p{color:var(--mut);font-size:14.5px;line-height:1.65;}

.cta{text-align:center;padding:84px 0;position:relative;overflow:hidden;}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,106,43,.16),transparent 58%);}
.cta .in{position:relative;}
.cta h2{font-size:44px;font-weight:900;letter-spacing:-1.6px;margin-bottom:14px;}
.cta h2 .hl{color:var(--orange);}
.cta p{color:var(--mut);font-size:17px;margin-bottom:30px;}

footer{background:#060a13;padding:58px 0 32px;border-top:1px solid var(--line);}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line);}
.foot-brand .logo{margin-bottom:14px;display:inline-block;}
.foot-brand p{color:var(--mut2);font-size:13.5px;line-height:1.7;max-width:320px;}
.foot-col h5{font-size:13px;font-weight:800;margin-bottom:15px;}
.foot-col a{display:block;color:var(--mut);font-size:13.5px;margin-bottom:11px;}
.foot-col a:hover{color:var(--orange);}
.biz{padding:26px 0 20px;}
.biz h5{font-size:12px;font-weight:800;color:var(--mut);margin-bottom:14px;letter-spacing:.4px;}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 30px;}
.biz-grid .row{font-size:13px;color:var(--mut2);}
.biz-grid .row b{color:var(--mut);font-weight:700;margin-right:8px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:12px;}
.foot-bottom .cr{font-family:var(--num);font-size:13px;color:var(--mut2);}
.foot-bottom a{font-size:12.5px;color:var(--mut2);}
.foot-bottom a:hover{color:var(--orange);}

@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:210px;}
  .bt.big{grid-column:span 2;}
  .why-grid{grid-template-columns:1fr;}
  .hero h1{font-size:46px;}
  .foot-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .wrap{padding:0 18px;}
  .nav-links{display:none;}
  .hero{padding:118px 0 66px;}
  .hero h1{font-size:35px;letter-spacing:-1.2px;}
  .hero .sub{font-size:16px;}
  section.block{padding:60px 0;}
  .sec-head h2{font-size:29px;}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;}
  .bt{min-height:190px;}
  .bt.big{grid-column:span 1;}
  .cta h2{font-size:30px;}
  .foot-top{grid-template-columns:1fr;gap:28px;}
  .biz-grid{grid-template-columns:1fr;}
}