/* Playio JP — home.css (extracted from _ja/playio_jp_home.html) */
/* =========================================================
   Playio Japan B2B — Home (Hi-Tech Redesign)
   White + grid / Electric Blue #0052FF · Navy #0D2149
   Bento grid · pure-CSS data viz
   ========================================================= */
:root{
  --blue:#0052FF;
  --blue-bright:#00D4FF;
  --blue-ink:#0040C8;
  --navy:#0D2149;
  --navy-2:#16306B;
  --aqua:#00D4FF;

  --ink:#0D2149;
  --ink-700:#23355C;
  --ink-500:#5A6B89;
  --ink-400:#8190A8;

  --bg:#FFFFFF;
  --bg-soft:#F4F7FE;
  --line:#E6ECF6;
  --line-strong:#D7E0EF;

  --grad:linear-gradient(135deg,#0052FF 0%, #00D4FF 100%);
  --grad-soft:linear-gradient(135deg,#EAF1FF 0%, #E6FAFF 100%);
  --grad-navy:linear-gradient(150deg,#0D2149 0%, #143062 52%, #0F47C8 130%);
  --grad-text:linear-gradient(118deg,#0040FF 0%, #1A6CFF 52%, #2E90FF 100%);

  --shadow:0 20px 40px -15px rgba(0,82,255,.15);
  --shadow-sm:0 12px 26px -14px rgba(0,82,255,.16);
  --shadow-lg:0 40px 80px -28px rgba(13,33,73,.30);
  --shadow-navy:0 34px 70px -24px rgba(13,33,73,.55);

  --r:18px; --r-lg:24px; --r-xl:30px; --r-sm:12px;
  --maxw:1240px;
  --font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);color:var(--ink-700);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;position:relative;overflow-x:hidden;
}
/* hi-tech grid */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,82,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,82,255,.04) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, rgba(0,0,0,.45) 75%, transparent 100%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, rgba(0,0,0,.45) 75%, transparent 100%);
}
a{color:inherit;text-decoration:none;}
img{display:block;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:1;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;
  font-weight:700;font-size:15px;padding:13px 22px;line-height:1;white-space:nowrap;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, color .15s ease;}
.btn-primary{color:#fff;background:var(--grad);box-shadow:0 14px 28px -12px rgba(0,82,255,.6);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(0,82,255,.7);}
.btn-dark{color:#fff;background:var(--navy);}
.btn-dark:hover{transform:translateY(-2px);background:#15294f;box-shadow:var(--shadow);}
.btn-ghost{color:var(--blue-ink);background:#fff;border:1.5px solid var(--line-strong);}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--shadow-sm);}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:10px;}

/* ---------- GNB ---------- */
.gnb{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);}
.gnb-inner{max-width:var(--maxw);margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo-image{height:30px;width:auto;display:block;}
.gnb-left{display:flex;align-items:center;}
.gnb-menu{display:flex;align-items:center;gap:4px;}
.gnb-menu a{font-size:15px;font-weight:600;color:var(--ink-500);padding:9px 15px;border-radius:10px;transition:.15s;position:relative;}
.gnb-menu a:hover{color:var(--blue-ink);background:var(--bg-soft);}
.gnb-menu a.active{color:var(--blue-ink);font-weight:700;}
.gnb-menu a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2.5px;border-radius:3px;background:var(--grad);}
.gnb-cta{display:flex;align-items:center;gap:10px;}
.hamburger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line-strong);background:#fff;font-size:20px;color:var(--ink);align-items:center;justify-content:center;}

.m-menu{display:none;position:fixed;inset:72px 0 0 0;z-index:99;background:rgba(255,255,255,.99);
  padding:18px 24px 36px;flex-direction:column;gap:4px;animation:fade .18s ease;}
.m-menu.open{display:flex;}
.m-menu a{font-size:18px;font-weight:600;padding:15px 8px;border-bottom:1px solid var(--line);color:var(--ink-700);}
.m-menu a.active{color:var(--blue-ink);font-weight:700;}
.m-menu .m-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.m-menu .btn{width:100%;padding:15px;}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Section scaffold ---------- */
.section{padding:108px 0;position:relative;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  color:var(--blue-ink);text-transform:uppercase;margin-bottom:20px;}
.eyebrow::before{content:"";width:22px;height:2.5px;border-radius:3px;background:var(--grad);}
.eyebrow.center{justify-content:center;}
.sec-head{max-width:760px;}
.sec-head.center{margin:0 auto;text-align:center;}
h2.sec-title{font-size:clamp(30px,3.6vw,46px);line-height:1.16;font-weight:850;color:var(--ink);letter-spacing:-.025em;margin:0 0 18px;}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sec-sub{font-size:clamp(16px,1.5vw,18px);color:var(--ink-500);margin:0;line-height:1.6;}
.sec-body{font-size:16px;color:var(--ink-500);margin:16px 0 0;}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:120px 0 110px;overflow:hidden;
  background:
    radial-gradient(60% 66% at 50% -2%, rgba(0,82,255,.36), transparent 60%),
    radial-gradient(52% 62% at 12% 22%, rgba(0,104,255,.34), transparent 60%),
    radial-gradient(54% 64% at 90% 26%, rgba(0,168,255,.34), transparent 60%),
    radial-gradient(72% 52% at 50% 100%, rgba(0,82,255,.14), transparent 72%),
    linear-gradient(180deg,#D6E6FF 0%, #E2EEFF 34%, #F0F6FF 72%, #FFFFFF 100%);}
.hero::after{content:none;}
.hero-grid{display:block;text-align:center;position:relative;z-index:2;max-width:880px;margin:0 auto;}
.hero-text{display:flex;flex-direction:column;align-items:center;}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--blue-ink);
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);padding:8px 16px 8px 13px;border-radius:999px;margin-bottom:26px;}
.badge .pip{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(0,82,255,.14);}
.hero h1{font-size:clamp(32px,4.7vw,56px);line-height:1.15;font-weight:900;letter-spacing:-.028em;color:var(--ink);margin:0;word-break:keep-all;max-width:880px;}
.why .sec-title,.solutions .sec-title{word-break:keep-all;}
.hero-body{font-size:clamp(16px,1.5vw,18px);color:var(--ink-500);margin:22px auto 0;max-width:620px;}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;justify-content:center;}
.hero-stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap;}
.hero-stats .s b{display:block;font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-.02em;}
.hero-stats .s span{font-size:12.5px;color:var(--ink-400);font-weight:600;}

/* ---- hero CSS dashboard mockup ---- */
.hero-viz{position:relative;width:100%;min-height:480px;perspective:2000px;}
.dash{
  position:relative;z-index:2;width:96%;margin-left:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:20px 22px 22px;
  transform:rotateY(-15deg) rotateX(7deg) rotateZ(1deg);transform-style:preserve-3d;
}
.dash::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;
  background:linear-gradient(140deg,rgba(0,82,255,.5),rgba(0,212,255,.2) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.dash-top .title{font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;}
.dash-top .title .live{font-size:10px;font-weight:700;color:#0AAE6B;background:#E6FBF1;padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;}
.dash-top .title .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#10C97E;}
.dash-top .tabs{display:flex;gap:6px;}
.dash-top .tabs i{display:block;width:30px;height:7px;border-radius:4px;background:var(--bg-soft);}
.dash-top .tabs i:first-child{background:var(--grad);width:38px;}
.chart-area{position:relative;height:172px;border-radius:14px;background:linear-gradient(180deg,#F8FBFF,#fff);border:1px solid var(--line);overflow:hidden;}
.chart-area .ylines{position:absolute;inset:14px 14px 22px 14px;background-image:linear-gradient(rgba(13,33,73,.06) 1px,transparent 1px);background-size:100% 33px;}
.chart-area svg{position:absolute;inset:0;width:100%;height:100%;}
.chart-area .pt{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);box-shadow:0 4px 10px rgba(0,82,255,.4);}
.dash-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;}
.tile .ti{width:24px;height:24px;border-radius:8px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:12px;margin-bottom:8px;}
.tile .tv{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.02em;}
.tile .tc{font-size:11px;font-weight:700;color:#0AAE6B;margin-top:2px;}

.float-card{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);}
.fc-donut{left:-9%;top:11%;width:150px;padding:14px;}
.fc-donut .donut{width:78px;height:78px;border-radius:50%;margin:2px auto 8px;position:relative;
  background:conic-gradient(var(--blue) 0 68%, var(--blue-bright) 68% 86%, #E6ECF6 86% 100%);}
.fc-donut .donut::after{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff;}
.fc-donut .donut .dc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:var(--ink);}
.fc-donut .leg{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-400);font-weight:600;}
.fc-donut .leg b{color:var(--ink);}
.fc-bars{right:-7%;bottom:13%;width:150px;padding:14px;}
.fc-bars .bh{font-size:11px;font-weight:700;color:var(--ink-400);margin-bottom:10px;}
.fc-bars .bars{display:flex;align-items:flex-end;gap:7px;height:58px;}
.fc-bars .bars i{flex:1;border-radius:4px 4px 2px 2px;background:var(--grad);opacity:.9;}
.fc-ai{left:2%;bottom:-2%;display:flex;align-items:center;gap:10px;padding:12px 16px;}
.fc-ai .ai-ico{width:34px;height:34px;border-radius:10px;background:var(--grad-navy);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.fc-ai b{font-size:13px;font-weight:800;color:var(--ink);display:block;}
.fc-ai span{font-size:11px;color:var(--ink-400);font-weight:600;}
.cube{position:absolute;right:6%;top:-2%;width:46px;height:46px;border-radius:10px;background:var(--grad);box-shadow:0 16px 30px -10px rgba(0,82,255,.6);transform:rotate(12deg);z-index:1;}

/* ---- 3D orbital data infographic ---- */
.viz3d{position:relative;width:460px;height:460px;margin:0 auto;transform-style:preserve-3d;}
.viz3d .glow-bg{position:absolute;inset:8%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(0,82,255,.30), rgba(0,212,255,.14) 46%, transparent 70%);filter:blur(12px);}
.viz3d .ring{position:absolute;left:50%;top:50%;border-radius:50%;z-index:1;}
.viz3d .ring.r1{width:392px;height:392px;border:1.5px solid rgba(0,82,255,.32);
  transform:translate(-50%,-50%) rotateX(73deg);}
.viz3d .ring.r2{width:480px;height:480px;border:1.5px dashed rgba(0,160,255,.32);
  transform:translate(-50%,-50%) rotateX(67deg) rotateZ(22deg);}
.viz3d .ring.spin{animation:ringspin 32s linear infinite;}
@keyframes ringspin{to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(382deg);}}

/* small dots travelling on the ring path */
.viz3d .orbit-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 35% 30%,#CFEEFF,#00A0FF 70%);box-shadow:0 0 12px rgba(0,170,255,.8);}
.viz3d .orbit-dot.d1{transform:rotate(20deg) translateX(196px) rotateX(73deg);}
.viz3d .orbit-dot.d2{transform:rotate(150deg) translateX(196px) rotateX(73deg);}
.viz3d .orbit-dot.d3{transform:rotate(255deg) translateX(196px) rotateX(73deg);}

/* glossy core sphere */
.viz3d .core{position:absolute;left:50%;top:50%;width:236px;height:236px;border-radius:50%;z-index:2;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side at 34% 27%, rgba(255,255,255,.92), rgba(255,255,255,0) 44%),
    radial-gradient(closest-side at 72% 82%, rgba(3,18,66,.62), rgba(3,18,66,0) 56%),
    radial-gradient(128% 128% at 46% 38%, #62B4FF 0%, #2076FF 34%, #0B3CC0 68%, #06205F 100%);
  box-shadow:inset 0 -28px 54px rgba(3,14,52,.62), inset 9px 9px 32px rgba(255,255,255,.24), 0 40px 76px -20px rgba(0,82,255,.6);}
.viz3d .core::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side at 50% 58%, rgba(0,228,255,.78), rgba(0,210,255,0) 44%);mix-blend-mode:screen;filter:blur(3px);}
.viz3d .core .core-spec{position:absolute;left:18%;top:13%;width:46%;height:30%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));filter:blur(5px);opacity:.7;}

/* glossy orbiting node spheres */
.viz3d .node3d{position:absolute;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 34% 30%,#E6F4FF,#2A88FF 58%,#0A45C8 100%);
  box-shadow:0 8px 18px -4px rgba(0,82,255,.55),inset 2px 2px 6px rgba(255,255,255,.55);}
.viz3d .n1{width:34px;height:34px;right:4%;top:14%;}
.viz3d .n2{width:22px;height:22px;left:1%;top:42%;}
.viz3d .n3{width:28px;height:28px;right:9%;bottom:16%;}
.viz3d .n4{width:16px;height:16px;left:20%;top:12%;}

/* data KPI chips */
.viz3d .kpi{position:absolute;z-index:4;background:#fff;border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow);padding:9px 13px;display:flex;align-items:center;gap:10px;}
.viz3d .kpi .ic{width:28px;height:28px;border-radius:9px;background:var(--grad-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;}
.viz3d .kpi b{font-size:15px;font-weight:900;color:var(--ink);letter-spacing:-.01em;line-height:1;}
.viz3d .kpi span span{display:block;font-size:10.5px;color:var(--ink-400);font-weight:600;margin-top:2px;}
.viz3d .k1{left:-8%;top:24%;}
.viz3d .k2{right:-9%;top:50%;}
.viz3d .k3{left:6%;bottom:2%;}

.cube{display:none;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.fl-a{animation:floaty 5.5s ease-in-out infinite;}
.fl-b{animation:floaty2 6.5s ease-in-out infinite;}

/* =========================================================
   WHY PLAYIO — pipeline flow
   ========================================================= */
.why{padding-top:96px;}
.flow{position:relative;margin-top:58px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:46px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright));opacity:.35;z-index:0;}
.flow-node{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:26px 22px 24px;transition:transform .2s,box-shadow .2s;}
.flow-node:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.flow-node .nidx{position:absolute;top:18px;right:20px;font-size:12px;font-weight:900;color:var(--line-strong);}
.flow-node .dot{width:54px;height:54px;border-radius:16px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 14px 26px -10px rgba(0,82,255,.6);margin-bottom:18px;}
.flow-node h3{font-size:19px;font-weight:850;color:var(--ink);margin:0 0 6px;}
.flow-node p{font-size:14px;color:var(--ink-500);margin:0;}

/* ---- Why : User Signals → Campaign Design → Growth data flow ---- */
.wp-flow{position:relative;display:grid;grid-template-columns:0.85fr 1.2fr 1.0fr;gap:26px;align-items:center;margin-top:60px;}
.wp-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.wp-links .wp-line path{fill:none;stroke:url(#wpg);stroke-width:2;opacity:.45;stroke-dasharray:5 9;animation:wpflow 1.5s linear infinite;}
@keyframes wpflow{to{stroke-dashoffset:-28;}}
.wp-zone{position:relative;z-index:1;}
.wp-cap{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--blue-ink);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:9px;}
.wp-cap::before{content:"";width:18px;height:2.5px;border-radius:3px;background:var(--grad);}
.wp-arrow{display:none;justify-content:center;align-items:center;color:var(--blue);font-size:24px;font-weight:700;margin:4px 0;}

/* signals : scattered chips converging */
.wp-signals{display:flex;flex-direction:column;gap:13px;align-items:flex-start;}
.wp-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;font-size:13.5px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);}
.wp-chip .d{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(0,82,255,.10);}
.wp-chip.c2{margin-left:38px;}
.wp-chip.c3{margin-left:16px;}
.wp-chip.c4{margin-left:48px;}

/* engine centerpiece */
.wp-engine{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:26px 26px 22px;overflow:hidden;}
.wp-engine::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad);}
.wp-engine-glow{position:absolute;right:-50px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(0,82,255,.15),transparent 65%);}
.wp-engine-head{display:flex;align-items:center;gap:13px;margin-bottom:8px;position:relative;}
.wp-engine-ico{width:46px;height:46px;border-radius:14px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 14px 26px -10px rgba(0,82,255,.65);flex:0 0 auto;}
.wp-engine-head b{font-size:18px;font-weight:850;color:var(--ink);display:block;letter-spacing:-.01em;}
.wp-engine-head span{font-size:12px;color:var(--ink-400);font-weight:600;}
.wp-module{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line);position:relative;}
.wp-module .mi{width:30px;height:30px;border-radius:9px;background:var(--grad-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;}
.wp-module .ml{font-size:13.5px;font-weight:700;color:var(--ink-700);flex:0 0 112px;}
.wp-module .mbar{flex:1;height:7px;border-radius:6px;background:var(--bg-soft);overflow:hidden;}
.wp-module .mbar i{display:block;height:100%;border-radius:6px;background:var(--grad);}

/* growth outcome */
.wp-graph{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px;margin-bottom:14px;}
.wp-graph svg{width:100%;height:84px;display:block;overflow:visible;}
.wp-kpis{display:flex;flex-wrap:wrap;gap:10px;}
.wp-chip.c5{margin-left:24px;}
.wp-outs{display:flex;flex-wrap:wrap;gap:9px;}
.wp-out{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;font-size:13px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);}
.wp-out.hot{background:var(--grad);color:#fff;border:0;box-shadow:0 12px 24px -10px rgba(0,82,255,.6);}

/* connectors: clear (match→fit) / soft (fit→journey) */
.wp-links .wp-solid{fill:none;stroke:url(#wpg);stroke-width:2.6;opacity:.75;}
.wp-links .wp-soft{fill:none;stroke:url(#wpg);stroke-width:2;opacity:.45;stroke-dasharray:5 9;animation:wpflow 1.5s linear infinite;}

/* faint signal chips (many-signals feel) */
.wp-chip.dim{background:#fff;border:1px solid var(--line);color:var(--ink-400);box-shadow:none;opacity:.5;
  font-size:12px;font-weight:600;padding:8px 14px;}
.wp-chip.m1{margin-left:58px;}
.wp-chip.m2{margin-left:36px;}
.wp-chip.m3{margin-left:62px;}
.wp-chip.m4{margin-left:40px;}

/* Audience Matching : analysis steps (no numbers/bars) */
.wp-match .wp-engine-head{margin-bottom:14px;}
.wp-step{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line);}
.wp-step .st-ico{width:34px;height:34px;border-radius:10px;background:var(--grad-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;}
.wp-step .st-txt{flex:1;}
.wp-step .st-txt b{font-size:14px;font-weight:800;color:var(--ink);display:block;}
.wp-step .st-txt span{font-size:12px;color:var(--ink-400);font-weight:600;}
.st-vis{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:48px;}
.st-vis.pulse i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:wppulse 1.4s ease-in-out infinite;}
.st-vis.pulse i:nth-child(2){animation-delay:.22s;}
.st-vis.pulse i:nth-child(3){animation-delay:.44s;}
@keyframes wppulse{0%,100%{opacity:.25;transform:scale(.78);}50%{opacity:1;transform:scale(1);}}
.st-vis.nodes{position:relative;width:48px;justify-content:space-between;}
.st-vis.nodes::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;background:var(--line-strong);transform:translateY(-50%);}
.st-vis.nodes i{position:relative;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--blue);}
.st-vis.check{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -6px rgba(0,82,255,.6);min-width:0;}

/* Best-fit Users */
.wp-fit{display:flex;flex-direction:column;align-items:flex-start;}
.wp-fitsub{font-size:13px;color:var(--ink-500);font-weight:600;margin:-8px 0 18px;}
.wp-avatars{display:flex;margin-bottom:18px;padding-left:6px;}
.wp-avatars .av{position:relative;width:48px;height:48px;border-radius:50%;margin-left:-12px;
  background:radial-gradient(circle at 36% 30%, #BFE0FF, #2E86FF 70%, #0A47C8 100%);
  border:2.5px solid #fff;box-shadow:var(--shadow-sm);}
.wp-avatars .av:first-child{margin-left:0;}
.wp-avatars .av.muted{background:radial-gradient(circle at 36% 30%, #EAF1FF, #C3D6F2 75%);}
.wp-avatars .av .chk{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.wp-mtags{display:flex;flex-wrap:wrap;gap:8px;}
.wp-mtags .mt{font-size:11.5px;font-weight:700;color:var(--ink-700);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;box-shadow:var(--shadow-sm);}
.wp-mtags .mt.hot{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(0,82,255,.6);}

/* Growth Journey (abstract, no axis/numbers) */
.wp-journey{display:flex;flex-direction:column;align-items:flex-start;}
.wp-jcurve{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px;margin-bottom:16px;}
.wp-jcurve svg{width:100%;height:90px;display:block;overflow:visible;}
.wp-jsteps{display:flex;flex-direction:column;gap:11px;}
.wp-jsteps .js{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink-700);}
.wp-jsteps .js::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(0,82,255,.1);}
.wp-jsteps .js.hot{color:var(--blue-ink);font-weight:800;}

/* ===== Simplified 3-stage matching flow ===== */
/* 1) User Signals cluster */
.wp-signals2{position:relative;}
.sig-cluster{position:relative;display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-height:230px;}
.sig-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;font-size:13.5px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);position:relative;z-index:2;}
.sig-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(0,82,255,.10);}
.sig-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.55;z-index:1;
  animation:wppulse 2.4s ease-in-out infinite;}
.sig-dot.dim{width:7px;height:7px;opacity:.28;}

/* 2) Playio Matching funnel */
.wp-match2{padding-bottom:24px;}
.match-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;position:relative;}
.match-head b{font-size:19px;font-weight:850;color:var(--ink);letter-spacing:-.01em;}
.funnel{display:flex;align-items:center;gap:14px;margin:22px 2px 18px;}
.fn-in{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.fn-in i{width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.6;}
.fn-in i.dim{opacity:.28;}
.fn-shape{flex:1;height:74px;position:relative;border-radius:8px;
  background:linear-gradient(90deg, rgba(0,82,255,.16), rgba(0,82,255,.30));
  clip-path:polygon(0 4%, 100% 30%, 100% 70%, 0 96%);display:flex;align-items:center;justify-content:center;}
.fn-shape .fn-arrow{color:#fff;font-size:26px;font-weight:700;opacity:.9;margin-right:14px;}
.fn-out{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;}
.fn-out i{width:22px;height:22px;border-radius:50%;background:var(--grad);position:relative;
  box-shadow:0 6px 14px -4px rgba(0,82,255,.6);display:flex;align-items:center;justify-content:center;}
.fn-out i b{color:#fff;font-size:11px;font-weight:800;}
.match-steps{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);}
.match-steps span{font-size:14px;font-weight:800;color:var(--ink);}
.match-steps i{color:var(--blue);font-style:normal;font-weight:700;}

/* 3) Best-fit Users + result flow */
.wp-fit2{display:flex;flex-direction:column;align-items:flex-start;}
.fit-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.game-card{width:46px;height:60px;border-radius:11px;background:var(--grad-soft);border:1px solid #D8E6FF;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;}
.game-card .gc-ico{width:24px;height:24px;border-radius:7px;background:var(--grad);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.game-card .gc-line{width:24px;height:5px;border-radius:3px;background:#fff;opacity:.9;}
.fit-tags{display:flex;gap:8px;margin-bottom:22px;}
.fit-tags .mt{font-size:11.5px;font-weight:700;color:var(--ink-700);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;box-shadow:var(--shadow-sm);}
.fit-tags .mt.hot{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(0,82,255,.6);}
.result-flow{display:flex;align-items:center;gap:10px;padding-top:18px;border-top:1px solid var(--line);width:100%;}
.result-flow .rf{font-size:13px;font-weight:700;color:var(--ink-700);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-sm);}
.result-flow .rf.hot{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(0,82,255,.6);}
.result-flow .rf-arr{color:var(--blue);font-style:normal;font-weight:700;font-size:14px;}

/* ===== Single matching-core visual (Many Signals → Core → Best-fit) ===== */
.mf{position:relative;margin-top:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;min-height:300px;}
.mf-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.mf-links .mf-in path{fill:none;stroke:url(#mfg);stroke-width:2;opacity:.4;stroke-dasharray:5 9;animation:wpflow 1.5s linear infinite;}
.mf-links .mf-out{fill:none;stroke:url(#mfg);stroke-width:2.6;opacity:.7;}
.mf-cap{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--blue-ink);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:9px;}
.mf-cap::before{content:"";width:18px;height:2.5px;border-radius:3px;background:var(--grad);}

/* left : many signals */
.mf-left{position:relative;z-index:1;}
.mf-field{position:relative;height:224px;}
.mf-field .sig-tag{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 15px;font-size:13px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);z-index:2;white-space:nowrap;}
.mf-field .sig-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);}
.mf-field .sig-tag.t1{top:6%;left:0;}
.mf-field .sig-tag.t2{top:44%;left:26%;}
.mf-field .sig-tag.t3{top:80%;left:4%;}
.mf-field .nd{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.55;animation:wppulse 2.6s ease-in-out infinite;}
.mf-field .nd.dim{opacity:.24;width:7px;height:7px;}

/* center : matching core (main object) */
.mf-core-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 8px;}
.mf-ring{position:absolute;top:-14px;left:50%;width:196px;height:196px;margin-left:-98px;border-radius:50%;
  border:1.5px dashed rgba(0,82,255,.3);animation:mfspin 26s linear infinite;}
@keyframes mfspin{to{transform:rotate(360deg);}}
.mf-core{position:relative;width:168px;height:168px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(closest-side at 36% 30%, #6FB4FF, #1E74FF 58%, #0A39B5 100%);
  box-shadow:0 30px 60px -18px rgba(0,82,255,.6), inset 0 -12px 28px rgba(3,16,55,.45), inset 7px 7px 20px rgba(255,255,255,.28);}
.mf-core::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side at 50% 56%, rgba(0,228,255,.55), transparent 56%);mix-blend-mode:screen;}
.mf-core svg{width:60px;height:60px;position:relative;z-index:1;filter:drop-shadow(0 3px 6px rgba(3,16,55,.35));}
.mf-core-label{text-align:center;}
.mf-core-label b{display:block;font-size:18px;font-weight:850;color:var(--ink);letter-spacing:-.01em;}
.mf-core-label span{font-size:12.5px;color:var(--ink-400);font-weight:600;}

/* right : best-fit users */
.mf-right{position:relative;z-index:1;}
.mf-sub{font-size:13px;color:var(--ink-500);font-weight:600;margin:-8px 0 18px;}
.mf-users{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.mf-rlabel{margin-bottom:20px;}
.mf-rlabel .mt{font-size:11.5px;font-weight:700;border-radius:999px;padding:7px 14px;}
.mf-rlabel .mt.hot{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(0,82,255,.6);}
.mf-right .result-flow{border-top:1px solid var(--line);padding-top:18px;}
.mf-arrow{display:none;justify-content:center;align-items:center;color:var(--blue);font-size:24px;font-weight:700;}

/* ===== 2-column section : text + concept visual ===== */
.why-2col{display:grid;grid-template-columns:1fr 1.06fr;gap:60px;align-items:center;}
.why-text .eyebrow{margin-bottom:20px;}
.why-text .sec-title{margin:0 0 18px;}
.why-body{font-size:16px;color:var(--ink-500);line-height:1.65;margin:0 0 30px;max-width:520px;}
.why-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.why-points li{display:flex;align-items:flex-start;gap:14px;}
.why-points .wpn{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--grad-soft);color:var(--blue-ink);
  font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.why-points .wpt b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em;}
.why-points .wpt span{font-size:14px;color:var(--ink-500);line-height:1.55;}

/* right concept card */
.why-visual{position:relative;}
.mf-card{position:relative;background:linear-gradient(170deg,#F6FAFF 0%, #FFFFFF 58%);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);padding:36px 30px 32px;
  display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden;}
.mf-card::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,255,.10),transparent 65%);pointer-events:none;}
.mfc-signals{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:13px;}
.mfc-cap{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--blue-ink);text-transform:uppercase;}
.mfc-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.mfc-tag{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);}
.mfc-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);}
.mfc-dots{display:flex;gap:11px;justify-content:center;margin-top:2px;}
.mfc-dots i{width:8px;height:8px;border-radius:50%;background:var(--blue);opacity:.5;animation:wppulse 2.4s ease-in-out infinite;}
.mfc-dots i.dim{opacity:.22;width:6px;height:6px;}
.mfc-arrow{color:var(--blue);font-size:20px;font-weight:700;opacity:.65;line-height:1;position:relative;z-index:1;}
.mf-core-wrap.mfc-core{gap:14px;margin:4px 0;z-index:1;}
.mfc-fit{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;}
.mfc-users{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;}
.mfc-users .mt.hot{font-size:11.5px;font-weight:700;border-radius:999px;padding:7px 14px;background:var(--grad);color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(0,82,255,.6);}
.mfc-fit .result-flow{border-top:1px solid var(--line);padding-top:16px;width:100%;justify-content:center;gap:9px;}

/* ===== horizontal concept flow inside card ===== */
.mf-card.mfh{display:grid;grid-template-columns:0.9fr 1.04fr 0.96fr;gap:16px;align-items:center;padding:38px 30px;}
.mfh-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.mfh-links .mfh-in path{fill:none;stroke:url(#mfhg);stroke-width:1.8;opacity:.38;stroke-dasharray:5 9;animation:wpflow 1.5s linear infinite;}
.mfh-links .mfh-out{fill:none;stroke:url(#mfhg);stroke-width:2.4;opacity:.6;}

/* left signals cluster */
.mfh-signals{position:relative;z-index:1;height:196px;}
.mfh-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 13px;font-size:12px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);white-space:nowrap;z-index:2;}
.mfh-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);}
.mfh-chip.a{top:6%;left:0;}
.mfh-chip.b{top:42%;left:16%;}
.mfh-chip.c{top:80%;left:0;}
.mfh-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue);opacity:.5;animation:wppulse 2.5s ease-in-out infinite;}
.mfh-dot.dim{opacity:.22;width:6px;height:6px;}

/* center matching core (smaller, funnel) */
.mfh-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;}
.mfh-core .mf-ring{width:140px;height:140px;margin-left:-70px;top:-11px;}
.mfh-core .mf-core{width:118px;height:118px;}
.mfh-core .mf-core svg{width:46px;height:46px;}
.mfh-core .mf-core-label b{font-size:16px;}
.mfh-core .mf-core-label span{font-size:11.5px;}

/* right best-fit users */
.mfh-users{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:13px;}
.mfh-cap{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--blue-ink);text-transform:uppercase;}
.mfh-userrow{display:flex;align-items:center;gap:12px;}
.mfh-tags{display:flex;flex-wrap:wrap;gap:6px;}
.mfh-tags .rt{font-size:11px;font-weight:700;color:var(--ink-500);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;}

/* ===== Game-fit Audience Map ===== */
.mf-card.gm{display:block;padding:26px 26px 30px;}
.gm-cap{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--blue-ink);text-transform:uppercase;text-align:center;margin-bottom:6px;}
.gm-stage{position:relative;height:352px;}
.gm-stage::before{content:"";position:absolute;top:50%;left:50%;width:210px;height:210px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,82,255,.13),transparent 66%);z-index:0;pointer-events:none;}
.gm-orbit{position:absolute;top:50%;left:50%;width:66%;height:80%;transform:translate(-50%,-50%);
  border:1.5px dashed rgba(0,82,255,.16);border-radius:50%;z-index:0;}
.gm-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.gm-links line{stroke:url(#gml);stroke-width:2.2;vector-effect:non-scaling-stroke;opacity:.9;stroke-linecap:round;
  stroke-dasharray:4 5;animation:wpflow 1.4s linear infinite;}
.gm-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.16;z-index:1;}

.gm-game{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:124px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;text-align:center;}
.gm-thumb{height:62px;border-radius:11px;background:radial-gradient(120% 120% at 30% 20%, #5AA0FF, #0F5BF0 60%, #0A39B5);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;box-shadow:inset 0 -6px 16px rgba(3,16,55,.35);}
.gm-thumb svg{width:30px;height:30px;}
.gm-name{font-size:13px;font-weight:850;color:var(--ink);letter-spacing:-.01em;}
.gm-badge{position:absolute;top:-9px;right:-9px;width:25px;height:25px;border-radius:50%;background:var(--grad);color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 6px 14px -5px rgba(0,82,255,.7);}

.gm-user{position:absolute;transform:translate(-50%,-50%);z-index:3;}
.gm-user .av2{display:block;width:44px;height:44px;border-radius:50%;border:2.5px solid #fff;box-shadow:var(--shadow-sm);}
.gm-user.on .av2{background:radial-gradient(circle at 36% 30%, #BFE0FF, #2E86FF 70%, #0A47C8 100%);}
.gm-user.off{opacity:.4;z-index:2;}
.gm-user.off .av2{width:38px;height:38px;background:radial-gradient(circle at 36% 30%, #EEF3FB, #C4D2E6 78%);}
.gm-user .chk2{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;background:var(--grad);
  color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.gm-user .utag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:700;color:var(--ink-600);box-shadow:var(--shadow-sm);}
.gm-user.top .utag{bottom:122%;}
.gm-user.bot .utag{top:122%;}

/* ===== HOW PLAYIO WORKS : 3-card layout ===== */
.hpw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:stretch;}
.hpw-card{background:#F7F9FD;border:1px solid #E7EDF7;border-radius:20px;padding:24px 24px 26px;
  box-shadow:0 12px 32px -20px rgba(20,32,68,.18);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;}
.hpw-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px -20px rgba(20,32,68,.22);}
.hpw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6B7896;margin-bottom:16px;}
.hpw-eyebrow i{width:7px;height:7px;border-radius:50%;background:#4488FF;}
.hpw-viz{position:relative;height:206px;background:#F4F7FC;border:1px solid #E7EDF7;border-radius:16px;
  margin-bottom:20px;overflow:hidden;}
.hpw-card h3{font-size:18px;font-weight:850;color:#142044;margin:0 0 8px;letter-spacing:-.01em;}
.hpw-card p{font-size:13.5px;color:#5E6C8A;line-height:1.6;margin:0;min-height:44px;}

/* Card 1 — Signal Log UI */
.slog{position:absolute;top:24px;left:22px;width:62%;background:#fff;border:1px solid #E7EDF7;border-radius:13px;
  box-shadow:0 10px 26px -14px rgba(20,32,68,.18);padding:16px 16px;display:flex;flex-direction:column;gap:16px;}
.slog-row{display:flex;align-items:center;gap:11px;}
.slog-row.dim{opacity:.5;}
.sb{width:14px;height:14px;border-radius:50%;border:2px solid #CDD8EA;background:#fff;flex:0 0 auto;}
.slog-row.on .sb{border-color:#4488FF;background:#4488FF;box-shadow:0 0 0 3px rgba(68,136,255,.16);}
.sl-label{font-size:12px;font-weight:700;color:#9AA6BE;flex:1;white-space:nowrap;}
.slog-row.on .sl-label{color:#142044;}
.sl-bar{height:3px;border-radius:3px;background:#E7EDF7;flex:0 0 auto;width:64px;}
.slog-row.on .sl-bar{height:6px;width:50px;background:#4488FF;}
.slog-dots{position:absolute;top:0;right:0;width:32%;height:100%;pointer-events:none;}
.slog-dots i{position:absolute;width:5px;height:5px;border-radius:50%;background:#CBD6E8;}
.slog-dots i.b{background:#4488FF;opacity:.7;}

/* Card 2 — Segment Selection UI */
.seg{position:absolute;border-radius:15px;}
.seg.back{width:40%;height:60%;top:20%;background:#EEF3FB;border:1px solid #E2E9F5;}
.seg.back.l{left:5%;transform:rotate(-5deg);}
.seg.back.r{right:5%;transform:rotate(5deg);}
.seg.front{width:50%;height:80%;top:10%;left:50%;transform:translateX(-50%);background:#fff;border:1.6px solid #4488FF;z-index:3;
  box-shadow:0 16px 32px -12px rgba(68,136,255,.40), 0 0 0 5px rgba(68,136,255,.06);}
.seg .seg-tag{position:absolute;top:13px;left:0;right:0;text-align:center;font-size:11px;font-weight:800;color:#4488FF;letter-spacing:.01em;}
.seg .cl{position:absolute;inset:0;}
.seg .cl i{position:absolute;width:7px;height:7px;border-radius:50%;background:#BFCBE0;transform:translate(-50%,-50%);}
.seg.front .cl{top:30px;}
.seg.front .cl i{background:#7FA9F5;}
.seg.front .cl i:nth-child(3n+1){background:#4488FF;}
.seg.front .cl i:nth-child(4n){background:#49C2F2;}

/* Card 3 — Campaign Flow Builder UI */
.fbuild{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 16px;}
.fb-step{flex:0 0 auto;width:80px;height:86px;background:#fff;border:1.5px solid #E7EDF7;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px -13px rgba(20,32,68,.18);}
.fb-step .fb-ico{width:26px;height:26px;color:#9AA6BE;display:flex;align-items:center;justify-content:center;}
.fb-step .fb-ico svg{width:100%;height:100%;}
.fb-step .fb-l{font-size:10px;font-weight:800;color:#9AA6BE;letter-spacing:.01em;white-space:nowrap;}
.fb-step.on{border-color:#4488FF;box-shadow:0 16px 30px -12px rgba(68,136,255,.45), 0 0 0 5px rgba(68,136,255,.07);}
.fb-step.on .fb-ico{color:#4488FF;}
.fb-step.on .fb-l{color:#4488FF;}
.fb-conn{flex:1;max-width:26px;height:0;border-top:2px dotted #C5D1E6;margin:0 2px;}

/* ===== Partner logo marquee ===== */
.lmq{background:transparent;padding:34px 0 38px;overflow:hidden;}
.lmq-cap{text-align:center;font-size:12px;font-weight:700;letter-spacing:.04em;color:#9AA6BE;margin:0 0 22px;}
.lmq-view{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0, #000 7%, #000 93%, transparent 100%);}
.lmq-track{display:flex;width:max-content;align-items:center;animation:lmq 46s linear infinite;will-change:transform;}
.lmq:hover .lmq-track{animation-play-state:paused;}
@keyframes lmq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.lmq-logo{display:inline-flex;align-items:center;gap:11px;margin-right:68px;color:#94A0B8;
  transition:color .25s ease,opacity .25s ease;opacity:.85;}
.lmq-logo:hover{color:#142044;opacity:1;}
.lm-mark{width:25px;height:25px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.lm-mark svg{width:100%;height:100%;}
.lm-name{font-size:19px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;}
@media (prefers-reduced-motion:reduce){.lmq-track{animation:none;}}
.wp-kpi{display:inline-flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 15px;box-shadow:var(--shadow-sm);min-width:80px;}
.wp-kpi b{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1;}
.wp-kpi em{font-style:normal;font-size:11px;color:var(--ink-400);font-weight:700;margin-top:4px;}
.wp-kpi.up b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* =========================================================
   KEY NUMBERS — Bento grid
   ========================================================= */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:20px;margin-top:54px;}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:26px 26px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,box-shadow .2s;}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.bcard .lab{font-size:13px;font-weight:800;color:var(--ink-700);letter-spacing:.02em;}
.bcard .sub{font-size:12.5px;color:var(--ink-400);margin-top:3px;}
.bnum{font-size:clamp(34px,4vw,44px);font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1;}
.bnum em{font-style:normal;font-size:.5em;color:var(--blue);margin-left:2px;vertical-align:.06em;}

/* big dark hero metric (re-execution) spans 2x2 */
.b-hero{grid-column:span 2;grid-row:span 2;background:var(--grad-navy);border:0;color:#fff;box-shadow:var(--shadow-navy);padding:34px 34px 30px;}
.b-hero::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.35),transparent 65%);}
.b-hero .lab{color:#9FC0FF;letter-spacing:.06em;text-transform:uppercase;font-size:12px;}
.b-hero .big{display:flex;align-items:flex-end;gap:6px;margin:8px 0 4px;}
.b-hero .big b{font-size:clamp(56px,8vw,84px);font-weight:900;letter-spacing:-.04em;line-height:.9;
  background:linear-gradient(120deg,#fff,#BFE6FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.b-hero .big em{font-style:normal;font-size:28px;font-weight:800;color:var(--blue-bright);padding-bottom:10px;}
.b-hero p{font-size:14px;color:#BFD0EE;max-width:340px;margin:6px 0 0;position:relative;z-index:1;}
.b-hero .rex-chart{margin-top:auto;padding-top:12px;}
.b-hero .rex-chart svg{width:100%;height:auto;display:block;max-height:172px;}

/* downloads wide : number-focused */
.b-wide{grid-column:span 2;}
.b-dl{justify-content:center;gap:4px;}
.b-dl .dl-head{position:relative;z-index:1;}
.b-dl .dl-num{font-size:clamp(48px,6.2vw,66px);margin-top:14px;position:relative;z-index:1;}
.b-dl::after{content:"";position:absolute;right:-30px;bottom:-80px;width:320px;height:240px;pointer-events:none;
  background:radial-gradient(circle,rgba(0,82,255,.12),rgba(0,212,255,.05) 45%,transparent 70%);}

/* partners : growth bars + trend line */
.b-partners .prt-chart{margin-top:12px;}
.b-partners .prt-chart svg{width:100%;height:auto;display:block;max-height:106px;}

/* games : lineup scale — overlapping game-card stack */
.b-games .gd-deck{position:relative;height:56px;margin-top:18px;}
.b-games .gc{position:absolute;top:3px;width:42px;height:50px;border-radius:9px;border:1px solid #E2E9F5;
  background:linear-gradient(155deg,#F5F8FF,#E6EEFB);box-shadow:0 6px 14px -9px rgba(20,32,68,.3);}
.b-games .gc::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:19px;border-radius:5px;
  background:linear-gradient(150deg,#E5EDFB,#D2E0F6);}
.b-games .gc::after{content:"";position:absolute;left:6px;top:31px;width:16px;height:3px;border-radius:2px;background:#D6E0EF;}
.b-games .gc:nth-child(1){left:0;opacity:.42;transform:scale(.9);}
.b-games .gc:nth-child(2){left:18px;opacity:.58;transform:scale(.94);}
.b-games .gc:nth-child(3){left:36px;opacity:.74;transform:scale(.97);}
.b-games .gc:nth-child(4){left:54px;opacity:.88;}
.b-games .gc:nth-child(5){left:72px;}
.b-games .gc:nth-child(6){left:90px;background:linear-gradient(155deg,#DCEAFF,#BCD4FF);border-color:#C2D5F4;}
.b-games .gc:nth-child(6)::before{background:linear-gradient(150deg,#B7CFFB,#97BBF4);}
.b-games .gc:nth-child(6)::after{background:#9DBDF0;}

/* =========================================================
   SOLUTIONS — Bento
   ========================================================= */
.sol-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);gap:20px;margin-top:54px;}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:28px 28px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.scard .tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--blue-ink);
  background:var(--bg-soft);border:1px solid var(--line);padding:6px 12px;border-radius:999px;align-self:flex-start;letter-spacing:.04em;}
.scard h3{font-size:23px;font-weight:850;color:var(--ink);margin:16px 0 9px;letter-spacing:-.02em;}
.scard p{font-size:14.5px;color:var(--ink-500);margin:0;}
.scard .more{margin-top:18px;font-size:14px;font-weight:800;color:var(--blue-ink);display:inline-flex;align-items:center;gap:7px;}
.scard .more .arr{transition:transform .18s;}
.scard:hover .more .arr{transform:translateX(4px);}
/* feature card (Time Quest) 2x2 with mini UI */
.s-feature{grid-column:span 2;grid-row:span 2;}
.s-feature .ui{margin-top:24px;flex:1;background:linear-gradient(160deg,#F7FAFF,#fff);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:stretch;}
.s-feature .ui .panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;}
.s-feature .ui .panel .ph{font-size:11px;font-weight:700;color:var(--ink-400);margin-bottom:10px;}
.s-feature .ui .gauge-row{display:flex;flex-direction:column;gap:12px;justify-content:center;flex:1;}
.s-feature .ui .gbar{height:9px;border-radius:6px;background:var(--bg-soft);overflow:hidden;}
.s-feature .ui .gbar i{display:block;height:100%;border-radius:6px;background:var(--grad);}
.s-feature .ui .glabel{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-400);font-weight:600;margin-bottom:5px;}
.s-feature .ui .glabel b{color:var(--ink);}
.s-feature .ui .ring{width:96px;height:96px;border-radius:50%;margin:auto;position:relative;
  background:conic-gradient(var(--blue) 0 72%, #E6ECF6 72% 100%);}
.s-feature .ui .ring::after{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff;}
.s-feature .ui .ring .rt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.s-feature .ui .ring .rt b{font-size:20px;font-weight:900;color:var(--ink);}
.s-feature .ui .ring .rt span{font-size:9px;color:var(--ink-400);font-weight:600;}
.s-icon{width:50px;height:50px;border-radius:14px;background:var(--grad-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:4px;}
.scard.s-small .vis{margin-top:auto;}
.s-small .dots{display:flex;gap:5px;margin-top:16px;}
.s-small .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);}
.s-small .dots i.on{background:var(--grad);}
.sol-foot{margin-top:42px;text-align:center;}

/* ---- Advertising lifecycle flow (Acquire→Activate→Engage→Retain→Expand) ---- */
.lc-flow{position:relative;margin-top:60px;}
.lc-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.lc-rail{position:absolute;left:10%;right:10%;top:28px;height:3px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,#0052FF,#00B6FF 60%,#00D4FF);opacity:.5;}
.lc-rail::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:9px solid #00D4FF;border-top:6px solid transparent;border-bottom:6px solid transparent;}
.lc-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;}
.lc-node{position:relative;z-index:2;margin-bottom:20px;}
.lc-ico{width:56px;height:56px;border-radius:17px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:0 14px 26px -10px rgba(0,82,255,.6);}
.lc-card{position:relative;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:22px 18px 20px;transition:transform .2s,box-shadow .2s;}
.lc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.lc-num{font-size:12px;font-weight:900;color:var(--blue);letter-spacing:.1em;margin-bottom:7px;}
.lc-card h3{font-size:19px;font-weight:850;color:var(--ink);margin:0 0 9px;letter-spacing:-.01em;}
/* body 의 word-break:auto-phrase 가 카드 폭에서 문절 단위로 재개행해 Engage(コンバージョン 중간
   개행)·Expand 가 디자인 시안과 어긋난다. keep-all 로 `<br>` 위치만 따르게 한다. */
.lc-card p{font-size:13px;color:var(--ink-500);margin:0 0 16px;line-height:1.55;min-height:60px;
  word-break:keep-all;overflow-wrap:normal;line-break:strict;}
.lc-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;border-radius:999px;padding:6px 12px;letter-spacing:.01em;}
.lc-tag.pr{background:var(--grad-soft);color:var(--blue-ink);border:1px solid #D8E6FF;}
.lc-tag.pr::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);}
.lc-tag.fn{background:#fff;color:var(--ink-400);border:1px dashed var(--line-strong);}

/* =========================================================
   PARTNERS
   ========================================================= */
.p-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.p-badge{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--grad-navy);color:#fff;
  border-radius:var(--r);padding:18px 24px;box-shadow:var(--shadow-navy);}
.p-badge b{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.02em;}
.p-badge span{font-size:11.5px;opacity:.85;margin-top:5px;letter-spacing:.1em;font-weight:700;}
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:46px;}
.partner-logo-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
  height:84px;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:800;color:#9AA8C2;
  letter-spacing:.02em;transition:transform .16s,box-shadow .16s,color .16s;}
.partner-logo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--blue-ink);}

/* =========================================================
   RESOURCE
   ========================================================= */
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;}
.rescard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.rescard:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.rthumb{height:160px;position:relative;overflow:hidden;background:var(--grad-navy);}
.rthumb .glow{position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.4),transparent 65%);}
.rthumb .ui{position:absolute;background:rgba(255,255,255,.92);border-radius:9px;}
.rthumb .ui.a{left:22px;top:26px;width:58%;height:14px;}
.rthumb .ui.b{left:22px;top:48px;width:40%;height:10px;background:rgba(255,255,255,.5);}
.rthumb .bars{position:absolute;left:22px;bottom:20px;display:flex;align-items:flex-end;gap:6px;height:54px;}
.rthumb .bars i{width:14px;border-radius:3px;background:linear-gradient(180deg,#00D4FF,rgba(0,82,255,.6));}
.rthumb .line{position:absolute;right:18px;bottom:18px;width:46%;height:50px;}
.rthumb .cat{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;color:var(--navy);background:#fff;padding:5px 11px;border-radius:999px;letter-spacing:.03em;z-index:2;box-shadow:0 4px 12px -4px rgba(13,33,73,.35);}
.rthumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
a.rescard{cursor:pointer;color:inherit;text-decoration:none;}
.rbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.rescard h3{font-size:18px;font-weight:850;color:var(--ink);margin:0 0 9px;line-height:1.35;}
.rescard p{font-size:14px;color:var(--ink-500);margin:0 0 16px;flex:1;}
.rescard .meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.rescard .date{font-size:12.5px;color:var(--ink-400);font-weight:600;}
.rescard .go{font-size:13.5px;font-weight:800;color:var(--blue-ink);display:inline-flex;gap:5px;align-items:center;}
.rescard:hover .go .arr{transform:translateX(3px);}
.go .arr{transition:transform .18s;}
.res-foot{margin-top:42px;text-align:center;}

/* =========================================================
   FINAL CTA
   ========================================================= */
.finalcta{padding:60px 0 110px;}
.cta-box{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--grad-navy);color:#fff;
  padding:78px 56px;text-align:center;box-shadow:var(--shadow-navy);}
.cta-box .grid-bg{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent);}
.cta-box .orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.5),transparent 65%);}
.cta-box .orb.o1{width:280px;height:280px;left:-60px;top:-80px;}
.cta-box .orb.o2{width:340px;height:340px;right:-90px;bottom:-120px;background:radial-gradient(circle,rgba(0,82,255,.55),transparent 65%);}
.cta-float{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:14px;backdrop-filter:blur(3px);z-index:1;}
.cta-float.f1{left:7%;top:24%;width:92px;height:60px;}
.cta-float.f2{right:9%;top:20%;width:70px;height:70px;border-radius:16px;}
.cta-float.f3{right:15%;bottom:18%;width:104px;height:48px;}
.cta-box .inner{position:relative;z-index:2;max-width:700px;margin:0 auto;}
.cta-box h2{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.03em;margin:0 0 16px;line-height:1.15;}
.cta-box h2 .grad{background:linear-gradient(110deg,#fff,#7FE3FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta-box .csub{font-size:18px;color:#CFE0FB;margin:0 0 8px;}
.cta-box .cbody{font-size:15px;color:#A9BEE3;margin:0 0 32px;}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta-box .btn-primary{background:#fff;color:var(--blue-ink);box-shadow:0 18px 36px -14px rgba(0,0,0,.45);}
.cta-box .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}

/* =========================================================
   FOOTER (dark navy)
   ========================================================= */
.footer{background:var(--navy);color:#C4D2EC;padding:64px 0 30px;position:relative;z-index:1;}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;}
.foot-logo-chip{display:inline-flex;background:#fff;padding:12px 16px;border-radius:12px;margin-bottom:18px;}
.foot-logo-chip .logo-image{height:26px;}
.foot-brand p{font-size:13px;line-height:1.75;color:#90A2C4;max-width:340px;margin:0 0 20px;}
.foot-cta-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 20px;max-width:330px;}
.foot-cta-card p{font-size:14.5px;font-weight:700;color:#fff;margin:0 0 12px;}
.foot-col h4{font-size:12px;font-weight:800;color:#fff;letter-spacing:.1em;margin:4px 0 16px;text-transform:uppercase;}
.foot-col a{display:block;font-size:14.5px;color:#90A2C4;padding:6px 0;transition:color .15s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);}
.foot-bottom a{font-size:13.5px;color:#90A2C4;}
.foot-bottom a:hover{color:#fff;}
.foot-bottom .copy{font-size:13.5px;color:#6E81A6;}

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(13,33,73,.6);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.modal-overlay.open{display:flex;animation:fade .15s ease;}
.jpm{background:#fff;border-radius:var(--r-lg);width:100%;max-width:540px;box-shadow:var(--shadow-lg);position:relative;
  padding:34px 34px 30px;margin:auto;animation:pop .2s ease;}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.jpm .close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;font-size:18px;color:var(--ink-500);display:flex;align-items:center;justify-content:center;transition:.15s;}
.jpm .close:hover{background:var(--bg-soft);color:var(--ink);}
.jpm h3{font-size:24px;font-weight:900;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em;}
.jpm .m-desc{font-size:14px;color:var(--ink-500);margin:0 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-700);margin-bottom:7px;}
.field label .req{color:var(--blue);margin-left:2px;}
.field input[type=text],.field input[type=email],.field textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);background:#FBFCFF;transition:.15s;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.14);background:#fff;}
.field textarea{min-height:96px;resize:vertical;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pillset{display:flex;flex-wrap:wrap;gap:8px;}
.pill{position:relative;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-strong);border-radius:11px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink-700);background:#FBFCFF;cursor:pointer;transition:.14s;user-select:none;}
.pill input{position:absolute;opacity:0;pointer-events:none;}
.pill .box{width:16px;height:16px;border-radius:5px;border:1.5px solid #BFCEE6;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;transition:.14s;}
.pill:has(input:checked){border-color:var(--blue);background:#EAF1FF;color:var(--blue-ink);}
.pill:has(input:checked) .box{background:var(--blue);border-color:var(--blue);}
.pill:has(input:checked) .box::after{content:"✓";}
.privacy{font-size:12px;color:var(--ink-400);line-height:1.6;margin:20px 0 18px;}
.privacy a{color:var(--blue);font-weight:600;text-decoration:underline;}
.jpm .submit{width:100%;padding:15px;font-size:16px;}
.thanks{display:none;text-align:center;padding:30px 10px 18px;}
.thanks .check{width:64px;height:64px;border-radius:50%;background:var(--grad);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 18px 36px -14px rgba(0,82,255,.7);}
.thanks h3{margin-bottom:10px;}
.thanks p{font-size:15px;color:var(--ink-500);margin:0 0 24px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:56px;}
  .hero-viz{max-width:560px;margin:0 auto;min-height:420px;}
  .dash{transform:rotateY(-10deg) rotateX(5deg);}
  .viz3d{transform:scale(.92);}
  .wp-flow{grid-template-columns:1fr;gap:0;}
  .wp-links{display:none;}
  .wp-zone{margin:0 auto;max-width:440px;width:100%;}
  .wp-arrow{display:flex;}
  .flow{grid-template-columns:repeat(2,1fr);}
  .flow::before{display:none;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .b-hero{grid-column:span 2;grid-row:span 2;}
  .b-wide{grid-column:span 2;}
  .sol-bento{grid-template-columns:repeat(2,1fr);}
  .s-feature{grid-column:span 2;grid-row:span 1;}
  .s-feature .ui{grid-template-columns:1.3fr 1fr;}
  .logo-wall{grid-template-columns:repeat(4,1fr);}
  .res-cards{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:920px){
  .lc-track{grid-template-columns:1fr;gap:14px;}
  .lc-rail{display:none;}
  .lc-track::before{content:"";position:absolute;left:28px;top:28px;bottom:28px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,#0052FF,#00D4FF);opacity:.4;}
  .lc-stage{flex-direction:row;align-items:flex-start;text-align:left;gap:18px;}
  .lc-node{margin-bottom:0;flex:0 0 auto;}
  .lc-card{flex:1;}
  .lc-card p{min-height:0;margin-bottom:14px;}
  .mf{grid-template-columns:1fr;gap:6px;min-height:0;}
  .mf-links{display:none;}
  .mf-arrow{display:flex;}
  .mf-left,.mf-core-wrap,.mf-right{margin:0 auto;max-width:460px;width:100%;}
  .mf-core-wrap{margin:10px auto;}
  .mf-field{height:200px;}
  .why-2col{grid-template-columns:1fr;gap:42px;}
  .mf-card{max-width:480px;margin:0 auto;width:100%;}
  .why-body{max-width:none;}
}
@media (max-width:760px){
  .gnb-menu,.gnb-cta{display:none;}
  .hamburger{display:flex;}
  .hpw-cards{grid-template-columns:1fr;gap:18px;max-width:430px;margin-left:auto;margin-right:auto;}
  .mf-card.mfh{grid-template-columns:1fr;gap:24px;padding:30px 22px;}
  .mfh-links{display:none;}
  .mfh-signals{height:150px;max-width:300px;margin:0 auto;width:100%;}
  .mfh-core{align-items:center;}
  .mfh-users{align-items:center;text-align:center;}
  .mfh-userrow{justify-content:center;}
  .mfh-tags{justify-content:center;}
  .wrap{padding:0 20px;}
  .gnb-inner{padding:0 20px;}
  .section{padding:74px 0;}
  .hero{padding:112px 0 70px;}
  .dash{transform:none;}
  .hero-viz{min-height:340px;}
  .viz3d{position:relative;left:50%;transform:translateX(-50%) scale(.7);}
  .cube{display:none;}
  .bento{grid-template-columns:1fr;}
  .b-hero,.b-wide{grid-column:span 1;}
  .b-hero{grid-row:span 1;}
  .sol-bento{grid-template-columns:1fr;}
  .s-feature{grid-column:span 1;}
  .s-feature .ui{grid-template-columns:1fr;}
  .res-cards{grid-template-columns:1fr;}
  .logo-wall{grid-template-columns:repeat(2,1fr);}
  .foot-top{grid-template-columns:1fr;gap:28px;}
  .cta-box{padding:56px 24px;}
  .row2{grid-template-columns:1fr;}
  .p-top{flex-direction:column;align-items:flex-start;}
}
@media (max-width:480px){
  .hero h1{font-size:26px;line-height:1.22;}
  .hero-stats{gap:16px 22px;}
  .viz3d{transform:translateX(-50%) scale(.62);}
  .hero-viz{min-height:300px;}
}
@media (max-width:420px){
  .flow{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;scroll-behavior:auto !important;}}
:focus-visible{outline:3px solid rgba(0,82,255,.5);outline-offset:2px;border-radius:6px;}

/* match company final CTA design */
.cta-box .orb.o1{background:radial-gradient(circle,rgba(120,170,255,.32),transparent 66%);}
.cta-box .orb.o2{background:radial-gradient(circle,rgba(68,136,255,.4),transparent 66%);}
.cta-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%;z-index:0;pointer-events:none;}
.cta-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5;}

/* ===== Advertising dropdown (desktop) ===== */
.gnb-drop{position:relative;display:flex;align-items:center;}
.gnb-drop-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:600;color:var(--ink-500);padding:9px 15px;border-radius:10px;transition:.15s;letter-spacing:-.01em;}
.gnb-drop-trigger:hover{color:var(--blue-ink);background:var(--bg-soft);}
.gnb-drop-trigger.active{color:var(--blue-ink);font-weight:700;}
.gnb-drop-trigger .chev{width:13px;height:13px;transition:transform .2s;opacity:.85;}
.gnb-drop:hover .gnb-drop-trigger .chev,.gnb-drop:focus-within .gnb-drop-trigger .chev{transform:rotate(180deg);}
.gnb-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:316px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:8px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:120;}
.gnb-drop:hover .gnb-drop-menu,.gnb-drop:focus-within .gnb-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(12px);}
.gnb-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.gnb-drop-item{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:11px;transition:background .15s;text-decoration:none;}
.gnb-drop-item:hover{background:#F2F7FF;}
.gnb-drop-item .ddt{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.gnb-drop-item:hover .ddt{color:#2D63D6;}
.gnb-drop-item .ddd{font-size:11.5px;color:var(--ink-500);line-height:1.45;font-weight:500;}
.gnb-drop-item.current{background:#F2F7FF;}
.gnb-drop-item.current .ddt{color:#2D63D6;}

/* ===== Advertising group (mobile) ===== */
.m-menu .m-group{display:flex;flex-direction:column;border-bottom:1px solid var(--line);}
.m-menu .m-group-label{font-size:18px;font-weight:800;color:var(--ink);padding:15px 8px 4px;}
.m-menu a.m-sub{font-size:16px;font-weight:600;color:var(--ink-500);padding:11px 8px 11px 22px;border-bottom:0;}
.m-menu a.m-sub.active{color:var(--blue-ink);font-weight:700;}


/* ===== EDIT: hero pad (soft accent between badge & copy) ===== */
.hero-pad{position:relative;display:flex;justify-content:center;margin:18px 0 6px;}
.hero-pad img{width:clamp(86px,10vw,116px);height:auto;position:relative;z-index:1;opacity:.78;
  filter:drop-shadow(0 14px 22px rgba(0,82,255,.18));
  animation:padFloat 6.5s ease-in-out infinite;will-change:transform;}
.hero-pad::before{content:"";position:absolute;left:50%;top:50%;width:clamp(150px,17vw,200px);height:clamp(150px,17vw,200px);
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(0,168,255,.26),rgba(0,82,255,.08) 44%,transparent 70%);}
@keyframes padFloat{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(2deg);}}
@media (prefers-reduced-motion:reduce){.hero-pad img{animation:none;}}

/* ===== EDIT: re-execution rate emphasis ===== */
.b-hero .rex-top{position:relative;z-index:1;}
.b-hero .rex-top::after{content:"";position:absolute;left:-18px;top:44px;width:clamp(220px,60%,300px);height:150px;z-index:-1;
  background:radial-gradient(58% 60% at 32% 50%,rgba(0,212,255,.26),transparent 72%);pointer-events:none;}
.b-hero .rex-label{font-size:clamp(20px,2.5vw,26px);font-weight:850;color:#fff;letter-spacing:-.02em;line-height:1.12;}
.b-hero .rex-label span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7FA8E6;margin-top:7px;}
.b-hero .big{display:flex;align-items:flex-end;gap:6px;margin:14px 0 0;}
.b-hero .big b{font-size:clamp(60px,9vw,94px);}
.b-hero .big em{font-size:clamp(26px,4vw,34px);padding-bottom:12px;}
.b-hero .rex-delta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;
  color:#2BF0B4;background:rgba(43,240,180,.12);border:1px solid rgba(43,240,180,.32);
  padding:6px 12px;border-radius:999px;margin:14px 0 0;letter-spacing:-.01em;line-height:1;}
.b-hero .rex-delta i{font-style:normal;font-weight:600;color:#9FE7D6;font-size:11.5px;}

/* ===== EDIT: partner logo wall (real logos, two rows) ===== */
.lmq-view + .lmq-view{margin-top:20px;}
.lmq-track{display:flex;width:max-content;align-items:center;animation:lmq 64s linear infinite;will-change:transform;}
.lmq-track.rev{animation-direction:reverse;animation-duration:72s;}
.lmq:hover .lmq-track{animation-play-state:paused;}
.lmq-logo-img{height:36px;width:120px;object-fit:contain;flex:0 0 auto;margin-right:28px;
  opacity:.95;transition:opacity .25s ease, transform .25s ease;}
.lmq-logo-img:hover{opacity:1;transform:translateY(-2px);}
@media (max-width:600px){
  .hero-pad{margin:14px 0 4px;}
  .hero-pad img{width:92px;}
  .lmq-logo-img{height:30px;width:94px;margin-right:18px;}
  .lmq-view + .lmq-view{margin-top:14px;}
}

.meiryo{font-family:'Meiryo',sans-serif;}

/* Solutions(lc-flow) 데스크톱 그리드에서 5개 카드(.lc-card) 높이 균일화.
   .lc-track 은 grid(5열)라 각 .lc-stage 는 이미 같은 높이(가장 큰 카드 기준)로 stretch
   되지만, 카드가 '자연 높이'라 텍스트가 짧은 카드는 스테이지 안에서 아래 여백이 생겨
   박스 높이가 제각각으로 보였다(예: Expand 3줄 vs 나머지 2줄). → 카드를 세로 플렉스로
   만들어 스테이지의 남는 세로 공간까지 채우고(flex:1), 태그(.lc-tag)를 margin-top:auto
   로 바닥에 고정해 5개 카드 높이·태그 위치를 정렬한다. 모바일(≤920px, 1열 스택)은 미적용. */
@media (min-width: 921px) {
  .lc-card { flex: 1; display: flex; flex-direction: column; }
  .lc-card .lc-tag { margin-top: auto; align-self: center; }
}