@import"https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Kanit:wght@600;700;800&display=swap";:root{--bg: #f4f0e9;--surface: #fffaf1;--surface-strong: #183036;--text: #1b1d20;--text-inverse: #f7f4ec;--muted: #5b626e;--brand: #ff5a2c;--brand-dark: #d2461f;--line: rgba(27, 29, 32, .14);--ok: #146d45}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Barlow,sans-serif;color:var(--text);background:radial-gradient(circle at 10% 15%,rgba(255,90,44,.22) 0%,transparent 36%),radial-gradient(circle at 88% 8%,rgba(24,48,54,.24) 0%,transparent 34%),linear-gradient(180deg,#fef7ed,#f4f0e9 45%,#efe8dd)}.counter{font-size:16px;padding:5px 10px;border-radius:5px;color:var(--accent);background:var(--accent-bg);border:2px solid transparent;transition:border-color .3s;margin-bottom:24px}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{inset-inline:0;margin:0 auto}.hero .base{width:170px;position:relative;z-index:0}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;top:34px;@keyframes reveal{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}flex:1 1 0;padding:32px}.hero .framework .layout{width:min(1100px,calc(100% - 2rem));margin:1.5rem auto 3rem;display:grid;gap:1.2rem}.hero .framework .hero{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(1.2rem,3vw,2.2rem);display:grid;gap:1rem;box-shadow:0 24px 60px #1830361c;animation:reveal .52s ease-out}.hero .framework .eyebrow{margin:0;text-transform:uppercase;letter-spacing:.17em;font-size:.75rem;font-weight:700;color:var(--brand-dark)}.hero .framework h1,.hero .framework h2,.hero .framework h3{font-family:Kanit,sans-serif;margin:0}.hero .framework h1{font-size:clamp(2rem,5vw,4rem);line-height:.96;letter-spacing:-.02em;max-width:17ch}.hero .framework .lead{margin:0;color:var(--muted);font-size:1.06rem;max-width:62ch}.hero .framework .authRow{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.hero .framework .button{border:0;border-radius:999px;font-weight:700;letter-spacing:.01em;padding:.78rem 1.15rem;cursor:pointer;transition:transform .14s ease,opacity .14s ease}.hero .framework .button:hover{transform:translateY(-1px)}.hero .framework .button:disabled{cursor:default;opacity:.6}.hero .framework .button.primary{background:var(--brand);color:#fff}.hero .framework .button.secondary{background:#e4ddd0;color:var(--text)}.hero .framework .userBadge{display:inline-flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.52rem .8rem;gap:.06rem}.hero .framework .status{margin:0;color:var(--ok);font-weight:600}.hero .framework .services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.hero .framework .card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:1.1rem;display:grid;align-content:start;gap:.7rem;transform:translateY(14px);opacity:0;animation:reveal .52s ease-out forwards}.hero .framework .card:nth-child(2){animation-delay:90ms}.hero .framework .card:nth-child(3){animation-delay:.16s}.hero .framework .card p{margin:0;color:var(--muted)}.hero .framework .duration{color:#2c5c67;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}.hero .framework .price{color:var(--text);font-size:1.33rem;font-weight:700}.hero .framework .trust{background:var(--surface-strong);color:var(--text-inverse);border-radius:24px;border:1px solid rgba(247,244,236,.14);padding:1.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}.hero .framework .trust p{color:#f7f4eccc;margin-top:.45rem}.hero .framework .requestCard,.hero .framework .adminPanel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:1.1rem}.hero .framework .requestCard p{margin-top:.25rem;color:var(--muted)}.hero .framework .formGrid{margin-top:.8rem;display:grid;gap:.6rem}.hero .framework .formGrid input,.hero .framework .formGrid select,.hero .framework .formGrid textarea,.hero .framework .slotCreate input{width:100%;border:1px solid var(--line);border-radius:12px;padding:.58rem .75rem;font:inherit;background:#fff}.hero .framework .miniInfo{margin:.6rem 0;font-size:.92rem}.hero .framework .adminPanel{display:grid;gap:.9rem}.hero .framework .adminHead{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.hero .framework .adminCard{border:1px dashed var(--line);border-radius:14px;padding:.85rem}.hero .framework .slotCreate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin:.55rem 0}.hero .framework .adminList{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}.hero .framework .adminList li{border:1px solid var(--line);border-radius:12px;padding:.6rem;display:flex;align-items:center;justify-content:space-between;gap:.7rem}.hero .framework .adminList.requests li{align-items:flex-start}.hero .framework .adminList p{margin:.22rem 0;color:var(--muted)}.hero .framework .actions{display:grid;gap:.45rem}@media(max-width:900px){.hero .framework .services,.hero .framework .trust,.hero .framework .slotCreate{grid-template-columns:1fr}.hero .framework .adminList li{flex-direction:column;align-items:flex-start}.hero .framework .layout{width:min(760px,calc(100% - 1rem));margin-top:.75rem}}@media(max-width:1024px){.hero .framework{padding:24px 20px}}.hero .icon{margin-bottom:16px;width:22px;height:22px}@media(max-width:1024px){.hero{flex-direction:column;text-align:center}}#docs{border-right:1px solid var(--border)}@media(max-width:1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{list-style:none;padding:0;display:flex;gap:8px;margin:32px 0 0}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);font-size:16px;border-radius:6px;background:var(--social-bg);display:flex;padding:6px 12px;align-items:center;gap:8px;text-decoration:none;transition:box-shadow .3s}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{height:18px;width:18px}@media(max-width:1024px){#next-steps ul{margin-top:20px;flex-wrap:wrap;justify-content:center}#next-steps ul li{flex:1 1 calc(50% - 8px)}#next-steps ul a{width:100%;justify-content:center;box-sizing:border-box}}#spacer{height:88px;border-top:1px solid var(--border)}@media(max-width:1024px){#spacer{height:48px}}.ticks{position:relative;width:100%}.ticks:before,.ticks:after{content:"";position:absolute;top:-4.5px;border:5px solid transparent}.ticks:before{left:0;border-left-color:var(--border)}.ticks:after{right:0;border-right-color:var(--border)}
