/* v9 - Chat-first. body.v9 */
body.v9 { --bg:#f4f6fa; --pane:#fff; --ink:#10131a; --mut:#5b6474; --blue:#0a84ff; --blue2:#0063d1; --gray:#e8eaf0; --line:rgba(16,19,26,.12); --disp:'Figtree','Inter',sans-serif;
  background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 1.05rem; }
.v9 *::selection { background: var(--blue); color:#fff; }
.v9 .h-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.v9 h1, .v9 h2 { font-family: var(--disp); color: var(--ink); font-weight: 800; letter-spacing: -.035em; }
.v9 .site-header { background: rgba(244,246,250,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.v9 .header-inner { height: 68px; max-width: 1200px; padding: 0 32px; }
.v9 .logo { color: var(--ink); font-family: var(--disp); font-weight: 800; } .v9 .logo em { color: var(--blue); }
.v9 .logo svg circle, .v9 .logo svg path { stroke: var(--blue); }
.v9 .nav a:not(.btn), .v9 .nav .nav-link { color: var(--ink); font-weight: 500; font-size: .94rem; } .v9 .nav a:not(.btn):hover { color: var(--blue); }
.v9 .mega-toggle, .v9 .nav-toggle { color: var(--ink); }
.v9 .nav .btn--primary { background: var(--blue); color:#fff; border-radius: 999px; padding: 11px 22px; font-weight:600; } .v9 .nav .btn--primary:hover { background: var(--blue2); }
.v9 .mega { border-top-color: var(--blue); }
@media (max-width:760px){ .v9 .nav{background:var(--pane);border-top:1px solid var(--line)} .v9 .nav a:not(.btn){border-bottom-color:var(--line)} .v9 .nav-item{border-bottom-color:var(--line)} .v9 .nav .mega a:not(.btn),.v9 .mp-items .mi-t,.v9 .mp-title span{color:var(--ink)} .v9 .mega{background:var(--bg)} .v9 .mg-foot-label{color:var(--mut)} .v9 .nav .mega .mg-chips a:not(.btn){background:#fff;color:var(--ink);border-color:var(--line)} }
.h-btn { display:inline-block; padding: 15px 28px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font: 700 1rem var(--disp); text-decoration:none; background:transparent; cursor:pointer; transition: background .2s, color .2s, transform .15s; } .h-btn:hover { transform: translateY(-2px); background: var(--ink); color:#fff; } .h-btn--p { background: var(--blue); border-color: var(--blue); color:#fff; } .h-btn--p:hover { background: var(--blue2); border-color: var(--blue2); }
html.js [data-r] { opacity:0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); } html.js [data-r].in { opacity:1; transform:none; }
.h-hero { padding: 64px 0 80px; background: radial-gradient(900px 420px at 15% -10%, rgba(10,132,255,.13), transparent 60%); } .h-hero-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.h-tag { font: 600 .86rem 'Inter'; letter-spacing:.03em; color: var(--blue); margin: 0 0 18px; }
.v9 .h-hero h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height:1.02; margin: 0 0 22px; } .h-lead { font-size: 1.18rem; line-height:1.6; color: var(--mut); max-width: 520px; margin: 0 0 28px; }
.h-cta { display:flex; flex-wrap:wrap; gap:12px; } .h-trust { list-style:none; display:flex; flex-wrap:wrap; gap: 8px 22px; margin: 30px 0 0; padding:0; font-size:.92rem; color: var(--mut); } .h-trust li::before { content:"\2713"; color: var(--blue); font-weight:800; margin-right:8px; }
.h-chat { background: var(--pane); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 30px 70px -30px rgba(16,19,26,.35); overflow:hidden; display:flex; flex-direction:column; height: 620px; }
.h-chat-top { display:flex; gap:12px; align-items:center; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #fafbfd; } .h-chat-top .av { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background: var(--blue); color:#fff; font: 800 .9rem var(--disp); } .h-chat-top b { display:block; font: 700 1rem var(--disp); } .h-chat-top small { display:block; color: var(--mut); font-size:.76rem; line-height:1.35; }
.h-chat-body { flex:1; overflow-y:auto; padding: 20px; display:flex; flex-direction:column; gap: 10px; scroll-behavior:smooth; }
.h-bub { max-width: 82%; padding: 12px 18px; border-radius: 22px; line-height: 1.5; font-size: 1rem; width:fit-content; } .h-bub--in { background: var(--gray); border-bottom-left-radius: 6px; align-self:flex-start; } .h-bub--out { background: var(--blue); color:#fff; border-bottom-right-radius: 6px; align-self:flex-end; margin-left:auto; }
.h-chat-body .h-bub { animation: hpop .35s cubic-bezier(.3,1.4,.5,1); transform-origin: bottom left; } .h-chat-body .h-bub--out { transform-origin: bottom right; } @keyframes hpop { from { opacity:0; transform: translateY(8px) scale(.92); } to { opacity:1; transform:none; } }
.h-typing { display:inline-flex; gap:5px; padding: 15px 18px; background: var(--gray); border-radius: 22px; border-bottom-left-radius:6px; align-self:flex-start; } .h-typing i { width:8px; height:8px; border-radius:50%; background:#9aa2b2; animation: htp 1s infinite; } .h-typing i:nth-child(2){animation-delay:.15s} .h-typing i:nth-child(3){animation-delay:.3s} @keyframes htp { 0%,60%,100% { transform: translateY(0); opacity:.5; } 30% { transform: translateY(-5px); opacity:1; } }
.h-result { align-self:flex-start; width:100%; border: 1.5px solid var(--blue); border-radius: 20px; padding: 18px; background: #f3f8ff; animation: hpop .4s cubic-bezier(.3,1.4,.5,1); } .h-result small { font: 700 .72rem 'Inter'; letter-spacing:.1em; text-transform:uppercase; color: var(--blue); } .h-result b { display:block; font: 800 1.3rem/1.15 var(--disp); margin: 6px 0; } .h-result p { margin: 0 0 14px; color: var(--mut); font-size:.95rem; line-height:1.5; } .h-result .row { display:flex; flex-wrap:wrap; gap: 8px; }
.h-result .row a, .h-result .row button { padding: 10px 16px; border-radius: 999px; font: 700 .86rem var(--disp); text-decoration:none; cursor:pointer; border: 1.5px solid var(--blue); background:#fff; color: var(--blue); } .h-result .row a.p, .h-result .row button.p { background: var(--blue); color:#fff; }
.h-chat-quick { display:flex; flex-wrap:wrap; gap: 8px; padding: 6px 20px 14px; min-height: 54px; } .h-chat-quick button { padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--blue); background:#fff; color: var(--blue); font: 600 .9rem 'Inter'; cursor:pointer; transition: background .15s, color .15s, transform .15s; } .h-chat-quick button:hover { background: var(--blue); color:#fff; transform: translateY(-2px); }
.h-chat-in { display:flex; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line); } .h-chat-in input { flex:1; min-width:0; padding: 13px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font: 1rem 'Inter'; color: var(--ink); } .h-chat-in input:focus { outline:0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,.2); } .h-chat-in button { width:46px; height:46px; border-radius:50%; border:0; background: var(--blue); color:#fff; font-size:1.3rem; cursor:pointer; }
.h-sec { padding: 90px 0; } .h-sec--alt { background: var(--pane); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.h-thread { display:flex; flex-direction:column; gap: 12px; max-width: 880px; } .h-thread .h-bub { font-size: 1.25rem; padding: 16px 24px; max-width: 80%; } .h-bub b { font-family: var(--disp); }
.h-who { font: 600 .8rem 'Inter'; color: var(--mut); margin: 14px 0 -4px 8px; }
.h-cards { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; } .h-card { display:flex; flex-direction:column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--pane); text-decoration:none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; } .h-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 18px 40px -22px rgba(10,132,255,.6); } .h-card b { font: 800 1.2rem/1.2 var(--disp); } .h-card span { color: var(--mut); line-height:1.5; font-size:.98rem; } .h-card i { font-style:normal; font-weight:700; color: var(--blue); font-size:.92rem; margin-top:auto; }
.h-msg { display:grid; grid-template-columns: 90px 1fr; gap: 14px; align-items:center; } .h-msg time { font: 600 .82rem 'Inter'; color: var(--mut); text-align:right; } .h-msg .h-bub { font-size: 1.12rem !important; }
.h-chips { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 6px; } .h-chips a { padding: 13px 22px; border-radius: 999px; border: 1.5px solid var(--blue); background:#fff; color: var(--blue); font: 700 1rem var(--disp); text-decoration:none; transition: background .2s, color .2s, transform .2s; } .h-chips a:hover { background: var(--blue); color:#fff; transform: translateY(-3px); }
.h-links { display:grid; gap: 14px; } .h-link { display:grid; grid-template-columns: 150px 1fr; gap: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); overflow:hidden; text-decoration:none; color: var(--ink); transition: transform .2s, box-shadow .2s; } .h-link:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(16,19,26,.5); } .h-link .im { display:block; background:#000; } .h-link img { width:100%; height:100%; object-fit:cover; display:block; } .h-link .tx { display:grid; gap:4px; padding: 16px 18px 16px 0; align-content:center; } .h-link small { font: 700 .74rem 'Inter'; letter-spacing:.08em; text-transform:uppercase; color: var(--blue); } .h-link b { font: 800 1.15rem/1.2 var(--disp); } .h-link em { font-style:normal; color: var(--mut); font-size:.8rem; }
.h-more { align-self:flex-start; margin-top: 8px; font: 700 1rem var(--disp); color: var(--blue); text-decoration:none; }
.h-faq { gap: 22px; } .h-qa { display:grid; gap: 8px; } .h-qa summary { list-style:none; cursor:pointer; margin-left:auto; } .h-qa summary::-webkit-details-marker { display:none; } .h-qa > .h-bub--in { font-size:1.05rem !important; } .h-qa:not([open]) > .h-bub--in { display:none; } .h-qa summary { transition: transform .15s; } .h-qa summary:hover { transform: translateY(-2px); }
.h-contact { background: var(--ink); color:#cfd5e2; padding: 100px 0; } .h-contact-g { display:grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items:start; } .h-contact h2 { color:#fff; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height:1; margin: 0 0 20px; } .h-contact .h-lead { color:#b4bccc; } .h-contact .h-tag { color:#7cc0ff; }
.h-ci { list-style:none; margin: 28px 0 0; padding:0; } .h-ci li { display:grid; grid-template-columns: 80px 1fr; gap:16px; padding: 14px 0; border-top:1px solid rgba(255,255,255,.18); line-height:1.5; } .h-ci small { color:#7cc0ff; font-weight:600; } .h-ci a { color:#fff; }
.h-form { display:grid; gap:16px; background: var(--pane); color: var(--ink); border-radius: 28px; padding: 32px; } .h-form label { display:grid; gap: 7px; } .h-form label span { font: 700 .88rem var(--disp); } .h-form input, .h-form select, .h-form textarea { width:100%; padding: 14px 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--bg); font: 1rem 'Inter'; color: var(--ink); } .h-form input:focus, .h-form select:focus, .h-form textarea:focus { outline:0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,.2); }
.h-r2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .h-form .hp { position:absolute; left:-9999px; height:0; overflow:hidden; } .h-form .h-btn { justify-self:start; } .h-al { padding: 13px 16px; border-radius: 14px; font-weight:600; } .h-al.ok { background:#d8f5e3; color:#0d5c2c; } .h-al.bad { background:#ffe0e0; color:#8a1c1c; }
.v9 .ft { --f-bg:#0a0c11; --f-lime:#5bb0ff; background-image:none; } .v9 .ft .ft-btn { border-radius:999px; color:#0a0c11 !important; } .v9 .ft-mark { -webkit-text-stroke:1.5px rgba(91,176,255,.4); font-family: var(--disp); }
@media (max-width: 1000px) { .h-hero-grid, .h-contact-g { grid-template-columns:1fr; gap: 40px; } .h-chat { height: 600px; } }
@media (max-width: 760px) { .v9 .h-wrap, .v9 .header-inner { padding: 0 20px; } .h-sec { padding: 64px 0; } .h-cards { grid-template-columns:1fr; } .h-thread .h-bub { max-width: 92%; font-size:1.08rem; } .h-msg { grid-template-columns: 1fr; gap:4px; } .h-msg time { text-align:left; margin-left:8px; } .h-link { grid-template-columns: 96px 1fr; } .h-r2 { grid-template-columns:1fr; } .h-form { padding: 22px 18px; } .h-chat { height: 560px; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { html.js [data-r] { opacity:1; transform:none; transition:none; } .h-chat-body .h-bub, .h-result { animation:none; } .h-typing i { animation:none; } }
