/* @primitive · ownership marker (AegisSurface) */
/* landing.css — marketing landing (extracted from index.php for modularity) */
:root{
  --blue:#2563ff;
  --blue-d:#164fe0;
  --blue-soft:#edf4ff;
  --ink:#08142f;
  --muted:#65728d;
  --muted-2:#9aa7bd;
  --bg:#f8f8f6;
  --line:#e2eaf7;
  --red:#e5484d;
  --green:#16a06b;
  --amber:#dd9a2d;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.app{
  width:100%;
  max-width:460px;
  min-height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(37,99,255,.11), transparent 34%),
    linear-gradient(180deg,#fff 0%,#fbfcff 51%,#f5f8ff 100%);
}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 22px 0;
  position:relative;z-index:30;
}
.brand{
  display:flex;align-items:center;gap:9px;
  font-size:23px;font-weight:900;letter-spacing:-.035em;
}
.logo{width:31px;height:35px;flex:0 0 auto}
.burger{
  width:42px;height:42px;border:0;background:transparent;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;
}
.burger span{display:block;height:2.5px;border-radius:3px;background:var(--ink)}
.menu{
  position:absolute;top:56px;right:18px;min-width:206px;
  background:rgba(255,255,255,.93);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 24px 48px -26px rgba(10,30,70,.35);
  padding:8px;display:none;z-index:60;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.menu.open{display:block}
.menu a{display:block;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:750}
.menu a:hover{background:var(--blue-soft);color:var(--blue)}

.hero{text-align:center;padding:6px 22px 0;position:relative;z-index:5}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:999px;
  background:rgba(37,99,255,.07);color:var(--blue);
  font-size:11.5px;font-weight:850;margin-bottom:10px;
}
h1{
  margin:0;color:var(--ink);
  font-size:clamp(30px,8.9vw,41px);
  line-height:.99;letter-spacing:-.058em;font-weight:900;
}
h1 span{display:block;color:var(--blue)}
.sub{
  margin:8px auto 0;max-width:33ch;
  color:var(--muted);font-size:13.6px;line-height:1.35;font-weight:560;
}
.valueLine{
  margin:9px auto 0;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  color:#14203a;font-size:11.5px;font-weight:850;
}
.valueLine span{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(214,224,245,.95);
  border-radius:999px;
  padding:6px 8px;
}

/* dotted hint */
.hint-try{
  position:absolute;left:36px;top:230px;z-index:12;
  width:118px;height:56px;border:0;background:transparent;padding:0;color:var(--blue);
}
.hint-line{
  position:absolute;left:0;top:8px;width:94px;height:42px;
  border-left:3px dashed rgba(37,99,255,.56);
  border-bottom:3px dashed rgba(37,99,255,.56);
  border-radius:0 0 0 26px;
  filter:drop-shadow(0 5px 6px rgba(37,99,255,.13));
}
.hint-line:after{
  content:"";position:absolute;right:-7px;bottom:-6px;width:10px;height:10px;
  border-right:3px solid rgba(37,99,255,.76);
  border-bottom:3px solid rgba(37,99,255,.76);
  transform:rotate(-45deg);
}
.hint-text{
  position:absolute;left:39px;top:37px;
  background:rgba(255,255,255,.9);color:var(--blue);
  border:1px solid rgba(214,224,245,.96);
  border-radius:999px;padding:5px 9px;
  font-size:10.5px;font-weight:900;line-height:1;white-space:nowrap;
  box-shadow:0 10px 22px -16px rgba(20,40,80,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hint-try.copied .hint-text{color:var(--green);background:#e8f7ef}

.stage{position:relative;flex:0 0 auto;min-height:322px;margin-top:-2px}
.links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.links path{fill:none;stroke:#b8cdf8;stroke-width:.42;stroke-dasharray:1.5 2;opacity:.45}
.mascot{
  position:absolute;left:50%;top:57%;
  transform:translate(-50%,-50%);height:57%;z-index:2;
}
.mascot .inner{height:100%;animation:floaty 4.6s ease-in-out infinite;transform-origin:50% 80%}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mascot img{height:100%;width:auto;display:block;filter:drop-shadow(0 22px 23px rgba(37,99,255,.20))}
.mascot.r-block img{filter:drop-shadow(0 0 18px rgba(229,72,77,.62)) drop-shadow(0 22px 23px rgba(229,72,77,.22))}
.mascot.r-flag img{filter:drop-shadow(0 0 18px rgba(221,154,45,.58)) drop-shadow(0 22px 23px rgba(221,154,45,.20))}
.mascot.r-clean img{filter:drop-shadow(0 0 18px rgba(22,160,107,.48)) drop-shadow(0 22px 23px rgba(22,160,107,.18))}
.mascot.shake .inner{animation:mshake .48s ease}
@keyframes mshake{0%,100%{transform:translateX(0) rotate(0)}18%{transform:translateX(-8px) rotate(-2deg)}42%{transform:translateX(8px) rotate(2deg)}65%{transform:translateX(-4px)}85%{transform:translateX(3px)}}

.fcard{
  position:absolute;z-index:3;
  background:rgba(255,255,255,.87);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(214,224,245,.96);
  border-radius:18px;padding:8px 9px;
  box-shadow:0 14px 34px -24px rgba(20,40,80,.42);
  display:flex;gap:7px;align-items:center;width:auto;max-width:150px;
}
.fcard:after{
  content:"";position:absolute;bottom:-6px;left:28px;width:12px;height:12px;
  background:inherit;border-right:1px solid rgba(214,224,245,.9);
  border-bottom:1px solid rgba(214,224,245,.9);transform:rotate(45deg);border-radius:2px;
}
.fcard .fic{
  flex:0 0 26px;width:26px;height:26px;border-radius:999px;
  background:linear-gradient(180deg,#eef4ff,#fff);color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(37,99,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.fcard p{margin:0;font-size:10.55px;font-weight:850;letter-spacing:-.015em;color:#14203a;line-height:1.2}
.c-top{top:0;left:50%;transform:translateX(-50%);max-width:184px}
.c-top:after{left:50%;transform:translateX(-50%) rotate(45deg)}
.c-ul{top:30%;left:-3px}.c-ur{top:30%;right:-3px}.c-ll{top:67%;left:-3px}.c-lr{top:67%;right:-3px}
.c-ur:after,.c-lr:after{left:auto;right:28px}
.fcard.pulse{animation:cardpulse .72s ease}
@keyframes cardpulse{0%{box-shadow:0 0 0 0 rgba(37,99,255,.45)}100%{box-shadow:0 0 0 16px rgba(37,99,255,0)}}

.tester{padding:0 22px;margin-top:-8px;position:relative;z-index:8}
.wave{height:22px;margin:0 -22px 1px;pointer-events:none}
.wave svg{width:100%;height:100%;display:block}
.inputwrap{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.89);border:1.5px solid var(--line);
  border-radius:19px;padding:11px 14px;
  box-shadow:0 16px 36px -26px rgba(20,40,80,.36);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.inputwrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,255,.11),0 16px 36px -26px rgba(20,40,80,.36)}
.inputwrap.bad{border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,77,.12);animation:ishake .38s}
.inputwrap.flag{border-color:var(--amber);box-shadow:0 0 0 4px rgba(221,154,45,.13)}
.inputwrap.good{border-color:var(--green);box-shadow:0 0 0 4px rgba(22,160,107,.12)}
@keyframes ishake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.prompt{
  flex:0 0 30px;width:30px;height:30px;border-radius:10px;
  background:#eef2f9;color:var(--muted);display:flex;align-items:center;justify-content:center;
}
.prompt svg{width:17px;height:17px}
.inputwrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px;font-weight:550}
.inputwrap input::placeholder{color:var(--muted-2)}
.testbtn{
  width:100%;margin-top:9px;border:0;border-radius:19px;
  background:linear-gradient(180deg,var(--blue),var(--blue-d));color:#fff;
  font-weight:850;font-size:16px;padding:13px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 18px 32px -13px rgba(37,99,255,.62);
  transition:transform .12s,filter .12s;
}
.testbtn:active{transform:translateY(1px)}
.testbtn svg{width:20px;height:20px;fill:currentColor}
.result{height:0;overflow:hidden;opacity:0;transition:opacity .22s}
.result.show{height:auto;opacity:1;margin-top:8px}
.result .rl{
  display:flex;align-items:center;gap:9px;justify-content:center;
  font-weight:850;font-size:13px;padding:8px 12px;border-radius:14px;
}
.result .rl svg{width:17px;height:17px}
.result.block .rl{background:#fdebed;color:var(--red)}
.result.flag .rl{background:#fbf1dd;color:var(--amber)}
.result.clean .rl{background:#e8f7ef;color:var(--green)}

.codeview{margin-top:7px}
.codecap{text-align:center;font-size:12px;font-weight:900;color:var(--blue);margin-bottom:5px}
.codebox{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.83);border:1px solid rgba(214,224,245,.96);
  border-radius:16px;padding:9px 10px;
  box-shadow:0 16px 34px -26px rgba(20,40,80,.34);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.codebox code{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:11.15px;color:#14203a;
}
.codebox code span{color:#9b3ff6}.codebox code b{color:#1fa463;font-weight:600}.codebox code strong{color:var(--blue);font-weight:700}
.copybtn{
  border:0;background:#eef4ff;color:var(--blue);font-size:10.5px;
  font-weight:850;border-radius:10px;padding:7px 8px;flex:0 0 auto;
}
.copybtn.done{background:#e8f7ef;color:var(--green)}
.safe{
  margin-top:7px;color:var(--muted-2);font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.safe svg{width:14px;height:14px}
.bottom-space{height:4px;flex:0 0 auto}

@media(max-width:390px){
  .header{padding-left:18px;padding-right:18px}
  .hero{padding-left:18px;padding-right:18px}
  .hint-try{left:30px;top:222px;transform:scale(.9);transform-origin:left top}
  .stage{min-height:312px}.mascot{height:56%}
  .fcard{max-width:132px;padding:7px 8px}.fcard p{font-size:9.85px}.fcard .fic{width:24px;height:24px;flex-basis:24px}
  .c-top{max-width:170px}.c-ul{left:-8px}.c-ur{right:-8px}.c-ll{left:-8px}.c-lr{right:-8px}
  .tester{padding-left:18px;padding-right:18px}
}
@media(max-height:760px){
  .badge{display:none}.header{padding-top:8px}h1{font-size:30px}
  .sub{font-size:12.8px;line-height:1.32}.valueLine{display:none}
  .hint-try{top:198px;left:30px;transform:scale(.86);transform-origin:left top}
  .stage{min-height:282px}.mascot{height:54%}
  .inputwrap{padding:10px 13px}.testbtn{padding:12px;font-size:16px}
  .codebox code{font-size:10.55px}.safe{font-size:11px}
}
@media(max-height:700px){
  .header{padding-top:6px}.brand{font-size:21px}.logo{width:28px;height:32px}
  h1{font-size:28px}.sub{font-size:12px;margin-top:6px}
  .hint-try{top:180px;transform:scale(.8)}
  .stage{min-height:260px}.mascot{height:52%}.fcard p{font-size:9.2px}
  .tester{margin-top:-10px}.wave{height:18px}.inputwrap{padding:9px 12px}
  .testbtn{margin-top:7px;padding:11px}.codeview{margin-top:6px}.codecap{font-size:11.5px;margin-bottom:4px}
  .codebox{padding:8px 9px}.safe{margin-top:6px;font-size:10.6px}
}
@media(min-width:520px){
  body{background:#eef3fb}
  .app{margin:22px auto;border-radius:34px;min-height:850px;box-shadow:0 30px 80px -45px rgba(10,30,70,.45)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}