:root{
      font-size: clamp(16px, calc(0.7vw + 13px), 20px);
      --bg: #0b0f1a;
      --panel: rgba(255,255,255,0.05);
      --panel-strong: rgba(255,255,255,0.12);
      --text: #e6eefc;
      --muted: #9fb2d6;
      --brand: #6ee7ff;
      --accent: #a78bfa;
      --danger: #ff6b6b;
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
      --radius-xl: 24px;
      --radius-lg: 18px;
      --radius: 12px;
      --blur: blur(10px);
      /*
          Override these variables to swap the header/footer logos via CSS.
          Example:
            --logo-header-image: url("./images/company-logo.png");
            --logo-header-background-size: contain;
            --logo-header-filter: none;
            --logo-header-shadow: none;
        */
      --logo-default-image: conic-gradient(from 210deg, var(--brand), var(--accent), #66ffa8, var(--brand));
      --logo-default-filter: saturate(1.2);
      --logo-default-shadow: inset 0 0 18px rgba(255,255,255,0.35), var(--shadow);
      --logo-header-image: url("./images/logo.png");
      --logo-footer-image: url("./images/logo.png");
      --logo-header-background-size: contain;
      --logo-footer-background-size: contain;
      --logo-header-filter: none;
      --logo-footer-filter: none;
      --logo-header-shadow: none;
      --logo-footer-shadow: none;
      /*
          Override these variables to update the hero illustration displayed on the top right.
          Example:
            --hero-art-image: url("./images/controller.png");
            --hero-art-background-size: contain;
            --hero-art-background-position: center;
        */
      --hero-art-image: url("./images/controller.png");
      --hero-art-background-size: contain;
      --hero-art-background-position: center;
      --hero-art-background-repeat: no-repeat;
      --hero-art-filter: drop-shadow(0 25px 45px rgba(0,0,0,0.35));
      --hero-art-opacity: 1;
            /*
          Override these variables to update the game thumbnails displayed in the Games section.
          Example:
            --game-1-thumb-image: url("./images/game-1.png");
            --game-2-thumb-image: url("./images/game-2.png");
            --game-1-thumb-background-size: cover;
            --game-2-thumb-background-position: center;
        */
      --game-thumb-default-image: repeating-linear-gradient(45deg, rgba(110,231,255,0.08) 0 6px, transparent 6px 12px);
      --game-thumb-default-background-size: auto;
      --game-thumb-default-background-position: center;
      --game-thumb-default-background-repeat: repeat;
      --game-thumb-default-filter: saturate(0.9);
      --game-1-thumb-image: url("./images/The-Last-Frontier.png");
      --game-1-thumb-background-size: contain;
      --game-1-thumb-background-position: center;
      --game-1-thumb-background-repeat: no-repeat;
      --game-1-thumb-filter: none;
      --game-2-thumb-image: url("./images/The-Last-Judgement.png");
      --game-2-thumb-background-size: contain;
      --game-2-thumb-background-position: center;
      --game-2-thumb-background-repeat: no-repeat;
      --game-2-thumb-filter: none;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: 'Outfit', 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
      color:var(--text);
      background-color:#070b14;
      background-image:
        linear-gradient(180deg, rgba(11,15,26,0.92) 0%, rgba(11,15,26,0.75) 35%, rgba(7,11,20,0.92) 100%),
        url("./images/background.svg");
      background-repeat: no-repeat, repeat;
      background-size: 100% 100%, 14400px 14400px;
      background-position: center top, center;
      line-height:1.65;
    }
    a{color:inherit; text-decoration:none}
    .container{width:min(1200px, 92vw); margin:0 auto}
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:var(--blur);
      background: linear-gradient(to bottom, rgba(11,15,26,0.8), rgba(11,15,26,0));
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    nav{display:flex; align-items:center; justify-content:space-between; padding:clamp(0.875rem, calc(0.8rem + 0.2vw), 1.25rem) 0}
    .brand{display:flex; align-items:center; gap:clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem)}
    .logo{
      width:clamp(2.5rem, calc(2.3rem + 0.4vw), 3rem);
      height:clamp(2.5rem, calc(2.3rem + 0.4vw), 3rem);
      border-radius:0.75rem;
      background-image: var(--logo-default-image);
      background-position:center;
      background-repeat:no-repeat;
      background-size:auto;
      filter: var(--logo-default-filter);
      box-shadow: var(--logo-default-shadow);
    }
    .logo[data-logo-slot="header"]{
      background-image: var(--logo-header-image);
      background-size: var(--logo-header-background-size);
      filter: var(--logo-header-filter);
      box-shadow: var(--logo-header-shadow);
    }
    .logo[data-logo-slot="footer"]{
      background-image: var(--logo-footer-image);
      background-size: var(--logo-footer-background-size);
      filter: var(--logo-footer-filter);
      box-shadow: var(--logo-footer-shadow);
    }
    .brand h1{font-size:1.125rem; letter-spacing:0.2px; margin:0; font-weight:700}
    .nav-links{display:flex; gap:clamp(1.125rem, calc(1rem + 0.3vw), 1.75rem); align-items:center}
    .nav-links a{padding:0.5rem 0.75rem; border-radius:0.625rem; opacity:0.9}
    .nav-links a:hover{background:var(--panel); opacity:1}
    .nav-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:2.75rem;
      height:2.75rem;
      border-radius:0.75rem;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(255,255,255,0.05);
      color:var(--text);
      cursor:pointer;
      transition: background .3s ease, border-color .3s ease, transform .3s ease;
    }
    .nav-toggle:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.28); transform:translateY(-1px)}
    .nav-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
    .nav-toggle .bars{display:inline-flex; flex-direction:column; gap:0.375rem}
    .nav-toggle .bars span{
      width:1.25rem;
      height:0.125rem;
      background:currentColor;
      border-radius:999px;
      transition: transform .3s ease, opacity .3s ease;
    }
    .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(0.5rem) rotate(45deg)}
    .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
    .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-0.5rem) rotate(-45deg)}
    .cta{
      display:inline-flex; gap:0.625rem; align-items:center; padding:0.625rem 0.875rem; border-radius:0.75rem;
      background: linear-gradient(180deg, var(--brand), #64b5ff);
      color:#041021; font-weight:700; box-shadow: var(--shadow);
    }
    .cta:hover{transform: translateY(-1px); box-shadow: 0 12px 36px rgba(110, 231, 255, 0.35)}

    /* Hero */
    .hero{position:relative; padding:clamp(70px, 8vw, 100px) 0 clamp(32px, 5vw, 60px)}
    .grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2.5rem, calc(2.2rem + 1.2vw), 3.25rem)}
    @media (max-width: 980px){ .grid{grid-template-columns:1fr; gap:1.75rem} }

    .hero h2{font-size:clamp(28px, calc(4vw + 12px), 54px); margin:0 0 0.75rem; line-height:1.1}
    .hero p{font-size:clamp(14px, calc(1.2vw + 10px), 18px); color:var(--muted); margin:0.625rem 0 1.375rem}
    .chip{
      display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; border-radius:999px;
      background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
      font-weight:600; font-size:0.8125rem; letter-spacing:0.2px
    }

    .hero-canvas{position:relative; height:clamp(280px, 32vw, 380px); border-radius:var(--radius-xl); overflow:hidden;
      border:1px solid rgba(255,255,255,0.08); background: radial-gradient(400px 260px at 70% 20%, rgba(167,139,250,0.18), transparent),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); box-shadow: var(--shadow)}
    .hero-canvas::before{content:""; position:absolute; inset:0; background-image: var(--hero-art-image); background-size: var(--hero-art-background-size); background-position: var(--hero-art-background-position); background-repeat: var(--hero-art-background-repeat); filter: var(--hero-art-filter); opacity: var(--hero-art-opacity); z-index:1; pointer-events:none}
    .glow{position:absolute; inset:-20%; background:radial-gradient(closest-side, rgba(110,231,255,0.14), transparent 70%); filter:blur(50px); animation: float 10s ease-in-out infinite; z-index:0}
    .glow:nth-child(2){left:60%; top:40%; animation-duration: 14s}
    .glow:nth-child(3){left:20%; top:10%; animation-duration: 19s}
    @keyframes float{50%{transform:translateY(-20px)} }

    /* Cards */
    .cards{display:grid; grid-template-columns: repeat(12, 1fr); gap:clamp(1.375rem, calc(1.1rem + 0.6vw), 1.75rem); margin-top:clamp(1.5rem, calc(1.25rem + 0.5vw), 2rem)}
    @media (max-width: 980px){ .cards{grid-template-columns:1fr} }
    .card{
      grid-column: span 6;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border:1px solid rgba(255,255,255,0.09); border-radius: var(--radius-xl); overflow:hidden; position:relative;
      box-shadow: var(--shadow);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }
    .card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,0.2); box-shadow: 0 18px 44px rgba(0,0,0,0.4)}
    .thumb{position:relative; aspect-ratio: 16/9; overflow:hidden}
    .thumb .ph{
      position:absolute; inset:0;
      background-image: var(--game-thumb-default-image);
      background-size: var(--game-thumb-default-background-size);
      background-position: var(--game-thumb-default-background-position);
      background-repeat: var(--game-thumb-default-background-repeat);
      filter: var(--game-thumb-default-filter);
    }
    .cards > .card:nth-of-type(1) .thumb .ph{
      background-image: var(--game-1-thumb-image, var(--game-thumb-default-image));
      background-size: var(--game-1-thumb-background-size, var(--game-thumb-default-background-size));
      background-position: var(--game-1-thumb-background-position, var(--game-thumb-default-background-position));
      background-repeat: var(--game-1-thumb-background-repeat, var(--game-thumb-default-background-repeat));
      filter: var(--game-1-thumb-filter, var(--game-thumb-default-filter));
    }
    .cards > .card:nth-of-type(2) .thumb .ph{
      background-image: var(--game-2-thumb-image, var(--game-thumb-default-image));
      background-size: var(--game-2-thumb-background-size, var(--game-thumb-default-background-size));
      background-position: var(--game-2-thumb-background-position, var(--game-thumb-default-background-position));
      background-repeat: var(--game-2-thumb-background-repeat, var(--game-thumb-default-background-repeat));
      filter: var(--game-2-thumb-filter, var(--game-thumb-default-filter));
    }
    .thumb::after{content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 70% 30%, rgba(110,231,255,0.18), transparent), radial-gradient(40% 40% at 20% 15%, rgba(167,139,250,0.18), transparent)}
    .badge{
      position:absolute; top:0.75rem; left:0.75rem; padding:0.375rem 0.625rem; font-size:0.75rem; font-weight:700; border-radius:999px;
      background: rgba(11,15,26,0.7); border:1px solid rgba(255,255,255,0.18);
    }
    .card-body{padding:1.125rem 1.125rem 1.25rem}
    .card h3{margin:0 0 0.375rem; font-size:1.375rem}
    .meta{display:flex; gap:0.75rem; align-items:center; color:var(--muted); font-size:0.875rem}
    .card p{color:var(--muted); margin:0.625rem 0 1.125rem}
    .btn-row{display:flex; gap:0.75rem; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; gap:0.5rem; padding:0.625rem 0.875rem; border-radius:0.75rem; font-weight:700; letter-spacing:0.2px;
      background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
    }
    .btn:hover{ background: rgba(255,255,255,0.12)}
    .btn.primary{ background: linear-gradient(180deg, var(--accent), #7aa2ff); color:#081123; border:none}
    .btn.primary:hover{ filter: brightness(1.05)}

    /* Company */
    .section{padding:clamp(4.375rem, calc(3.75rem + 1.5vw), 5rem) 0}
    .section h2{font-size:1.75rem; margin:0 0 0.875rem}
    .cols{display:grid; grid-template-columns: 1fr 1fr; gap:clamp(1.5rem, calc(1.25rem + 0.6vw), 2rem)}
    @media (max-width: 880px){ .cols{grid-template-columns:1fr} }
    .panel{background: var(--panel); border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding:clamp(1.25rem, calc(1.1rem + 0.3vw), 1.75rem); box-shadow: var(--shadow)}
    .panel .form-embed,
    .panel .map-container{
      position:relative;
      border-radius:var(--radius-lg);
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.1);
      box-shadow: var(--shadow);
      background: radial-gradient(60% 60% at 40% 20%, rgba(110,231,255,0.12), transparent),
                  linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      margin-top:1.125rem;
    }
    .panel .map-container{
      aspect-ratio:16/9;
      min-height:200px;
    }
    .panel .form-embed{
      min-height:520px;
    }
    .panel .form-embed iframe,
    .panel .map-container iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }
    .kpi{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:0.875rem}
    @media (max-width:600px){ .kpi{grid-template-columns:1fr 1fr} }
    .kpi .item{padding:0.875rem; border-radius:0.875rem; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06)}
    .kpi .n{font-size:1.625rem; font-weight:800}
    .kpi .l{color:var(--muted); font-size:0.75rem}

    /* Footer */
    footer{padding:clamp(2.25rem, calc(2rem + 0.6vw), 2.75rem) 0 clamp(3.75rem, calc(3.25rem + 1.2vw), 4.25rem); color:#b9c6e4}
    .foot{display:flex; gap:clamp(1.125rem, calc(1rem + 0.4vw), 1.75rem); justify-content:space-between; align-items:flex-start; flex-wrap:wrap}
    .social{display:flex; gap:0.625rem}
    .social a{padding:0.625rem 0.75rem; border:1px solid rgba(255,255,255,0.14); border-radius:0.625rem; background: rgba(255,255,255,0.04)}

    @media (max-width: 900px){
      .hero{padding:clamp(64px, 10vw, 96px) 0 clamp(28px, 7vw, 48px)}
      .card{grid-column:span 12}
    }

    @media (max-width: 720px){
      nav{flex-wrap:wrap; gap:0.75rem}
      .brand{flex:1 1 auto; min-width:0}
      .brand h1{font-size:1rem}
      .nav-toggle{display:inline-flex}
      .nav-links{display:flex; flex-direction:column; align-items:flex-start; width:100%; gap:0.5rem; padding:0.25rem 0 1rem}
      .nav-links a{width:100%; padding:0.75rem 0.875rem}
      .nav-links .cta{display:flex; justify-content:center; width:100%}
      body.nav-ready .nav-links{display:none}
      body.nav-ready .nav-links.open{display:flex}
      body.nav-open{overflow:hidden}
      .hero{padding:clamp(64px, 12vw, 90px) 0 clamp(28px, 8vw, 44px)}
      .hero-canvas{height:clamp(240px, 58vw, 300px)}
      .btn-row{width:100%}
      .btn-row .btn{flex:1 1 100%; justify-content:center}
      .cols{gap:1.375rem}
      .panel{padding:1.125rem}
      .foot{flex-direction:column; align-items:flex-start}
    }

    @media (max-width: 560px){
      .hero{padding-top:4rem}
      .hero-canvas{height:clamp(220px, 62vw, 260px)}
      .chip{font-size:0.8125rem}
      .section{padding:clamp(3.5rem, calc(3rem + 1vw), 3.75rem) 0}
    }

    @media (max-width: 480px){
      .container{width:92vw}
      .brand h1{font-size:0.9375rem}
      .hero-canvas{height:clamp(210px, 60vw, 230px)}
      .btn-row{gap:0.625rem}
      .kpi{grid-template-columns:1fr}
      .social a{width:2.75rem; justify-content:center}
    }

    /* Small helpers */
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
    .sep{height:0; background:none; border:none; margin:clamp(3rem, calc(2.5rem + 1.2vw), 3.75rem) 0}

    /* Smooth scroll */
    html{scroll-behavior:smooth}

    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important}
      html{scroll-behavior:auto}
    }