:root{
      --bg:#07111f;
      --panel:#0d1b2d;
      --panel2:#10233a;
      --text:#eef5ff;
      --muted:#a8b7ca;
      --accent:#53d7ff;
      --accent2:#69f0bd;
      --line:rgba(255,255,255,.1);
      --shadow:0 20px 60px rgba(0,0,0,.28);
      --radius:22px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 5%, rgba(83,215,255,.14), transparent 28%),
        radial-gradient(circle at 90% 25%, rgba(105,240,189,.10), transparent 25%),
        var(--bg);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
      line-height:1.75;
    }
    a{color:inherit;text-decoration:none}
    .wrap{width:min(1120px,calc(100% - 40px));margin:auto}
    header{
      position:sticky;top:0;z-index:20;
      background:rgba(7,17,31,.72);
      backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);
    }
    .nav{height:72px;display:flex;align-items:center;justify-content:space-between}
    .logo{font-weight:850;letter-spacing:.12em;font-size:1.1rem}
    .logo span{color:var(--accent)}
    nav{display:flex;gap:26px;color:var(--muted);font-size:.95rem}
    nav a:hover{color:#fff}
    .hero{padding:110px 0 72px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:9px;
      border:1px solid rgba(83,215,255,.35);
      background:rgba(83,215,255,.08);
      color:#bcefff;border-radius:999px;padding:7px 13px;font-size:.82rem
    }
    .dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px var(--accent2)}
    h1{font-size:clamp(2.6rem,7vw,5.8rem);line-height:1.04;letter-spacing:-.045em;margin:24px 0 24px;max-width:920px}
    .gradient{
      background:linear-gradient(90deg,#fff 10%,#7ee4ff 55%,#7cf0c0);
      -webkit-background-clip:text;background-clip:text;color:transparent
    }
    .lead{max-width:720px;color:var(--muted);font-size:clamp(1rem,2vw,1.2rem)}
    .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:52px;padding:0 22px;border-radius:14px;font-weight:700;border:1px solid var(--line)
    }
    .primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04101c;border:0}
    .secondary{background:rgba(255,255,255,.035)}
    .stats{
      margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);
      border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.025)
    }
    .stat{padding:26px 30px;border-right:1px solid var(--line)}
    .stat:last-child{border-right:0}
    .stat b{display:block;font-size:1.15rem}
    .stat span{color:var(--muted);font-size:.88rem}
    section{padding:88px 0}
    .section-title{max-width:720px;margin-bottom:34px}
    .section-title small{color:var(--accent);font-weight:800;letter-spacing:.14em}
    h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.2;margin:10px 0 14px;letter-spacing:-.03em}
    .section-title p{color:var(--muted)}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{
      padding:30px;border-radius:var(--radius);border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
      box-shadow:var(--shadow)
    }
    .icon{
      width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
      background:rgba(83,215,255,.12);border:1px solid rgba(83,215,255,.2);font-size:1.3rem
    }
    .card h3{margin:20px 0 8px;font-size:1.2rem}
    .card p{margin:0;color:var(--muted)}
    .process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .step{padding:24px;border-top:1px solid var(--line)}
    .num{color:var(--accent);font-weight:900;font-size:.85rem}
    .step h3{margin:9px 0 8px}
    .step p{color:var(--muted);font-size:.94rem}
    .about{
      display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;
      padding:42px;border-radius:28px;border:1px solid var(--line);
      background:linear-gradient(135deg,rgba(83,215,255,.07),rgba(105,240,189,.035))
    }
    .about p{color:var(--muted)}
    .quote{
      min-height:290px;border-radius:22px;padding:34px;display:flex;align-items:flex-end;
      background:
        linear-gradient(180deg,transparent,rgba(0,0,0,.45)),
        radial-gradient(circle at 30% 30%,rgba(83,215,255,.26),transparent 36%),
        linear-gradient(135deg,#132b46,#0b1626);
      border:1px solid var(--line)
    }
    .quote strong{font-size:1.45rem;line-height:1.5}
    .contact{
      text-align:center;padding:62px 26px;border-radius:30px;
      background:linear-gradient(135deg,rgba(83,215,255,.12),rgba(105,240,189,.09));
      border:1px solid rgba(83,215,255,.2)
    }
    .contact p{color:var(--muted);max-width:650px;margin:0 auto 28px}
    footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:.88rem}
    .footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

    .pricing-box{
      display:grid;
      grid-template-columns:1fr 1.1fr auto;
      gap:34px;
      align-items:center;
      padding:38px;
      border-radius:28px;
      border:1px solid rgba(83,215,255,.25);
      background:
        radial-gradient(circle at 10% 20%,rgba(83,215,255,.10),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
      box-shadow:var(--shadow);
    }
    .pricing-label{
      display:inline-block;
      color:#bcefff;
      font-weight:800;
      letter-spacing:.05em;
      margin-bottom:8px;
    }
    .price{
      font-size:clamp(3rem,6vw,5.4rem);
      line-height:1;
      font-weight:900;
      letter-spacing:-.05em;
    }
    .price small{
      font-size:1rem;
      letter-spacing:0;
      margin-right:8px;
      color:var(--muted);
    }
    .price span{
      font-size:1.2rem;
      letter-spacing:0;
      margin-left:6px;
    }
    .tax{
      margin:10px 0 0;
      color:var(--muted);
      font-size:.9rem;
    }
    .pricing-details{
      color:var(--muted);
    }
    .pricing-details p{
      margin:.35rem 0;
    }
    .pricing-note{
      color:var(--muted);
      font-size:.85rem;
      margin-top:14px;
    }

    @media(max-width:820px){
      nav{display:none}
      .hero{padding-top:80px}
      .stats,.cards,.process,.about,.pricing-box{grid-template-columns:1fr}
      .stat{border-right:0;border-bottom:1px solid var(--line)}
      .stat:last-child{border-bottom:0}
      .about{padding:28px}
    }
  
    /* Typography tuning */
    body{font-size:16px}
    .lead{font-size:clamp(1.05rem,1.8vw,1.22rem);line-height:1.9}
    h1{font-size:clamp(2.45rem,6vw,5.15rem)}
    h2{font-size:clamp(1.9rem,3.6vw,3rem)}
    .card h3,.step h3{font-size:1.15rem}
    .card p,.step p,.about p,.pricing-details{font-size:.98rem}
    .pricing-note{font-size:.9rem;line-height:1.8}
    .price{font-size:clamp(2.8rem,5vw,4.6rem)}
    .btn{font-size:.98rem}
    @media(max-width:820px){
      body{font-size:15px}
      h1{font-size:clamp(2.15rem,10vw,3.45rem);line-height:1.12}
      h2{font-size:clamp(1.75rem,7vw,2.45rem)}
      .lead{font-size:1rem;line-height:1.85}
      .hero{padding-top:68px}
      section{padding:68px 0}
      .card,.pricing-box{padding:24px}
      .price{font-size:3.15rem}
      .pricing-details{font-size:.94rem}
      .pricing-note{font-size:.82rem}
      .btn{width:100%;font-size:.95rem}
    }

  
    .hero-image{
      position:relative;
      margin-top:46px;
      height:clamp(280px,42vw,520px);
      overflow:hidden;
      border-radius:28px;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .hero-image::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(7,17,31,.02) 45%,rgba(7,17,31,.78));
      pointer-events:none;
    }
    .hero-image img{
      width:100%;height:100%;object-fit:cover;display:block;
    }
    .image-caption{
      position:absolute;left:24px;bottom:20px;z-index:2;
      font-size:.76rem;font-weight:800;letter-spacing:.13em;color:#fff;
    }
    .server-visual{
      position:relative;overflow:hidden;padding:0;
    }
    .server-visual::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(4,12,22,.08),rgba(4,12,22,.78));
    }
    .server-visual img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    }
    .server-visual strong{
      position:relative;z-index:2;padding:34px;
    }
    @media(max-width:820px){
      .hero-image{height:270px;margin-top:34px;border-radius:20px}
      .image-caption{left:16px;bottom:14px;font-size:.66rem}
      .server-visual{min-height:280px}
    }

  
    /* Hero catchphrase: slightly more compact */
    .hero h1{
      font-size:clamp(2rem,4.5vw,4rem);
      line-height:1.12;
      max-width:860px;
    }
    @media(max-width:820px){
      .hero h1{
        font-size:clamp(1.9rem,8vw,2.8rem);
        line-height:1.18;
      }
    }

  
    /* Prevent awkward Japanese wrapping in the main catchphrase */
    .hero-line{
      display:block;
      white-space:nowrap;
    }
    @media(max-width:620px){
      .hero h1{
        font-size:clamp(1.65rem,7.2vw,2.35rem);
      }
      .hero-line{
        white-space:normal;
        word-break:keep-all;
        overflow-wrap:normal;
      }
    }