:root{
  --bg:#050807; --s1:#0c1110; --s2:#141b19; --line:#212c28; --k:#000000;
  --green:#16db80; --green-2:#11c472; --on-green:#03140b; --on-green-2:#0d3a24;
  --fg:#f1f5f3; --fg-2:#9aaba3;
  --wa-bg:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; --wa-text:#e9edef;
  --font:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--line) var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.6;font-weight:500;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--green);color:var(--on-green)}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--green)}
p{margin:0}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.sec{padding-block:120px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 17px var(--font);text-decoration:none;border-radius:999px;padding:16px 28px;transition:transform .3s var(--ease),background .2s,border-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn-g{background:var(--green);color:var(--on-green);box-shadow:0 10px 24px -12px rgba(22,219,128,.55)}
.btn-g:hover{transform:translateY(-2px);background:var(--green-2)}
.btn-o{border:1px solid var(--line);color:var(--fg);background:var(--s1)}
.btn-o:hover{border-color:var(--fg-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.logo{width:30px;height:30px;flex:none;display:block}
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(12,17,16,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 10px;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.mark{font-weight:800;font-size:21px;letter-spacing:-.04em;text-decoration:none;display:flex;align-items:center;gap:10px}
.links{display:flex;gap:4px}
.links a{text-decoration:none;font-size:15px;font-weight:600;padding:9px 14px;border-radius:999px;color:var(--fg-2);transition:color .2s,background .2s}
.links a:hover{color:var(--fg);background:var(--s2)}
.nav .btn{padding:11px 20px;font-size:15px;box-shadow:none}
.shot{position:relative;isolation:isolate;width:100%;border-radius:15.5% / 7.2%;padding:3.4%;background:#050505;
  box-shadow:inset 0 0 0 1.5px #1c1c1c,0 0 0 2px #4a4f4e,0 0 0 3.5px #232625,0 50px 90px -34px rgba(0,0,0,.95)}
.shot img{width:100%;height:auto;aspect-ratio:589/1280;object-fit:cover;object-position:50% 0;border-radius:12.5% / 5.8%;position:relative}
.shot::after{content:"";position:absolute;z-index:2;top:2.8%;left:50%;transform:translateX(-50%);width:31%;aspect-ratio:3.4/1;border-radius:999px;background:#000}
.shot::before{content:"";position:absolute;z-index:-1;left:-5px;right:-5px;top:17%;height:24%;
  background:linear-gradient(#3d4241,#3d4241) left 0 top 0/4px 13% no-repeat,linear-gradient(#3d4241,#3d4241) left 0 top 32%/4px 27% no-repeat,linear-gradient(#3d4241,#3d4241) left 0 bottom 0/4px 27% no-repeat,linear-gradient(#3d4241,#3d4241) right 0 top 28%/4px 44% no-repeat}
.crop{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#0e1211}
.crop img{width:100%;aspect-ratio:var(--a);object-fit:cover;object-position:50% var(--y)}
.plan{background:var(--s1);border:1px solid var(--line);border-radius:32px;padding:40px;display:flex;flex-direction:column;gap:22px}
.plan .v{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan .v small{font-size:18px;color:var(--fg-2);font-weight:600;letter-spacing:0}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:6px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2303140b' stroke-width='2.6'/%3E%3C/svg%3E") center/13px no-repeat}
.plan .note{color:var(--fg-2);font-size:14px}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.faq-grid h2{font-size:clamp(40px,5vw,64px);margin-bottom:20px}
.faq-grid .help{color:var(--fg-2)}
.faq-grid .help a{color:var(--green);font-weight:700}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:34px;height:34px;border-radius:50%;flex:none;border:1px solid var(--line);background:var(--s2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' fill='none' stroke='%2316db80' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--ease),border-color .2s}
details[open] summary::after{transform:rotate(45deg);border-color:var(--green)}
details p{color:var(--fg-2);padding-bottom:22px;max-width:60ch}
footer{border-top:1px solid var(--line);color:var(--fg-2);padding-block:36px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
footer .mark{color:var(--fg);font-size:18px}
footer .logo{width:26px;height:26px}
@media (max-width:960px){
  .links{display:none}
  .sec{padding-block:80px}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:480px){
  .nav .btn span{display:none}
  .nav .btn{padding:11px 14px}
  .btn{padding:15px 22px;font-size:16px}
  .plan{padding:24px}
}
html,body{overflow-x:clip}
main,section,header{overflow-x:clip}
