/* Tavio service and guide pages. Shared brand typography, controls and themes live in site.css/theme.css. */
.service-page { --service-tint:#b0a7ff; --service-surface:linear-gradient(145deg,#11131b,#090a0e); }
.service-page .header-inner { gap:24px; }
.service-page .navigation { gap:25px; }
.service-page .navigation a { font-size:13px; }
.service-hero { position:relative; isolation:isolate; overflow:hidden; padding:125px 0 70px; }
.service-aura { position:absolute; z-index:-2; width:1100px; height:1000px; right:-420px; top:-410px; background:radial-gradient(ellipse,#555dce44 0%,#3c62aa24 32%,transparent 66%); filter:blur(30px); animation:service-aura 14s ease-in-out infinite alternate; }
.service-hero .grid-atmosphere { opacity:.5; background-size:88px 88px; mask-image:linear-gradient(#000,transparent 90%); }
.service-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--muted); margin-bottom:52px; }
.service-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.service-breadcrumb svg { width:12px; height:12px; opacity:.65; }
.service-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.service-hero-copy { min-width:0; }
.service-hero .hero-badge { font-size:10px; letter-spacing:.08em; animation:none; padding:8px 12px; }
.service-hero h1 { font-size:clamp(38px,4.5vw,65px); line-height:1.12; letter-spacing:-.045em; margin:25px 0 23px; }
.service-hero h1 span { color:var(--service-tint); }
.service-lead { max-width:520px; font-size:17px; color:var(--muted); line-height:1.65; }
.service-hero-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:32px; }
.service-hero-actions .button { font-size:14px; padding:15px 19px; min-height:58px; }
.service-hero-actions > span { color:var(--muted); font-size:11px; line-height:1.7; }
.service-visual { margin:0; min-width:0; min-height:430px; position:relative; border:1px solid #ffffff26; border-radius:24px; padding:28px; background:radial-gradient(ellipse at 100% 0,#534ad22e,transparent 75%),var(--service-surface); box-shadow:0 25px 100px #0005; animation:service-enter 1s var(--ease) both; }
.service-visual:before { content:''; position:absolute; z-index:-1; inset:15px -12px -14px 15px; border:1px solid #7c7fba33; border-radius:24px; transform:rotate(2deg); background:#4a4b7e08; }
.service-visual figcaption { display:flex; gap:12px; justify-content:space-between; align-items:center; }
.service-visual-label { font-size:9px; font-weight:500; letter-spacing:.09em; line-height:1.5; }
.service-example { color:var(--muted); font-size:9px; line-height:1.4; text-align:right; }
.service-icon { display:grid; place-items:center; border-radius:14px; width:48px; height:48px; color:var(--service-tint); border:1px solid #a394ff32; background:#9680ff0c; flex-shrink:0; }
.service-icon svg { width:25px; height:25px; stroke-width:1.2; }
.invoice-title { display:flex; align-items:center; gap:17px; margin-top:37px; margin-bottom:20px; }
.invoice-title small { display:block; font-size:9px; letter-spacing:.1em; color:var(--muted); margin-bottom:6px; }
.invoice-title strong { font-size:27px; font-weight:300; letter-spacing:-.035em; }
.invoice-track { padding:0; list-style:none; margin:0; }
.invoice-track li { display:flex; align-items:center; gap:15px; padding:18px 0; border-top:1px solid var(--line); }
.invoice-track li > span { font-size:10px; color:var(--muted); }
.invoice-track li > div { flex:1; }
.invoice-track strong { font-weight:400; font-size:14px; display:block; }
.invoice-track small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.invoice-track svg { width:19px; height:19px; color:var(--service-tint); }
.service-visual-note { font-size:10px; line-height:1.6; margin-top:12px; padding:13px 16px; border:1px solid #8e80c92e; background:#7460b50e; border-radius:9px; color:var(--muted); }
.follow-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:35px 0 27px; }
.follow-heading h2 { font-size:29px; }
.follow-heading > svg { width:42px; height:42px; color:var(--service-tint); stroke-width:1; }
.follow-row { display:flex; align-items:center; gap:12px; padding:22px 0; border-top:1px solid var(--line); }
.follow-row > div { flex:1; }
.follow-row strong { font-size:13px; font-weight:400; }
.follow-row small { display:block; font-size:10px; margin-top:5px; color:var(--muted); }
.follow-row > span:last-child { padding:6px 8px; background:#6659bd22; border-radius:6px; font-size:9px; color:var(--service-tint); }
.follow-dot { width:6px; height:6px; background:#8d80e2; border-radius:50%; flex-shrink:0; }
.follow-row:nth-of-type(3) .follow-dot { background:#69a9ca; }
.follow-row:nth-of-type(4) .follow-dot { background:#bcb3ea; }
.service-web { padding-bottom:35px; }
.web-mock { border:1px solid #c6c9d4; border-radius:12px; margin-top:28px; overflow:hidden; background:#f6f5f1; color:#21302b; }
.web-mock-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 21px; }
.web-mock-nav strong { font-weight:500; font-size:26px; letter-spacing:-.06em; }
.web-mock-nav span { font-size:9px; }
.web-mock-image { position:relative; height:230px; }
.web-mock-image img { width:100%; height:100%; object-fit:cover; }
.web-mock-image:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#101c20bb,transparent); }
.web-mock-image > div { position:absolute; z-index:1; left:22px; top:43px; color:#fff; }
.web-mock-image small { display:block; letter-spacing:.09em; font-size:8px; margin-bottom:15px; }
.web-mock-image strong { font-size:32px; line-height:1.14; font-weight:300; letter-spacing:-.045em; }
.web-mock-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 21px; font-size:9px; }
.web-mock-footer svg { width:15px; height:15px; }
.web-inquiry { display:flex; gap:15px; align-items:center; position:relative; margin:-28px 0 0 auto; width:max-content; max-width:92%; border:1px solid #665bd85c; border-radius:12px; background:#19152c; color:#f2efff; padding:17px 21px; box-shadow:0 12px 30px #0003; animation:service-inquiry 7s ease-in-out infinite; }
.web-inquiry svg { width:25px; color:#b3a4ff; }
.web-inquiry strong { display:block; font-weight:400; font-size:13px; }
.web-inquiry span { display:block; margin-top:5px; font-size:10px; color:#c0b8d7; }
.service-content { max-width:1240px; }
.service-section { padding-block:62px; }
.service-section-heading { display:grid; grid-template-columns:.65fr 1.5fr; gap:45px; align-items:start; margin-bottom:36px; }
.service-section-heading .eyebrow { color:var(--muted); padding-top:9px; font-size:10px; line-height:1.6; }
.service-section h2 { font-size:clamp(29px,3.1vw,42px); }
.service-prose p { font-size:16px; color:var(--muted); line-height:1.8; max-width:820px; }
.service-prose p + p { margin-top:20px; }
.service-prose a,.service-faq a { text-decoration:underline; text-underline-offset:4px; color:var(--text); }
.service-prose strong { font-weight:500; color:var(--text); }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:45px; }
.two-columns p + p { margin-top:0; }
.service-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-cards article { padding:29px; border:1px solid var(--line); border-radius:20px; background:var(--service-surface); }
.service-cards .service-icon { margin-bottom:25px; }
.service-cards h3 { font-size:25px; margin-bottom:15px; }
.service-cards p { color:var(--muted); font-size:14px; line-height:1.75; }
.service-price { display:grid; grid-template-columns:.65fr 1.5fr; gap:45px; padding:43px; border:1px solid #7c70df66; border-radius:22px; background:radial-gradient(ellipse at 0% 0%,#5a48b722,transparent 75%),var(--service-surface); margin:30px 0; }
.service-price .eyebrow { font-size:9px; color:var(--muted); }
.service-price-value { font-size:55px; line-height:1.2; letter-spacing:-.055em; margin-top:18px; white-space:nowrap; }
.service-price-value span { display:inline-block; font-size:11px; letter-spacing:0; color:var(--muted); }
.service-price > div > p:not(.eyebrow):not(.service-price-value):not(.service-small) { color:var(--muted); font-size:16px; line-height:1.75; }
.service-small { font-size:11px; color:var(--muted); line-height:1.7; margin-top:15px; }
.service-price .text-link { margin-top:22px; font-size:13px; }
.service-steps { list-style:none; padding:0; margin:0; }
.service-steps li { display:grid; grid-template-columns:.65fr 1.5fr; gap:45px; padding:28px 0; border-top:1px solid var(--line); }
.service-step-number { font-size:48px; line-height:1; letter-spacing:-.04em; color:var(--service-tint); }
.service-steps h3 { font-size:24px; margin-bottom:12px; }
.service-steps p { color:var(--muted); font-size:15px; line-height:1.75; max-width:750px; }
.service-faq { max-width:950px; margin-left:auto; }
.service-faq details { border-top:1px solid var(--line); padding:22px 0; }
.service-faq details:last-child { border-bottom:1px solid var(--line); }
.service-faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; font-size:19px; }
.service-faq summary::-webkit-details-marker { display:none; }
.service-faq summary svg { width:18px; height:18px; transform:rotate(90deg); color:var(--muted); transition:transform .2s; }
.service-faq details[open] summary svg { transform:rotate(-90deg); }
.service-faq details p { font-size:15px; color:var(--muted); line-height:1.75; max-width:790px; padding-top:18px; }
.service-related { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-related a { position:relative; padding:25px 25px 29px; border-top:1px solid var(--line); transition:border-color .25s; }
.service-related a:hover { border-color:var(--service-tint); }
.service-related a > span { color:var(--muted); font-size:9px; letter-spacing:.08em; }
.service-related h3 { font-size:23px; margin:23px 0 14px; }
.service-related p { font-size:13px; color:var(--muted); line-height:1.7; }
.service-related svg { position:absolute; right:25px; top:23px; width:20px; height:20px; color:var(--service-tint); }
.service-cta { display:flex; align-items:center; justify-content:space-between; gap:50px; border-top:1px solid var(--line); padding:70px 0 90px; }
.service-cta > div:first-child { max-width:680px; }
.service-cta .eyebrow { color:var(--muted); font-size:10px; margin-bottom:22px; }
.service-cta h2 { font-size:clamp(30px,3vw,42px); }
.service-cta p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.7; margin-top:20px; }
.service-cta > div:last-child { flex-shrink:0; }
.service-cta .button { font-size:14px; }
.service-email { display:block; text-align:center; margin-top:17px; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.service-footer .back-top svg { transform:rotate(-90deg); width:20px; }
.guide-visual-title { font-size:42px; letter-spacing:-.045em; line-height:1.15; margin:39px 0 31px; }
.guide-visual-title span { color:var(--service-tint); }
.guide-mini-list { list-style:none; padding:0; margin:0; }
.guide-mini-list li { padding:13px 0; border-top:1px solid var(--line); font-size:13px; }
.guide-mini-list span { color:var(--muted); font-size:10px; margin-right:17px; }
.guide-article > .service-section:first-child .service-prose { margin-left:auto; max-width:820px; }
.guide-messages { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.guide-message { border:1px solid var(--line); border-radius:20px; background:var(--service-surface); padding:30px; }
.guide-message .eyebrow { font-size:9px; color:var(--service-tint); margin-bottom:25px; }
.guide-message h3 { font-size:26px; margin-bottom:14px; }
.guide-message-context { font-size:13px; color:var(--muted); line-height:1.75; }
.guide-message blockquote { margin:25px 0 0; padding:0 0 0 20px; border-left:2px solid var(--service-tint); font-size:15px; }
.guide-message blockquote p { line-height:1.8; }
.guide-table-wrap { margin:28px 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.guide-table { border-collapse:collapse; width:100%; text-align:left; font-size:14px; }
.guide-table caption { text-align:left; padding:20px 24px; background:#7460b50e; color:var(--muted); font-size:11px; }
.guide-table th,.guide-table td { padding:18px 24px; border-top:1px solid var(--line); line-height:1.65; }
.guide-table th { font-weight:400; }
.guide-table td { color:var(--muted); }
.guide-table thead { color:var(--service-tint); }
:root[data-theme="light"] .service-page { --service-tint:#6555bc; --service-surface:linear-gradient(145deg,#fff,#f5f6fc); }
[data-theme="light"] .service-aura { background:radial-gradient(ellipse,#c3c3f699 0%,#b8d4f344 32%,transparent 66%); }
[data-theme="light"] .service-visual { border-color:#d5d8e8; box-shadow:0 25px 90px #42597e12; }
[data-theme="light"] .service-visual:before { border-color:#bcbde15c; background:#c7c8e512; }
[data-theme="light"] .web-inquiry { background:#fff; color:#2e2449; border-color:#ccc5ed; box-shadow:0 12px 30px #39456b1a; }
[data-theme="light"] .web-inquiry svg { color:#7866bd; }
[data-theme="light"] .web-inquiry span { color:#6d627e; }
[data-theme="light"] .service-price { border-color:#c3bce8; }
@keyframes service-aura { from { transform:translate(0,0); } to { transform:translate(-90px,65px); } }
@keyframes service-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes service-inquiry { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media(min-width:851px) and (max-width:1150px) { .service-page .navigation { gap:17px; } .service-page .navigation a { font-size:11px; } .service-page .header-inner { gap:17px; } .service-page .header-cta { font-size:11px; padding:13px; } .service-hero-grid { gap:36px; } .service-visual { padding:23px; } }
@media(max-width:950px) { .service-hero-grid { gap:35px; } .service-hero h1 { font-size:43px; } .service-lead { font-size:15px; } .service-visual { min-height:400px; padding:23px; } .service-visual figcaption { flex-wrap:wrap; gap:8px; } .service-example { text-align:left; } .invoice-title strong { font-size:24px; } .invoice-track small { font-size:10px; } .service-cards article { padding:23px; } .service-cards h3 { font-size:22px; } .service-cta { gap:30px; } .service-related a { padding-inline:12px; } .service-related h3 { font-size:21px; } .service-price { padding:32px; gap:32px; } .service-price-value { font-size:47px; } .guide-visual-title { font-size:35px; } }
@media(max-width:850px) { .service-page .navigation a { font-size:16px; } .service-page .header-inner { gap:12px; } .service-hero { padding-top:115px; } .service-breadcrumb { margin-bottom:33px; } .service-section-heading,.service-steps li { grid-template-columns:.5fr 1.5fr; gap:28px; } .service-hero-grid { grid-template-columns:1fr; gap:45px; } .service-hero-copy { max-width:680px; } .service-hero h1 { font-size:clamp(42px,7vw,60px); } .service-lead { max-width:590px; font-size:16px; } .service-visual { max-width:620px; width:100%; margin-left:auto; min-height:0; padding:30px; } .service-visual figcaption { flex-wrap:nowrap; } .service-section { padding-block:45px; } .two-columns { gap:30px; } .service-cta { align-items:flex-start; flex-direction:column; padding-block:50px 65px; } .service-cta > div:last-child { display:flex; align-items:center; flex-wrap:wrap; gap:25px; } .service-email { margin-top:0; } }
@media(max-width:620px) { .service-page .header-inner { gap:9px; } .service-page .brand img { width:80px; } .service-hero { padding-top:108px; padding-bottom:35px; } .service-breadcrumb { font-size:10px; gap:9px; margin-bottom:32px; } .service-hero h1 { font-size:clamp(35px,8.2vw,48px); margin-block:22px 19px; } .service-hero .hero-badge { font-size:8px; padding:7px 10px; } .service-lead { font-size:15px; line-height:1.7; } .service-hero-actions { gap:14px; margin-top:24px; } .service-hero-actions .button { font-size:13px; padding:13px 16px; min-height:54px; } .service-hero-actions > span { font-size:10px; } .service-hero-grid { gap:36px; } .service-visual { padding:23px 20px; border-radius:18px; } .service-visual:before { inset:12px -5px -10px 12px; border-radius:18px; transform:rotate(1deg); } .service-visual-label { font-size:8px; max-width:185px; } .service-example { font-size:8px; max-width:76px; text-align:right; } .invoice-title { margin-top:29px; margin-bottom:20px; } .invoice-title strong { font-size:25px; } .invoice-track li { padding:16px 0; gap:12px; } .invoice-track strong { font-size:13px; } .invoice-track small { font-size:10px; } .service-visual-note { font-size:9px; padding:12px; } .follow-heading { margin-top:27px; } .follow-heading h2 { font-size:26px; } .follow-heading > svg { width:34px; height:34px; } .follow-row { gap:9px; padding:19px 0; } .follow-row strong { font-size:12px; } .follow-row small { font-size:9px; } .follow-row > span:last-child { font-size:8px; padding:6px; } .web-mock-image { height:210px; } .web-mock-image strong { font-size:29px; } .web-mock-image > div { left:18px; } .web-inquiry { padding:13px 16px; gap:12px; margin-right:-6px; } .web-inquiry strong { font-size:12px; } .service-section { padding-block:33px; } .service-section-heading { display:block; margin-bottom:25px; } .service-section-heading .eyebrow { padding-top:0; margin-bottom:16px; font-size:9px; } .service-section h2 { font-size:30px; } .service-prose p { font-size:14px; line-height:1.8; } .two-columns { display:block; } .two-columns p + p { margin-top:18px; } .service-cards { grid-template-columns:1fr; gap:15px; } .service-cards article { padding:25px; } .service-cards .service-icon { width:43px; height:43px; margin-bottom:19px; } .service-cards h3 { font-size:25px; margin-bottom:13px; } .service-cards p { font-size:14px; } .service-price { display:block; padding:27px 24px; border-radius:18px; margin:17px 0; } .service-price-value { font-size:49px; margin-top:16px; } .service-price > div + div { margin-top:26px; } .service-price > div > p:not(.eyebrow):not(.service-price-value):not(.service-small) { font-size:14px; } .service-small { font-size:11px; } .service-steps li { grid-template-columns:45px 1fr; gap:22px; padding-block:24px; } .service-step-number { font-size:35px; } .service-steps h3 { font-size:23px; } .service-steps p { font-size:14px; } .service-faq summary { font-size:17px; line-height:1.5; gap:18px; } .service-faq details p { font-size:14px; } .service-related { grid-template-columns:1fr; gap:0; } .service-related a { padding:23px 0; } .service-related h3 { margin-top:16px; margin-bottom:9px; font-size:24px; } .service-related p { font-size:13px; max-width:90%; } .service-related svg { right:3px; } .service-cta { padding:43px 0 55px; gap:26px; } .service-cta h2 { font-size:31px; } .service-cta p:not(.eyebrow) { font-size:14px; } .service-cta > div:last-child { gap:20px; } .service-cta .button { min-height:56px; padding:16px 18px; font-size:13px; } .service-footer .footer-bottom { gap:16px; } .guide-visual-title { font-size:37px; margin-block:30px; } .guide-messages { grid-template-columns:1fr; gap:18px; } .guide-message { padding:25px; } .guide-message h3 { font-size:24px; } .guide-message blockquote { font-size:14px; padding-left:16px; } .guide-table { font-size:12px; } .guide-table th,.guide-table td { padding:14px 16px; } .guide-table th { width:36%; } .guide-table caption { padding:16px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .service-visual { animation:none; } }