/* Playio JP — company.css (extracted from _ja/company.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}}


/* ===== 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;}
/* ---------- 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;isolation:isolate;padding:154px 0 122px;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;}

/* =========================================================
   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:14px;color:#90A2C4;max-width:290px;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;}

/* =========================================================
   COMPANY PAGE — section-specific styles
   (reuses Home tokens: --blue #0052FF, --navy, --grad, cards)
   ========================================================= */

/* ---- Hero extensions ---- */
.co-hero{padding:150px 0 96px;}
.co-hero .hero-grid{max-width:1180px;}
.co-hero-2col{display:grid;grid-template-columns:1.04fr 1fr;gap:56px;align-items:center;text-align:left;}
.co-hero-text{display:flex;flex-direction:column;align-items:flex-start;}
.co-hero-text h1{text-align:left;max-width:560px;}
.co-hero-sub{font-size:clamp(16px,1.55vw,18.5px);color:var(--ink-700);font-weight:600;margin:22px 0 0;max-width:540px;line-height:1.6;}
.co-hero-body{font-size:15.5px;color:var(--ink-500);margin:16px 0 0;max-width:520px;line-height:1.68;}
.co-hero .hero-cta{justify-content:flex-start;margin-top:32px;}

/* ---- Hero connection graphic ---- */
.co-net{position:relative;background:linear-gradient(168deg,#F6FAFF 0%,#FFFFFF 60%);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:30px 28px 26px;overflow:hidden;}
.co-net::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,255,.10),transparent 65%);pointer-events:none;}
.co-net-cap{position:relative;z-index:2;font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--blue-ink);
  text-transform:uppercase;display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.co-net-cap::before{content:"";width:18px;height:2.5px;border-radius:3px;background:var(--grad);}
.co-net-stage{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  min-height:188px;margin:6px 0 4px;}
.co-net-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.co-net-links .ln{fill:none;stroke:url(#conetg);stroke-width:2.4;opacity:.6;}
.co-net-links .ln.flow{stroke-width:2;opacity:.4;stroke-dasharray:5 9;animation:coflow 1.5s linear infinite;}
@keyframes coflow{to{stroke-dashoffset:-28;}}

.co-side{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2;}
.co-side.right{align-items:flex-end;}
.co-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 15px;font-size:13px;font-weight:700;color:var(--ink-700);box-shadow:var(--shadow-sm);white-space:nowrap;}
.co-pill .ph{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--grad-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:13px;}
.co-pill.muted{color:var(--ink-400);}
.co-pill.muted .ph{background:#fff;border:1px solid var(--line);color:var(--ink-400);}

.co-core{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;}
.co-core-ring{position:absolute;top:-14px;left:50%;width:148px;height:148px;margin-left:-74px;border-radius:50%;
  border:1.5px dashed rgba(0,82,255,.32);animation:cospin 26s linear infinite;}
@keyframes cospin{to{transform:rotate(360deg);}}
.co-core-orb{position:relative;width:118px;height:118px;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 26px 52px -18px rgba(0,82,255,.6), inset 0 -10px 24px rgba(3,16,55,.4), inset 6px 6px 16px rgba(255,255,255,.26);}
.co-core-orb::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side at 50% 56%, rgba(0,228,255,.5), transparent 56%);mix-blend-mode:screen;}
.co-core-orb b{position:relative;z-index:1;color:#fff;font-size:15px;font-weight:850;letter-spacing:.01em;
  filter:drop-shadow(0 2px 4px rgba(3,16,55,.4));}
.co-core span{font-size:12px;color:var(--ink-400);font-weight:600;}

.co-flowstrip{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--line);}
.co-flowstrip .fs{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink-700);}
.co-flowstrip .fs::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(0,82,255,.1);}
.co-flowstrip .fs.hot{color:var(--blue-ink);}
.co-flowstrip .arr{color:var(--blue);font-weight:700;font-size:13px;}

/* ---- Generic icon chip (shared by several sections) ---- */
.co-ico{width:50px;height:50px;border-radius:14px;background:var(--grad-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.co-ico svg{width:24px;height:24px;}

/* ---- Company Overview : flow ---- */
.co-ov-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center;margin-top:8px;}
.co-ov-body{font-size:16px;color:var(--ink-500);line-height:1.7;margin:18px 0 0;max-width:520px;}
.co-ov-body + .co-ov-body{margin-top:16px;}
.co-flow{display:flex;flex-direction:column;gap:0;}
.co-flow-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:22px 24px;display:flex;align-items:center;gap:18px;transition:transform .2s,box-shadow .2s;}
.co-flow-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.co-flow-card .step{flex:0 0 auto;font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--blue);
  width:46px;}
.co-flow-card .ft b{display:block;font-size:18px;font-weight:850;color:var(--ink);letter-spacing:-.01em;}
.co-flow-card .ft span{font-size:13.5px;color:var(--ink-500);}
.co-flow-card .en{margin-left:auto;font-size:12px;font-weight:800;color:var(--ink-400);letter-spacing:.04em;}
.co-flow-link{height:26px;width:2px;margin-left:46px;background:linear-gradient(180deg,var(--blue),var(--blue-bright));opacity:.45;}
.co-flow-card.accent{background:var(--grad-navy);border:0;box-shadow:var(--shadow-navy);}
.co-flow-card.accent .step{color:var(--blue-bright);}
.co-flow-card.accent .ft b{color:#fff;}
.co-flow-card.accent .ft span{color:#BFD0EE;}
.co-flow-card.accent .en{color:#7FB0FF;}

/* ---- Mission & Vision ---- */
.co-mv-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:54px;}
.co-mv-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);padding:38px 36px 34px;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.co-mv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.co-mv-card::before{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,255,.08),transparent 65%);pointer-events:none;}
.co-mv-card .lab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:.12em;color:var(--blue-ink);text-transform:uppercase;margin:20px 0 14px;}
.co-mv-card h3{position:relative;z-index:1;font-size:22px;font-weight:850;color:var(--ink);margin:0;line-height:1.45;letter-spacing:-.01em;}
.co-mv-line{position:relative;z-index:1;margin-top:22px;display:flex;align-items:center;gap:7px;}
.co-mv-line i{height:6px;border-radius:3px;background:var(--grad);display:block;}

/* ---- What We Do : 3 flow cards ---- */
.co-wwd-body{font-size:16px;color:var(--ink-500);line-height:1.7;max-width:760px;margin:18px 0 0;}
.co-wwd-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px;}
.co-wwd-rail{position:absolute;left:16%;right:16%;top:50px;height:3px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,#0052FF,#00B6FF 60%,#00D4FF);opacity:.45;}
.co-wwd-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;}
.co-step{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:30px 26px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:transform .2s,box-shadow .2s;}
.co-step:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.co-step .node{width:56px;height:56px;border-radius:17px;background:var(--grad);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 14px 26px -10px rgba(0,82,255,.6);margin-bottom:18px;}
.co-step .node svg{width:26px;height:26px;}
.co-step .num{font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--blue);margin-bottom:7px;}
.co-step h3{font-size:20px;font-weight:850;color:var(--ink);margin:0 0 9px;letter-spacing:-.01em;}
.co-step p{font-size:14px;color:var(--ink-500);margin:0;line-height:1.6;}

/* ---- Playio Service : 4 cards ---- */
.co-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:54px;}
.co-svc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:30px 30px 28px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;}
.co-svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.co-svc-top{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.co-svc-tag{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--blue-ink);}
.co-svc-card h3{font-size:19px;font-weight:850;color:var(--ink);margin:0 0 9px;letter-spacing:-.01em;line-height:1.35;}
.co-svc-card p{font-size:14.5px;color:var(--ink-500);margin:0;line-height:1.62;}
/* mini SaaS UI strip inside each service card */
.co-svc-vis{margin-top:20px;height:50px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(160deg,#F7FAFF,#fff);display:flex;align-items:center;gap:8px;padding:0 14px;overflow:hidden;}
.co-svc-vis .bar{height:8px;border-radius:5px;background:var(--bg-soft);flex:1;position:relative;overflow:hidden;}
.co-svc-vis .bar i{position:absolute;inset:0;border-radius:5px;background:var(--grad);}
.co-svc-vis .chip{font-size:11px;font-weight:700;color:var(--ink-700);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;box-shadow:var(--shadow-sm);white-space:nowrap;}
.co-svc-vis .chip.hot{background:var(--grad);color:#fff;border:0;}
.co-svc-vis .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);opacity:.5;}
.co-svc-vis .dot.dim{opacity:.24;}
.co-svc-vis .globe{display:flex;gap:6px;align-items:center;}
.co-svc-vis .gflag{font-size:11px;font-weight:800;color:var(--blue-ink);background:var(--grad-soft);
  border:1px solid #D8E6FF;border-radius:8px;padding:5px 9px;}

/* =========================================================
   HISTORY — full blue, zig-zag timeline
   ========================================================= */
.co-history{position:relative;background:var(--grad-navy);color:#fff;overflow:hidden;padding:104px 0;}
.co-history::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent);mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent);}
.co-history .orb-h{position:absolute;border-radius:50%;pointer-events:none;}
.co-history .orb-h.a{width:340px;height:340px;left:-90px;top:-60px;background:radial-gradient(circle,rgba(0,212,255,.32),transparent 65%);}
.co-history .orb-h.b{width:380px;height:380px;right:-110px;bottom:-120px;background:radial-gradient(circle,rgba(0,82,255,.4),transparent 65%);}
.co-history .wrap{position:relative;z-index:2;}
.co-history .eyebrow{color:#9FC0FF;}
.co-history .eyebrow::before{background:linear-gradient(90deg,#00E0FF,#3D7BFF);}
.co-history .sec-title{color:#fff;}
.co-history .sec-sub{color:#BFD0EE;}

.tl{position:relative;margin-top:64px;}
.tl-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.tl-rail{position:absolute;left:5%;right:5%;top:50%;height:3px;border-radius:3px;transform:translateY(-50%);z-index:0;
  background:linear-gradient(90deg,#1FE3FF,#3D7BFF 55%,#0052FF);box-shadow:0 0 22px rgba(0,180,255,.45);}
.tl-col{position:relative;z-index:1;display:grid;grid-template-rows:1fr 60px 1fr;align-items:center;min-height:430px;}
.tl-node{grid-row:2;justify-self:center;width:18px;height:18px;border-radius:50%;background:#fff;
  border:4px solid #2E90FF;box-shadow:0 0 0 5px rgba(0,82,255,.25),0 8px 18px -6px rgba(0,40,120,.6);position:relative;}
.tl-node .yr{position:absolute;left:50%;transform:translateX(-50%);font-size:26px;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(120deg,#fff,#BFE6FF);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
.tl-col.up .tl-node .yr{bottom:-40px;}
.tl-col.down .tl-node .yr{top:-40px;}
.tl-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:16px 16px 14px;backdrop-filter:blur(3px);box-shadow:0 18px 40px -22px rgba(0,10,40,.7);}
.tl-col.up .tl-card{grid-row:1;align-self:end;margin-bottom:18px;}
.tl-col.down .tl-card{grid-row:3;align-self:start;margin-top:18px;}
.tl-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.tl-card li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:#DCE7FB;font-weight:500;}
.tl-card li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-top:5px;
  background:linear-gradient(120deg,#1FE3FF,#3D7BFF);box-shadow:0 0 0 3px rgba(0,180,255,.18);}
.tl-card li.key{color:#fff;font-weight:700;}
.tl-card li.key::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22);}
.tl-stem{position:absolute;left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,rgba(0,212,255,.7),rgba(0,82,255,.2));z-index:0;}
.tl-col.up .tl-stem{bottom:50%;height:54px;margin-bottom:9px;}
.tl-col.down .tl-stem{top:50%;height:54px;margin-top:9px;}

/* mobile vertical timeline */
.tl-track.m{display:none;}

/* =========================================================
   COMPANY INFO
   ========================================================= */
.co-info-wrap{display:grid;grid-template-columns:0.7fr 1.3fr;gap:48px;align-items:start;margin-top:8px;}
.co-info-intro .co-ico{margin-bottom:22px;}
.co-info-intro p{font-size:15.5px;color:var(--ink-500);line-height:1.7;margin:0;max-width:300px;}
.co-info-table{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;}
.co-info-row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px 28px;border-bottom:1px solid var(--line);}
.co-info-row:last-child{border-bottom:0;}
.co-info-row dt{font-size:13px;font-weight:800;color:var(--ink-400);letter-spacing:.02em;}
.co-info-row dd{margin:0;font-size:15.5px;font-weight:700;color:var(--ink);}
.co-info-row.jp{background:var(--grad-soft);}
.co-info-row.jp dd{color:var(--blue-ink);}
.co-info-row .jp-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  background:var(--grad);color:#fff;border-radius:999px;padding:5px 12px;margin-left:10px;letter-spacing:.03em;}

/* =========================================================
   RESPONSIVE — Company
   ========================================================= */
@media (max-width:1024px){
  .co-hero-2col{grid-template-columns:1fr;gap:48px;}
  .co-hero-text{align-items:center;text-align:center;}
  .co-hero-text h1,.co-hero-sub,.co-hero-body{text-align:center;max-width:640px;}
  .co-hero .hero-cta{justify-content:center;}
  .co-net{max-width:560px;margin:0 auto;width:100%;}
  .co-ov-grid{grid-template-columns:1fr;gap:42px;}
  .co-ov-body{max-width:none;}
  .co-svc-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:920px){
  .co-wwd-flow{grid-template-columns:1fr;gap:14px;}
  .co-wwd-rail{display:none;}
  .co-step{flex-direction:row;text-align:left;align-items:flex-start;gap:18px;}
  .co-step .node{margin-bottom:0;}
  /* History → vertical */
  .tl-track.d{display:none;}
  .tl-track.m{display:block;position:relative;margin-top:46px;padding-left:30px;}
  .tl-track.m::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,#1FE3FF,#3D7BFF 55%,#0052FF);box-shadow:0 0 18px rgba(0,180,255,.4);}
  .tl-m-item{position:relative;padding:0 0 30px 0;}
  .tl-m-item:last-child{padding-bottom:0;}
  .tl-m-item::before{content:"";position:absolute;left:-30px;top:5px;width:15px;height:15px;border-radius:50%;
    background:#fff;border:4px solid #2E90FF;box-shadow:0 0 0 4px rgba(0,82,255,.22);margin-left:0.5px;}
  .tl-m-yr{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px;
    background:linear-gradient(120deg,#fff,#BFE6FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .tl-m-item .tl-card{display:block;}
  .co-info-wrap{grid-template-columns:1fr;gap:32px;}
  .co-info-intro p{max-width:none;}
}
@media (max-width:600px){
  .co-svc-grid{grid-template-columns:1fr;}
  .co-mv-cards{grid-template-columns:1fr;}
  .co-info-row{grid-template-columns:1fr;gap:6px;padding:16px 20px;}
  .co-info-row dt{font-size:12px;}
  /* network graphic → vertical stack, no overflow */
  .co-net-links{display:none;}
  .co-net-stage{grid-template-columns:1fr;gap:18px;min-height:0;}
  .co-side{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;}
  .co-side.right{align-items:center;}
  .co-core{order:-1;}
  .co-pill{padding:9px 13px;font-size:12.5px;}
}

/* =========================================================
   COMPANY PHILOSOPHY
   ========================================================= */
.co-phil-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;margin-top:4px;}
.co-phil-body{font-size:16px;color:var(--ink-500);line-height:1.78;margin:20px 0 0;max-width:540px;}
.co-phil-body + .co-phil-body{margin-top:16px;}
.co-phil-body strong{color:var(--ink-700);font-weight:800;}
.co-phil-sub{font-size:clamp(16px,1.5vw,18px);color:var(--ink-700);font-weight:600;line-height:1.65;margin:18px 0 0;max-width:540px;}
/* value tiles (Economic / Social / Cultural) */
.co-vtiles{display:flex;flex-direction:column;gap:16px;position:relative;}
.co-vtile{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:22px 24px;display:flex;align-items:center;gap:18px;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.co-vtile:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.co-vtile::before{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,255,.07),transparent 65%);pointer-events:none;}
.co-vtile .vt-ico{flex:0 0 auto;width:50px;height:50px;border-radius:14px;background:var(--grad-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;}
.co-vtile .vt-ico svg{width:24px;height:24px;}
.co-vtile .vt-en{font-size:16px;font-weight:850;color:var(--ink);letter-spacing:-.01em;}
.co-vtile .vt-kr{font-size:13px;color:var(--ink-500);font-weight:600;margin-top:2px;}
.co-vtile .vt-bars{margin-left:auto;display:flex;align-items:flex-end;gap:5px;height:34px;flex:0 0 auto;}
.co-vtile .vt-bars i{width:7px;border-radius:3px;background:var(--grad);opacity:.9;}

/* =========================================================
   PLAYIO VALUES — 3 cards w/ connection viz
   ========================================================= */
.co-val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;}
.co-val-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:28px 28px 26px;display:flex;flex-direction:column;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.co-val-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.co-val-num{font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--blue);margin-bottom:14px;}
.co-val-card h3{font-size:19px;font-weight:850;color:var(--ink);margin:0 0 11px;letter-spacing:-.01em;line-height:1.4;}
.co-val-card p{font-size:14px;color:var(--ink-500);margin:0;line-height:1.65;}
/* mini viz strip */
.co-val-viz{height:84px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,#F7FAFF,#fff);
  margin-bottom:20px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
/* v1: signal dots cluster */
.cv-sig i{position:absolute;border-radius:50%;background:var(--blue);}
.cv-sig .c{width:30px;height:30px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side at 36% 30%,#6FB4FF,#1E74FF 60%,#0A39B5);box-shadow:0 8px 18px -6px rgba(0,82,255,.6);}
.cv-sig .d{width:8px;height:8px;opacity:.5;animation:cvpulse 2.4s ease-in-out infinite;}
.cv-sig .d.dim{width:6px;height:6px;opacity:.26;}
@keyframes cvpulse{0%,100%{opacity:.25;transform:scale(.8);}50%{opacity:.8;transform:scale(1);}}
.cv-sig .r{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
  border:1.5px dashed rgba(0,82,255,.3);}
/* v2: play -> reward flow */
.cv-flow{display:flex;align-items:center;gap:10px;}
.cv-flow .chip{font-size:12px;font-weight:800;color:var(--ink-700);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;box-shadow:var(--shadow-sm);}
.cv-flow .chip.hot{background:var(--grad);color:#fff;border:0;box-shadow:0 8px 16px -6px rgba(0,82,255,.6);}
.cv-flow .ar{color:var(--blue);font-weight:700;font-size:14px;}
/* v3: user <-> game connect */
.cv-link{display:flex;align-items:center;gap:0;width:100%;padding:0 22px;}
.cv-link .grp{display:flex;}
.cv-link .av{width:26px;height:26px;border-radius:50%;margin-left:-8px;border:2.5px solid #fff;
  background:radial-gradient(circle at 36% 30%,#BFE0FF,#2E86FF 70%,#0A47C8);box-shadow:var(--shadow-sm);}
.cv-link .av:first-child{margin-left:0;}
.cv-link .gc{width:30px;height:38px;border-radius:9px;background:var(--grad-soft);border:1px solid #D8E6FF;box-shadow:var(--shadow-sm);}
.cv-link .wire{flex:1;height:2px;margin:0 10px;position:relative;background:linear-gradient(90deg,rgba(0,82,255,.25),rgba(0,212,255,.5));}
.cv-link .wire::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--grad);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(0,82,255,.14);}

/* responsive: philosophy + values */
@media (max-width:1024px){
  .co-phil-grid{grid-template-columns:1fr;gap:42px;}
  .co-phil-body,.co-phil-sub{max-width:none;}
}
@media (max-width:920px){
  .co-val-grid{grid-template-columns:1fr;gap:18px;max-width:440px;margin-left:auto;margin-right:auto;}
}

/* =========================================================
   ████  VISUAL REDESIGN PASS  ████
   Restrained, white-based, #4488FF line/UI graphics.
   Overrides earlier section visuals.
   ========================================================= */
:root{
  --pb:#4488FF; --pb-600:#2F6BE0; --pb-700:#2153C4;
  --pb-300:#A9C7FF; --pb-200:#CFE0FF; --pb-150:#DEEAFF; --pb-100:#EAF2FF; --pb-50:#F4F8FF;
  --pb-line:#E2EBFA;
}

/* ---- Hero: soften background (remove purple-heavy radials) ---- */
.hero.co-hero{
  background:
    radial-gradient(54% 56% at 84% 0%, rgba(68,136,255,.16), transparent 62%),
    radial-gradient(46% 50% at 0% 26%, rgba(68,136,255,.08), transparent 60%),
    linear-gradient(180deg,#EEF4FF 0%, #F5F9FF 54%, #FFFFFF 100%);
}

/* ---- Hero art: abstract experience → growth ---- */
.nh-art{position:relative;width:100%;min-height:404px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;}
.nh-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(68,136,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(68,136,255,.05) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(130% 95% at 72% 16%,#000 28%,transparent 82%);mask-image:radial-gradient(130% 95% at 72% 16%,#000 28%,transparent 82%);}
.nh-curve{position:absolute;left:0;right:0;bottom:0;width:100%;height:84%;display:block;}
.nh-tag{position:absolute;left:26px;top:24px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.86);border:1px solid var(--pb-200);border-radius:999px;padding:8px 14px;
  font-size:12px;font-weight:800;color:var(--pb-700);letter-spacing:.02em;z-index:4;box-shadow:var(--shadow-sm);}
.nh-tag .pip{width:8px;height:8px;border-radius:50%;background:var(--pb);box-shadow:0 0 0 4px rgba(68,136,255,.16);}
.nh-card{position:absolute;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:15px;box-shadow:var(--shadow-sm);padding:12px 15px 12px 12px;z-index:3;}
.nh-card .ic{width:32px;height:32px;border-radius:10px;background:var(--pb-100);color:var(--pb);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.nh-card .ic svg{width:17px;height:17px;}
.nh-card .k{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;}
.nh-card.c1{left:20px;bottom:54px;}
.nh-card.c2{left:23%;top:54%;transform:translateY(-50%);}
.nh-card.c3{left:42%;top:21%;}
.nh-node{position:absolute;right:12px;top:38%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:#fff;
  border:3px solid var(--pb);box-shadow:0 0 0 5px rgba(68,136,255,.16);z-index:3;}

/* ---- Philosophy: stacked value layers ---- */
.co-phil .co-vtiles{display:none;} /* legacy hidden if present */
.nh-layers{position:relative;height:360px;}
.nh-layers .blob{position:absolute;right:6%;top:8%;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(68,136,255,.12),transparent 66%);filter:blur(4px);}
.nl{position:absolute;left:50%;width:74%;height:104px;border-radius:20px;border:1px solid var(--pb-line);
  background:linear-gradient(165deg,#FFFFFF,var(--pb-50));box-shadow:0 18px 40px -26px rgba(20,46,110,.4);
  display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 26px;}
.nl .nl-k{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--pb-600);text-transform:uppercase;}
.nl .nl-track{height:6px;border-radius:4px;background:var(--pb-100);position:relative;overflow:hidden;}
.nl .nl-track i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:linear-gradient(90deg,var(--pb),var(--pb-300));}
.nl-1{bottom:30px;margin-left:-44%;z-index:1;opacity:.92;}
.nl-2{bottom:128px;margin-left:-37%;z-index:2;}
.nl-3{bottom:226px;margin-left:-30%;z-index:3;border-color:var(--pb-200);
  background:linear-gradient(165deg,#FFFFFF,var(--pb-100));}
.nl-1 .nl-track i{width:46%;}
.nl-2 .nl-track i{width:68%;}
.nl-3 .nl-track i{width:90%;}

/* ---- Values: minimal per-card graphics ---- */
.co-val-viz{height:96px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(165deg,var(--pb-50),#fff);margin-bottom:20px;position:relative;overflow:hidden;
  display:block;}
.nv-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ---- What We Do: mini UI panels, no rail ---- */
.co-wwd-rail{display:none;}
.co-wwd-flow{grid-template-columns:repeat(3,1fr);}
.co-step{flex-direction:column;align-items:stretch;text-align:left;padding:22px 22px 24px;}
.co-step .num{margin-bottom:6px;}
.co-step h3{font-size:19px;margin:0 0 8px;}
.co-step p{min-height:0;}
.nw-panel{height:104px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(165deg,var(--pb-50),#fff);margin-bottom:20px;position:relative;overflow:hidden;padding:14px 15px;}
/* discover: browse list */
.nw-browse{display:flex;flex-direction:column;gap:8px;height:100%;}
.nw-browse .sb{height:18px;border-radius:7px;background:#fff;border:1px solid var(--line);position:relative;}
.nw-browse .sb::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:11px;height:11px;
  border-radius:50%;border:2px solid var(--pb-300);}
.nw-browse .rows{display:flex;flex-direction:column;gap:7px;}
.nw-browse .rw{height:11px;border-radius:5px;background:var(--pb-100);}
.nw-browse .rw.on{background:linear-gradient(90deg,var(--pb),var(--pb-300));width:72%;}
.nw-browse .rw.r2{width:88%;}.nw-browse .rw.r3{width:60%;}
/* play: session timeline */
.nw-session{display:flex;flex-direction:column;justify-content:center;height:100%;gap:14px;}
.nw-session .tl-line{height:6px;border-radius:4px;background:var(--pb-100);position:relative;}
.nw-session .tl-line i{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:4px;background:linear-gradient(90deg,var(--pb),var(--pb-300));}
.nw-session .tl-line .head{position:absolute;left:62%;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;
  border:3px solid var(--pb);transform:translate(-50%,-50%);box-shadow:0 4px 10px rgba(68,136,255,.4);}
.nw-session .ticks{display:flex;align-items:flex-end;gap:6px;height:26px;}
.nw-session .ticks i{flex:1;border-radius:3px;background:var(--pb-150);}
/* return: reconnect loop */
.nw-loop{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 6px;}
.nw-loop .sess{display:flex;flex-direction:column;gap:6px;width:34%;}
.nw-loop .sess i{height:9px;border-radius:5px;background:var(--pb-100);}
.nw-loop .sess i:first-child{background:linear-gradient(90deg,var(--pb),var(--pb-300));}
.nw-loop .arc{flex:1;height:60px;}

/* =========================================================
   HISTORY — refined detail
   ========================================================= */
.co-history{background:linear-gradient(158deg,#10245E 0%, #1A3F9E 56%, #2C63E0 122%);}
.co-history::before{background-size:54px 54px;opacity:.42;}
.co-history .eyebrow::before{background:linear-gradient(90deg,#BcD6FF,#4488FF);}
.tl-rail{background:linear-gradient(90deg,#9FC0FF,#4488FF 52%,#2153C4);box-shadow:0 0 20px rgba(68,136,255,.45);height:2px;}
.tl-col{min-height:440px;}
.tl-node{width:16px;height:16px;border:3px solid #fff;background:var(--pb);
  box-shadow:0 0 0 5px rgba(68,136,255,.22),0 8px 16px -6px rgba(0,30,90,.6);}
.tl-node .yr{font-size:30px;font-weight:900;letter-spacing:-.025em;
  background:linear-gradient(120deg,#fff,#C7DCFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tl-col.up .tl-node .yr{bottom:-44px;}
.tl-col.down .tl-node .yr{top:-44px;}
.tl-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:16px;
  padding:17px 18px 15px;box-shadow:0 22px 46px -26px rgba(0,12,46,.7);}
.tl-card li{font-size:12.5px;color:#D4E2FB;gap:9px;}
.tl-card li::before{width:6px;height:6px;background:linear-gradient(120deg,#9FC0FF,#4488FF);box-shadow:0 0 0 3px rgba(68,136,255,.16);margin-top:5px;}
.tl-card li.key{color:#fff;}
.tl-card li.key::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2);}
.tl-stem{background:linear-gradient(180deg,rgba(120,170,255,.7),rgba(68,136,255,.15));}
/* mobile rail/dot recolor */
@media (max-width:920px){
  .tl-track.m::before{background:linear-gradient(180deg,#9FC0FF,#4488FF 52%,#2153C4);box-shadow:0 0 16px rgba(68,136,255,.4);}
  .tl-m-item::before{border-color:var(--pb);box-shadow:0 0 0 4px rgba(68,136,255,.2);}
  .tl-m-yr{background:linear-gradient(120deg,#fff,#C7DCFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
}

/* =========================================================
   FINAL CTA — restrained bg (waves + faint network)
   ========================================================= */
.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;}

/* =========================================================
   RESPONSIVE — redesigned visuals
   ========================================================= */
@media (max-width:1024px){
  .nh-art{max-width:560px;margin:0 auto;min-height:360px;}
  .nh-layers{max-width:520px;margin:0 auto;}
}
@media (max-width:920px){
  .co-step{padding:20px 22px 22px;}
}
@media (max-width:600px){
  .nh-card .k{font-size:12.5px;}
  .nh-card.c2{left:34%;}
  .nh-layers{height:330px;}
  .nl{width:80%;}
}

/* =========================================================
   ████  B2B RESTRUCTURE PASS  ████
   Hero (Growth Touchpoint), Company Overview, Our Approach,
   Value for Game Companies, Global Presence, Office.
   ========================================================= */

/* Hero: endpoint becomes a labeled "Growth Touchpoint" pill */
.nh-end{position:absolute;right:14px;top:38%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;
  background:var(--pb);color:#fff;border-radius:12px;padding:10px 13px;font-size:12.5px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 14px 28px -10px rgba(68,136,255,.6);z-index:4;white-space:nowrap;}
.nh-end::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;}
.nh-card.c3{right:auto;left:42%;top:21%;}
.co-hero .badge.brandline{font-size:13.5px;font-weight:800;color:var(--pb-700);background:var(--pb-100);
  border:1px solid var(--pb-200);box-shadow:none;}

/* ---- Company Overview : platform lane ---- */
.ov-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:30px 30px;display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;min-height:300px;overflow:hidden;}
.ov-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(68,136,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(68,136,255,.045) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(120% 100% at 50% 30%,#000 40%,transparent 88%);mask-image:radial-gradient(120% 100% at 50% 30%,#000 40%,transparent 88%);}
.ov-col{position:relative;z-index:2;display:flex;flex-direction:column;gap:11px;}
.ov-col.right{align-items:flex-end;}
.ov-cap{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--pb-700);text-transform:uppercase;margin-bottom:3px;}
.ov-row{height:13px;border-radius:6px;background:var(--pb-100);width:100%;}
.ov-row.w1{width:88%;}.ov-row.w2{width:70%;}.ov-row.w3{width:54%;}
.ov-row.on{background:linear-gradient(90deg,var(--pb),var(--pb-300));}
.ov-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:130px;}
.ov-tiles i{height:42px;border-radius:11px;background:var(--pb-50);border:1px solid var(--pb-line);position:relative;}
.ov-tiles i::before{content:"";position:absolute;left:9px;top:9px;width:18px;height:7px;border-radius:4px;background:var(--pb-200);}
.ov-tiles i.on{background:linear-gradient(160deg,#fff,var(--pb-100));border-color:var(--pb-200);}
.ov-tiles i.on::after{content:"";position:absolute;right:9px;bottom:8px;width:18px;height:18px;border-radius:6px;background:var(--pb);opacity:.9;}
.ov-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:118px;height:118px;border-radius:24px;background:linear-gradient(160deg,#fff,var(--pb-50));
  border:1px solid var(--pb-200);box-shadow:0 22px 44px -22px rgba(68,136,255,.5);}
.ov-mid .ov-mk{width:40px;height:40px;border-radius:12px;background:var(--pb-grad);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.ov-mid .ov-mk svg{width:22px;height:22px;color:#fff;}
.ov-mid b{font-size:14px;font-weight:850;color:var(--ink);letter-spacing:-.01em;}
.ov-mid span{font-size:10.5px;font-weight:700;color:var(--pb-700);letter-spacing:.08em;text-transform:uppercase;}
.ov-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.ov-links path{fill:none;stroke:var(--pb-300);stroke-width:1.6;opacity:.7;stroke-dasharray:4 7;}

/* ---- Our Approach : behavior signals → campaign ---- */
.ap-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:28px 30px;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;min-height:300px;overflow:hidden;}
.ap-sub{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--pb-700);text-transform:uppercase;margin-bottom:14px;}
.ap-sig{position:relative;z-index:2;}
.ap-spark{height:60px;display:flex;align-items:flex-end;gap:6px;margin-bottom:14px;}
.ap-spark i{flex:1;border-radius:4px 4px 2px 2px;background:var(--pb-150);}
.ap-spark i.on{background:linear-gradient(180deg,var(--pb),var(--pb-300));}
.ap-chips{display:flex;flex-wrap:wrap;gap:7px;}
.ap-chips span{font-size:11px;font-weight:700;color:var(--ink-700);background:var(--pb-50);border:1px solid var(--pb-line);border-radius:999px;padding:6px 12px;}
.ap-gate{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.ap-funnel{width:54px;height:74px;border-radius:8px;background:linear-gradient(160deg,rgba(68,136,255,.16),rgba(68,136,255,.32));
  clip-path:polygon(0 6%,100% 28%,100% 72%,0 94%);display:flex;align-items:center;justify-content:center;}
.ap-funnel b{color:#fff;font-size:11px;font-weight:800;}
.ap-plan{position:relative;z-index:2;background:linear-gradient(160deg,var(--pb-50),#fff);border:1px solid var(--pb-line);
  border-radius:16px;padding:16px 16px;box-shadow:var(--shadow-sm);}
.ap-plan .pl-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
.ap-plan .pl-row + .pl-row{border-top:1px solid var(--pb-line);}
.ap-plan .pl-dot{width:9px;height:9px;border-radius:50%;background:var(--pb);flex:0 0 auto;}
.ap-plan .pl-row.dim .pl-dot{background:var(--pb-200);}
.ap-plan .pl-bar{height:8px;border-radius:5px;background:var(--pb-100);flex:1;}
.ap-plan .pl-row.on .pl-bar{background:linear-gradient(90deg,var(--pb),var(--pb-300));}
.ap-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.ap-links path{fill:none;stroke:var(--pb-300);stroke-width:1.6;opacity:.6;stroke-dasharray:4 7;}

/* ---- Value for Game Companies : 4 cards (2x2) ---- */
.co-val-grid.g4{grid-template-columns:repeat(2,1fr);}
.co-val-grid.g4 .co-val-card .co-val-en{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--pb-700);margin-bottom:9px;}

/* ---- Global Presence : constellation ---- */
.gp-card{position:relative;background:linear-gradient(168deg,#F6FAFF,#FFFFFF 70%);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);margin-top:48px;overflow:hidden;}
.gp-card .gp-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(68,136,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(68,136,255,.05) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(110% 110% at 30% 30%,#000 40%,transparent 86%);mask-image:radial-gradient(110% 110% at 30% 30%,#000 40%,transparent 86%);}
.gp-stage{position:relative;width:100%;height:380px;}
.gp-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.gp-links path{fill:none;stroke:var(--pb-300);stroke-width:1.5;opacity:.65;}
.gp-node{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;}
.gp-node .gn-dot{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--pb);box-shadow:0 0 0 5px rgba(68,136,255,.12);}
.gp-node .gn-label{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;}
.gp-node.hub .gn-dot{width:18px;height:18px;background:var(--pb);box-shadow:0 0 0 6px rgba(68,136,255,.18),0 10px 22px -8px rgba(68,136,255,.6);}
.gp-node.hub .gn-label{color:var(--pb-700);font-size:13px;}
.gp-node .gn-sub{font-size:10px;font-weight:700;color:var(--ink-400);letter-spacing:.06em;}

/* ---- Office : 2 cards w/ minimal blue map ---- */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
.office-card{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;}
.office-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.office-map{position:relative;height:184px;overflow:hidden;background:linear-gradient(160deg,#EAF2FF,#DCEAFF);}
.office-map svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.office-map .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);width:30px;height:30px;z-index:2;}
.office-map .pin svg{filter:drop-shadow(0 6px 10px rgba(33,86,201,.4));}
.office-map .maplink{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);border:1px solid var(--pb-200);border-radius:999px;padding:7px 13px;
  font-size:12px;font-weight:800;color:var(--pb-700);box-shadow:var(--shadow-sm);}
.office-body{padding:24px 26px 26px;}
.office-body .of-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;
  color:var(--pb-700);text-transform:uppercase;margin-bottom:10px;}
.office-body .of-tag::before{content:"";width:18px;height:2.5px;border-radius:3px;background:var(--pb-grad);}
.office-body h3{font-size:21px;font-weight:850;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em;}
.office-body .of-addr{font-size:14.5px;color:var(--ink-500);line-height:1.6;margin:0;}
.office-body .of-addr .zip{display:inline-block;font-weight:700;color:var(--ink-700);margin-bottom:2px;}

@media (max-width:920px){
  .ov-card,.ap-card{grid-template-columns:1fr;gap:26px;min-height:0;}
  .ov-links,.ap-links{display:none;}
  .ov-col.right{align-items:flex-start;}
  .ov-tiles{width:100%;max-width:200px;}
  .ov-mid{margin:0 auto;}
  .ap-gate{flex-direction:row;gap:14px;}
  .ap-funnel{width:74px;height:54px;clip-path:polygon(6% 0,94% 0,72% 100%,28% 100%);}
  .co-val-grid.g4{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}
  .office-grid{grid-template-columns:1fr;}
  .gp-stage{height:420px;}
}

/* brand gradient + hero brand statement */
:root{ --pb-grad:linear-gradient(135deg,#4488FF,#6FA8FF); }
.co-brandline{display:flex;align-items:center;gap:11px;font-size:clamp(15px,1.5vw,17px);font-weight:800;
  color:var(--pb-700);margin:0 0 16px;letter-spacing:-.01em;line-height:1.4;}
.co-brandline::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--pb-grad);flex:0 0 auto;}
@media (max-width:1024px){ .co-brandline{justify-content:center;text-align:center;} }

/* ---- Global Presence : faint world map + pinned nodes ---- */
.gp-card{position:relative;background:linear-gradient(168deg,#F4F8FF,#FFFFFF 72%);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);margin-top:48px;overflow:hidden;padding:0;}
.gp-world{display:block;width:100%;aspect-ratio:920/360;height:auto;}
.gp-land{fill:#4488FF;fill-opacity:.11;stroke:#4488FF;stroke-opacity:.22;stroke-width:.4;}
.gp-arc path{fill:none;stroke:#4488FF;stroke-width:1.4;stroke-opacity:.5;stroke-linecap:round;
  stroke-dasharray:3 6;}
.gnd{fill:#fff;stroke:#4488FF;stroke-width:2.2;r:4.6;}
.gnd.hub{fill:#4488FF;stroke:#fff;stroke-width:2.6;r:7;}
.glab{font-family:var(--font);font-size:13px;font-weight:800;fill:var(--ink);
  paint-order:stroke;stroke:#fff;stroke-width:3.4px;stroke-linejoin:round;letter-spacing:-.01em;}
.glab.hub{fill:var(--pb-700);}
.gp-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;
  padding:6px 22px 22px;border-top:1px solid var(--pb-line);margin-top:-6px;}
.gp-legend .gl{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-700);}
.gp-legend .gl i{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--pb);box-shadow:0 0 0 3px rgba(68,136,255,.12);}
.gp-legend .gl.hub{color:var(--pb-700);font-weight:800;}
.gp-legend .gl.hub i{background:var(--pb);box-shadow:0 0 0 3px rgba(68,136,255,.2);}
.gp-legend .gl em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--pb);
  border-radius:5px;padding:2px 6px;margin-left:2px;}
@media (max-width:760px){
  .gp-legend{gap:8px 14px;padding:4px 16px 18px;}
  .gp-legend .gl{font-size:12px;}
}

/* =========================================================
   ████  BRAND-STORY PASS  ████  Why It Matters · How Playio Works
   ========================================================= */

/* ---- Why It Matters : light conceptual stepper ---- */
.wim-flow{display:flex;align-items:stretch;gap:0;margin-top:54px;position:relative;}
.wim-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 14px;}
.wim-step .wn{width:54px;height:54px;border-radius:16px;background:linear-gradient(160deg,#fff,var(--pb-50));
  border:1px solid var(--pb-line);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
  color:var(--pb);position:relative;z-index:2;}
.wim-step.last .wn{background:var(--pb-grad);border:0;color:#fff;box-shadow:0 14px 28px -10px rgba(68,136,255,.55);}
.wim-step .wn svg{width:24px;height:24px;}
.wim-step .wmeta{display:flex;flex-direction:column;align-items:center;}
.wim-step .wk{font-size:14.5px;font-weight:800;color:var(--ink);margin-top:16px;letter-spacing:-.01em;line-height:1.4;}
.wim-step.last .wk{color:var(--pb-700);}
.wim-step .wkr{font-size:12.5px;color:var(--ink-400);font-weight:600;margin-top:5px;}
.wim-step::after{content:"";position:absolute;top:27px;left:50%;width:100%;height:2px;
  background:linear-gradient(90deg,var(--pb-200),var(--pb-150));z-index:1;}
.wim-step:last-child::after{display:none;}

/* ---- How Playio Works : 4-card loop ---- */
.hpw-wrap{position:relative;margin-top:54px;}
.hpw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:2;}
.hpw-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:24px 22px 22px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.hpw-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.hpw-viz{height:74px;border-radius:13px;border:1px solid var(--line);background:linear-gradient(165deg,var(--pb-50),#fff);
  margin-bottom:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hpw-viz svg{display:block;}
.hpw-step{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--pb);margin-bottom:8px;}
.hpw-card h3{font-size:17px;font-weight:850;color:var(--ink);margin:0 0 9px;letter-spacing:-.01em;}
.hpw-card p{font-size:13px;color:var(--ink-500);line-height:1.62;margin:0;}
/* loop line under cards */
.hpw-loop{position:absolute;left:0;right:0;bottom:-26px;height:60px;z-index:1;pointer-events:none;}
.hpw-loop path{fill:none;stroke:var(--pb-200);stroke-width:1.8;stroke-dasharray:4 7;}
.hpw-loop .tagloop{font-family:var(--font);font-size:11px;font-weight:800;fill:var(--pb-700);letter-spacing:.04em;}

@media (max-width:920px){
  .wim-flow{flex-direction:column;gap:14px;max-width:360px;margin-left:auto;margin-right:auto;}
  .wim-step{flex-direction:row;justify-content:flex-start;text-align:left;gap:16px;padding:0;}
  .wim-step .wn{flex:0 0 auto;}
  .wim-step .wmeta{display:flex;flex-direction:column;}
  .wim-step .wk{margin-top:0;}
  .wim-step::after{top:54px;left:27px;width:2px;height:14px;background:linear-gradient(180deg,var(--pb-200),var(--pb-150));}
  .hpw-grid{grid-template-columns:1fr;gap:16px;max-width:440px;margin:0 auto;}
  .hpw-loop{display:none;}
}

/* =========================================================
   ████  REFINE PASS  ████  Hero emblem · Global spread
   ========================================================= */

/* ---- Hero : abstract orbit / ecosystem emblem (no chart) ---- */
.hero-emblem{position:relative;width:100%;aspect-ratio:1/1;max-width:480px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;}
.he-glow{position:absolute;width:82%;height:82%;border-radius:50%;
  background:radial-gradient(circle,rgba(68,136,255,.18),rgba(68,136,255,.05) 46%,transparent 67%);filter:blur(2px);}
.he-orbit{position:absolute;inset:0;width:100%;height:100%;}
.he-ring{fill:none;stroke:url(#heRing);stroke-width:1.5;}
.he-ring2{fill:none;stroke:var(--pb-200);stroke-width:1.2;stroke-dasharray:2 9;
  transform-origin:center;animation:heSpin 40s linear infinite;}
@keyframes heSpin{to{transform:rotate(360deg);}}
.he-core{position:relative;z-index:3;width:31%;height:31%;border-radius:28px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 32px 66px -26px rgba(20,46,110,.46),inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;}
.he-core svg{width:52%;height:52%;}
.he-node{position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--pb);
  box-shadow:0 0 0 6px rgba(68,136,255,.12),0 10px 20px -6px rgba(68,136,255,.55);z-index:3;transform:translate(-50%,-50%);}
.he-node.sm{width:10px;height:10px;border-width:2.5px;box-shadow:0 0 0 5px rgba(68,136,255,.1);}
.he-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.96);box-shadow:0 22px 46px -22px rgba(20,46,110,.42);border-radius:15px;padding:11px 13px;}
.he-chip .ci{width:34px;height:34px;border-radius:10px;background:var(--pb-100);display:flex;align-items:center;justify-content:center;color:var(--pb);flex:0 0 auto;}
.he-chip .ci svg{width:18px;height:18px;}
.he-chip .ck{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;}
.he-chip.community{top:4%;right:1%;animation:heFloat 6s ease-in-out infinite;}
.he-chip.growth{bottom:6%;left:0%;animation:heFloat 6s ease-in-out infinite 1s;}
@keyframes heFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.he-avatars{display:flex;}
.he-avatars i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-8px;
  background:radial-gradient(circle at 36% 30%,#BFE0FF,#2E86FF 70%,#0A47C8);}
.he-avatars i:first-child{margin-left:0;}
@media (max-width:1024px){ .hero-emblem{max-width:400px;} .he-chip.community{right:2%;} .he-chip.growth{left:2%;} }

/* ---- Global Presence : origin spread + region labels ---- */
.gp-arc path{stroke-dasharray:4 8;animation:gpFlow 1.5s linear infinite;}
@keyframes gpFlow{to{stroke-dashoffset:-24;}}
.gp-pulse{fill:none;stroke:#4488FF;stroke-width:1.4;animation:gpPulse 2.8s ease-out infinite;}
.gp-pulse.d2{animation-delay:1.4s;}
@keyframes gpPulse{0%{r:7px;opacity:.55;}100%{r:34px;opacity:0;}}
.gp-lead{stroke:#9FC0FF;stroke-width:1;opacity:.7;}
.glab{font-family:var(--font);font-size:13px;font-weight:800;fill:var(--ink);
  paint-order:stroke;stroke:#fff;stroke-width:3.6px;stroke-linejoin:round;letter-spacing:-.01em;}
.glab.sm{font-size:12px;}
.glab.hub{fill:var(--pb-700);}
.gp-hqtag{font-family:var(--font);font-size:9.5px;font-weight:900;fill:#fff;letter-spacing:.08em;}
.gp-cap{text-align:center;padding:16px 24px 22px;border-top:1px solid var(--pb-line);
  font-size:13.5px;color:var(--ink-500);line-height:1.6;}
.gp-cap b{color:var(--pb-700);font-weight:800;}
@media (max-width:760px){ .gp-cap{font-size:12.5px;padding:14px 18px 18px;} .glab{font-size:11px;} .glab.sm{font-size:10px;} }

/* ---- Hero : futuristic flowing-wave panel (dark navy + blue/cyan glow) ---- */
.hero-wave{position:relative;width:100%;aspect-ratio:1.12/1;max-width:600px;margin:0 auto;
  border-radius:28px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(130% 120% at 72% 28%, #173d86 0%, #0e2a60 40%, #091a3f 72%, #07142f 100%);
  box-shadow:0 44px 96px -44px rgba(8,24,66,.75), 0 2px 0 rgba(255,255,255,.05) inset,
             0 0 0 1px rgba(120,170,255,.12) inset;}
.hero-wave .hw-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  animation:hwDrift 16s ease-in-out infinite;}
@keyframes hwDrift{0%,100%{transform:translate3d(0,0,0) scale(1.02);}50%{transform:translate3d(-1.4%,-1.2%,0) scale(1.05);}}
.hero-wave::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 120%, rgba(7,20,47,.55), transparent 60%),
             linear-gradient(180deg, rgba(7,20,47,.18), transparent 22%);}
.hero-wave .hw-sheen{position:absolute;left:0;right:0;top:0;height:42%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(120,170,255,.10), transparent 86%);}
@media (max-width:1024px){ .hero-wave{max-width:460px;aspect-ratio:1.2/1;} }
@media (max-width:760px){ .hero-wave{aspect-ratio:1.25/1;max-width:none;} }

/* =========================================================
   HERO — full-bleed dark futuristic wave (whole section)
   ========================================================= */
.co-hero-dark{
  background:radial-gradient(120% 130% at 72% 8%, #163a82 0%, #0e2a60 38%, #0a1c46 66%, #07142e 100%) !important;
  overflow:hidden;}
.co-hero-dark .cohw-bg{position:absolute;inset:0;z-index:0;}
.co-hero-dark .cohw-svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  animation:cohwDrift 18s ease-in-out infinite;transform-origin:center;}
@keyframes cohwDrift{0%,100%{transform:translate3d(0,0,0) scale(1.03);}50%{transform:translate3d(-1.2%,-1%,0) scale(1.06);}}
.co-hero-dark .cohw-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,18,46,.92) 0%, rgba(7,18,46,.66) 34%, rgba(7,18,46,.12) 60%, transparent 78%),
    linear-gradient(180deg, rgba(7,18,46,.5) 0%, transparent 26%, transparent 72%, rgba(7,18,46,.62) 100%);}
.co-hero-dark .wrap{position:relative;z-index:2;}
.co-hero-dark .co-hero-text{max-width:660px;}
/* light text on dark */
.co-hero-dark .badge{background:rgba(255,255,255,.08);border:1px solid rgba(159,196,255,.34);
  color:#DCEAFF;box-shadow:none;backdrop-filter:blur(6px);}
.co-hero-dark .badge .pip{background:#5FD0FF;box-shadow:0 0 0 4px rgba(95,208,255,.18);}
.co-hero-dark h1{color:#fff;}
.co-hero-dark h1 .grad{background:linear-gradient(100deg,#7FB6FF,#34D0FF 60%,#9FF0FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.co-hero-dark .co-hero-sub{color:#B8CCEC;}
/* secondary CTA: light outline on dark */
.btn-ghost-light{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:700;height:48px;padding:0 22px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.07);color:#EaF2FF;border:1px solid rgba(159,196,255,.4);
  backdrop-filter:blur(8px);transition:.16s;text-decoration:none;}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);border-color:rgba(159,196,255,.6);}
@media (max-width:760px){
  .co-hero-dark .cohw-veil{background:
    linear-gradient(180deg, rgba(7,18,46,.62) 0%, rgba(7,18,46,.3) 30%, rgba(7,18,46,.5) 72%, rgba(7,18,46,.8) 100%);}
  .co-hero-dark .co-hero-text{max-width:none;text-align:center;}
  .co-hero-dark .hero-cta{justify-content:center;}
  .co-hero-dark .badge{margin-left:auto;margin-right:auto;}
}

@media (max-width:760px){.gnb-menu,.gnb-cta{display:none;}.hamburger{display:flex;}.wrap{padding:0 20px;}.gnb-inner{padding:0 20px;}.section{padding:74px 0;}.row2{grid-template-columns:1fr;}.finalcta{padding:40px 0 80px;}.cta-box{padding:56px 24px;}}
@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;}


/* ----- Company Overview table ----- */
.co-ov .ovw-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px -30px rgba(13,33,73,.28);overflow:hidden;display:block;}
.co-ov .ovw-row{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--line);}
.co-ov .ovw-row:first-child{border-top:0;}
.co-ov .ovw-k{padding:20px 26px;background:var(--bg-soft);font-weight:800;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:10px;}
.co-ov .ovw-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pb);flex:0 0 auto;}
.co-ov .ovw-v{padding:20px 28px;font-size:16px;font-weight:700;color:var(--ink-700);line-height:1.6;word-break:keep-all;}
.co-ov .ovw-v .ovw-sub{display:block;margin-top:5px;font-size:13px;font-weight:600;color:var(--ink-500);}
.co-ov .ovw-v .ovw-zip{display:block;font-size:13px;color:var(--ink-500);font-weight:700;margin-bottom:3px;letter-spacing:.01em;}
@media(max-width:560px){
  .co-ov .ovw-row{grid-template-columns:1fr;}
  .co-ov .ovw-k{padding:14px 18px 6px;background:#fff;font-size:13px;}
  .co-ov .ovw-v{padding:0 18px 16px;font-size:15px;}
}
/* ----- Office meta rows ----- */
.office-body .of-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;}
.office-body .of-meta .of-r{display:flex;gap:12px;align-items:baseline;}
.office-body .of-meta .of-r .k{flex:0 0 56px;font-size:12.5px;font-weight:800;color:var(--pb-700);}
.office-body .of-meta .of-r .v{font-size:14.5px;font-weight:700;color:var(--ink-700);word-break:keep-all;}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/img/jp/company/key-visual.png) center/cover no-repeat;opacity:.34;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(66% 76% at 50% 46%, rgba(255,255,255,.62), rgba(240,246,255,0) 72%),linear-gradient(180deg, rgba(240,246,255,.30) 0%, rgba(255,255,255,.42) 100%);}
.meiryo{font-family:'Meiryo',sans-serif;}

/* company 최종 CTA 헤드라인 보정: 긴 일본어 문장(「ゲーム成長の新たな可能性を広げませんか。」
   20자)이 .cta-box .inner(max 700px) 안에서 마지막 한 글자만 흘러내리던 문제 해결.
   폰트를 컨테이너 폭에 맞춰 축소(20자 x ~0.97em <= 700px → 최대 35px)해 한 줄로 표시하고,
   매우 좁은 화면에서는 문절 단위로 균형 있게 줄바꿈한다(word-break:auto-phrase 미지원
   브라우저는 text-wrap:balance 로 한 글자 고아 방지). 다른 페이지 CTA 는 문장이 짧아 미적용. */
.cta-box h2.cta-jp-line { font-size: clamp(28px, 3.7vw, 35px); text-wrap: balance; }
.cta-box h2.cta-jp-line .grad { word-break: auto-phrase; }