:root{
--primary:#1877f2;
--primary-dark:#0f5fc6;
--primary-soft:#eaf2ff;
--accent:#14b86e;
--accent-dark:#0b9255;
--warning:#f4a51c;
--bg:#eef2f7;
--surface:#ffffff;
--surface-2:#f8fafc;
--text:#172033;
--muted:#667085;
--border:#dfe5ec;
--shadow-sm:0 4px 14px rgba(15,23,42,.06);
--shadow-md:0 12px 30px rgba(15,23,42,.10);
--shadow-lg:0 25px 60px rgba(15,23,42,.16);
--radius-sm:12px;
--radius-md:18px;
--radius-lg:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:
radial-gradient(circle at top right,rgba(24,119,242,.12),transparent 32%),
linear-gradient(180deg,#f8fbff 0,#eef2f7 340px,#eef2f7 100%);
color:var(--text);
font-family:Arial,Tahoma,sans-serif;
line-height:1.65;
}
button,input,select{font:inherit}
.icon{
width:22px;height:22px;display:inline-block;vertical-align:middle;
fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto
}
.wrap{max-width:1180px;margin:auto;padding:22px 16px 40px}
.hero{
position:relative;
overflow:hidden;
background:
linear-gradient(135deg,rgba(24,119,242,.98),rgba(13,94,199,.98));
color:#fff;
border-radius:var(--radius-lg);
padding:42px 28px;
text-align:center;
box-shadow:var(--shadow-lg);
isolation:isolate
}
.hero:before,.hero:after{
content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);z-index:-1
}
.hero:before{width:280px;height:280px;top:-145px;right:-75px}
.hero:after{width:220px;height:220px;bottom:-135px;left:-60px}
.hero-icon{width:52px;height:52px;margin-bottom:12px}
.hero h1{margin:0 0 8px;font-size:36px;line-height:1.25}
.hero p{margin:0 auto;max-width:720px;font-size:18px;opacity:.95}
.langs{margin-top:18px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.langs a{
color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.34);
background:rgba(255,255,255,.10);border-radius:999px;padding:7px 14px;
transition:.2s ease
}
.langs a:hover{background:#fff;color:var(--primary)}
select,input{
width:100%;
min-height:50px;
padding:12px 14px;
border:1px solid var(--border);
border-radius:var(--radius-sm);
font-size:16px;
color:var(--text);
background:#fff;
transition:.2s ease
}
select:focus,input:focus{
outline:none;border-color:var(--primary);
box-shadow:0 0 0 4px rgba(24,119,242,.12)
}
.tabs-shell{
margin-top:22px;
background:rgba(255,255,255,.75);
backdrop-filter:blur(10px);
border:1px solid rgba(223,229,236,.85);
border-radius:var(--radius-md);
padding:9px;
box-shadow:var(--shadow-sm)
}
.tabs{
display:flex;gap:8px;overflow-x:auto;padding:0;
scrollbar-width:thin
}
.tab{
white-space:nowrap;
border:1px solid transparent;
background:transparent;
color:var(--muted);
min-height:50px;
padding:11px 16px;
border-radius:14px;
font-weight:800;
cursor:pointer;
display:flex;align-items:center;gap:8px;
transition:.2s ease
}
.tab:hover{background:var(--primary-soft);color:var(--primary)}
.tab.active{
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
box-shadow:0 8px 20px rgba(24,119,242,.24)
}
.calc{display:none;margin-top:18px}
.calc.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card{
background:var(--surface);
border:1px solid rgba(223,229,236,.95);
border-radius:var(--radius-lg);
padding:26px;
box-shadow:var(--shadow-md)
}
.card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
padding-bottom:18px;
margin-bottom:20px;
border-bottom:1px solid var(--border)
}
.card-title-wrap{display:flex;align-items:center;gap:14px}
.card-icon{
width:52px;height:52px;border-radius:16px;
display:grid;place-items:center;
color:var(--primary);
background:linear-gradient(135deg,#edf5ff,#dcecff);
flex:0 0 auto
}
.card-icon .icon{width:27px;height:27px}
.card h2{margin:0;font-size:25px;display:block}
.card-subtitle{margin:3px 0 0;color:var(--muted);font-size:14px}
.step-badge{
color:var(--primary);
background:var(--primary-soft);
padding:7px 11px;
border-radius:999px;
font-size:13px;
font-weight:800;
white-space:nowrap
}
.grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}
.field{
background:var(--surface-2);
border:1px solid #edf0f4;
border-radius:16px;
padding:14px
}
.field label{
display:flex;align-items:center;gap:7px;
font-weight:800;margin-bottom:8px;font-size:14px
}
.info-wrap{position:relative;display:inline-flex;align-items:center}
.info-btn{
width:26px;height:26px;border:0;border-radius:50%;
background:var(--primary-soft);color:var(--primary);
display:inline-grid;place-items:center;cursor:pointer;padding:0
}
.info-btn .icon{width:16px;height:16px}
.info-popover{
display:none;position:absolute;z-index:30;
inset-inline-start:0;top:34px;width:min(300px,78vw);
background:#111827;color:#fff;border-radius:13px;
padding:12px 14px;font-size:13px;font-weight:400;
box-shadow:var(--shadow-md);line-height:1.6
}
.info-popover.show{display:block}
.info-popover strong{display:block;margin-bottom:4px;color:#fff}
.info-popover ul{margin:7px 0 0;padding-inline-start:18px}
.info-popover li{margin:4px 0}
.actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:22px
}
.btn{
border:0;
border-radius:14px;
min-height:48px;
padding:12px 18px;
font-weight:800;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
transition:.2s ease
}
.btn:hover{transform:translateY(-1px)}
.primary{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
box-shadow:0 9px 18px rgba(24,119,242,.22)
}
.green{
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
color:#fff;
box-shadow:0 9px 18px rgba(20,184,110,.18)
}
.light{background:#edf1f5;color:#243047}
.result{
display:none;
margin-top:22px;
background:
linear-gradient(180deg,#f7fff9,#effaf3);
border:1px solid #bfe5cb;
border-radius:22px;
padding:22px;
position:relative;
overflow:hidden
}
.result:before{
content:"";position:absolute;inset-inline-end:-55px;top:-70px;
width:160px;height:160px;border-radius:50%;background:rgba(22,136,63,.07)
}
.result.show{display:block;animation:fadeUp .3s ease}
.result>strong{color:var(--accent-dark);font-size:15px}
.total{
font-size:36px;
line-height:1.2;
font-weight:900;
color:var(--accent-dark);
margin:8px 0 16px
}
.breakdown{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin:14px 0
}
.part{
background:#fff;
border:1px solid #dcebe1;
border-radius:15px;
padding:13px;
box-shadow:0 4px 12px rgba(22,136,63,.05)
}
.part b{display:block;color:var(--muted);font-size:13px;margin-bottom:3px}
.notice{
background:#fff9e9;
border:1px solid #f1d48e;
border-radius:14px;
padding:12px 14px;
margin-top:14px;
color:#6d5500
}
.result-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.result-actions .urgent-request{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;box-shadow:0 9px 18px rgba(234,88,12,.20)}
.seo{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:24px;
margin-top:20px;
box-shadow:var(--shadow-sm)
}
.seo h2{margin-top:0}
.toast{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
background:#111827;
color:#fff;
padding:11px 17px;
border-radius:999px;
display:none;
z-index:999;
box-shadow:var(--shadow-md)
}
@media(max-width:850px){
.breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
body{background:#f4f6f9}
.wrap{padding:0 9px 24px}
.hero{
border-radius:0 0 24px 24px;
margin:0 -9px;
padding:30px 16px 44px
}
.hero h1{font-size:26px}
.hero p{font-size:15px}
.tabs-shell{margin-top:14px;border-radius:16px}
.tab{min-height:46px;padding:10px 13px}
.card{padding:16px;border-radius:20px}
.card-head{align-items:center}
.card h2{font-size:21px}
.card-subtitle,.step-badge{display:none}
.grid,.breakdown{grid-template-columns:1fr}
.field{padding:12px}
.actions,.result-actions{flex-direction:column}
.btn{width:100%}
.total{font-size:28px}
}
.breadcrumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:14px 2px;color:var(--muted);font-size:14px}
.breadcrumbs a{color:var(--primary);text-decoration:none;font-weight:700}
.hero-search{max-width:680px;margin:20px auto 0;position:relative}
.hero-search input{padding-inline-start:48px;border:0;box-shadow:0 12px 30px rgba(0,0,0,.13)}
.hero-search .icon{position:absolute;inset-inline-start:16px;top:14px;color:var(--primary)}
.quick-keywords{display:flex;gap:9px;overflow-x:auto;padding:3px 0 8px;scrollbar-width:thin}
.keyword-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;color:#27344a;text-decoration:none;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:800}
.keyword-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.seo-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-top:20px;box-shadow:var(--shadow-sm)}
.seo-section h2{margin:0 0 9px;font-size:25px}.seo-section h3{margin:18px 0 8px}.seo-section p{margin:7px 0;color:#3c485c}
.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:15px}
.seo-card{border:1px solid var(--border);border-radius:17px;padding:16px;background:linear-gradient(180deg,#fff,#fafcff)}
.seo-card strong{display:block;margin-bottom:5px;color:var(--text)}.seo-card p{font-size:14px;margin:0;color:var(--muted)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:15px}
.step{position:relative;border:1px solid var(--border);border-radius:16px;padding:48px 13px 14px;background:#fff}
.step:before{counter-increment:step;content:counter(step);position:absolute;top:12px;inset-inline-start:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:900}
.faq-list{display:grid;gap:10px}.faq-item{border:1px solid var(--border);border-radius:15px;background:#fff;overflow:hidden}.faq-item summary{cursor:pointer;padding:15px 17px;font-weight:900;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';float:inline-end;color:var(--primary);font-size:22px;line-height:1}.faq-item[open] summary:after{content:'−'}.faq-answer{padding:0 17px 16px;color:#475467}
.ai-note{background:linear-gradient(135deg,#edf5ff,#f8fbff);border:1px solid #cfe1ff}
.mobile-app-nav{display:none}
@media(max-width:900px){.seo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
body{padding-bottom:72px}.seo-section{padding:17px;border-radius:19px}.seo-section h2{font-size:21px}.seo-grid,.steps{grid-template-columns:1fr}.quick-keywords{margin-inline:-8px;padding-inline:8px}.breadcrumbs{padding-inline:4px}
.mobile-app-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:998;left:0;right:0;bottom:0;padding:7px 7px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(15,23,42,.10);backdrop-filter:blur(12px)}
.mobile-app-nav a,.mobile-app-nav button{border:0;background:transparent;color:#667085;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:800;min-height:48px}.mobile-app-nav .active{color:var(--primary)}.mobile-app-nav .icon{width:21px;height:21px}
}
@media (max-width:680px){
html,body{max-width:100%;overflow-x:hidden}
body{
background:#f3f5f8;
padding-bottom:78px;
-webkit-tap-highlight-color:transparent;
}
.wrap{padding:0 0 20px;max-width:none}
.breadcrumbs,
.seo,
.seo-section,
.quick-keywords,
.service-links,
.langs,
.hero-icon,
.hero>p{display:none!important}
.hero{
margin:0;
padding:16px 14px 68px;
border-radius:0 0 24px 24px;
box-shadow:0 8px 24px rgba(24,119,242,.18);
text-align:start;
}
.hero h1{
margin:0 0 12px;
font-size:22px;
line-height:1.3;
font-weight:900;
}
.hero-search{margin:0;max-width:none}
.hero-search input{
min-height:46px;
padding:10px 44px 10px 13px;
border-radius:14px;
font-size:14px;
box-shadow:none;
}
[dir="ltr"] .hero-search input{padding:10px 13px 10px 44px}
.hero-search .icon{top:12px;width:20px;height:20px}
.tabs-shell{
position:sticky;
top:0;
z-index:80;
margin:10px 0 0;
padding:7px 8px;
border-width:0 0 1px;
border-radius:0;
background:rgba(255,255,255,.96);
box-shadow:0 5px 15px rgba(15,23,42,.06);
backdrop-filter:blur(14px);
}
.tabs{gap:7px;padding:0 2px 2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
min-height:42px;
padding:8px 11px;
border:1px solid #e6eaf0;
border-radius:12px;
background:#fff;
font-size:12px;
gap:6px;
}
.tab .icon{width:18px;height:18px}
.tab.active{box-shadow:none;border-color:transparent}
.calc{margin:10px 10px 0}
.card{
padding:0;
border:0;
border-radius:18px;
box-shadow:none;
background:transparent;
}
.card-head{
margin:0 0 9px;
padding:13px 14px;
border:1px solid var(--border);
border-radius:17px;
background:#fff;
box-shadow:0 3px 12px rgba(15,23,42,.05);
}
.card-icon{width:42px;height:42px;border-radius:13px}
.card-icon .icon{width:23px;height:23px}
.card h2{font-size:18px;line-height:1.3}
.card-subtitle,.step-badge{display:none!important}
.grid{display:grid;grid-template-columns:1fr;gap:8px}
.field{
padding:11px 12px;
border:1px solid #e4e8ee;
border-radius:15px;
background:#fff;
box-shadow:0 2px 8px rgba(15,23,42,.035);
}
.field label{font-size:13px;margin-bottom:6px;line-height:1.35}
.field input,.field select{
min-height:44px;
padding:9px 11px;
border-radius:11px;
font-size:16px;
background:#f9fafb;
}
.info-btn{width:24px;height:24px}
.info-popover{
position:fixed;
z-index:1005;
inset:auto 12px 88px!important;
width:auto;
max-height:42vh;
overflow:auto;
border-radius:17px;
padding:15px;
}
.actions{
position:sticky;
bottom:72px;
z-index:55;
display:grid;
grid-template-columns:1fr auto;
gap:8px;
margin:12px -2px 0;
padding:8px;
border:1px solid var(--border);
border-radius:16px;
background:rgba(255,255,255,.97);
box-shadow:0 -5px 20px rgba(15,23,42,.09);
backdrop-filter:blur(12px);
}
.actions .btn{width:auto;min-height:46px;padding:10px 14px;border-radius:12px;font-size:14px}
.actions .primary,.actions .green{width:100%}
.actions .light{min-width:46px;padding-inline:12px}
.result{
margin-top:10px;
padding:15px;
border-radius:18px;
box-shadow:0 4px 16px rgba(22,136,63,.06);
}
.result>strong{font-size:13px}
.total{font-size:27px;margin:6px 0 11px}
.breakdown{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}
.part{padding:10px;border-radius:12px;font-size:13px}
.part b{font-size:11px}
.notice{font-size:12px;padding:10px 11px;border-radius:12px}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.result-actions .btn{width:100%;min-height:43px;padding:9px 10px;font-size:12px}
.toast{bottom:86px;max-width:calc(100% - 24px);text-align:center;font-size:13px}
.mobile-app-nav{z-index:999}
}
@media (max-width:380px){
.hero h1{font-size:20px}
.tab{padding:8px 9px;font-size:11px}
.breakdown{grid-template-columns:1fr}
.result-actions{grid-template-columns:1fr}
}
.calc-feature-strip{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.calc-feature{
min-height:76px;
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:12px 14px;
display:flex;
align-items:center;
gap:10px;
box-shadow:0 3px 12px rgba(15,23,42,.04);
}
.calc-feature-icon{
width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;
background:var(--primary-soft);color:var(--primary);flex:0 0 auto;
}
.calc-feature-icon .icon{width:20px;height:20px}
.calc-feature strong{display:block;font-size:14px;color:var(--text)}
.calc-feature small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.calc-feature-cta{color:inherit;text-decoration:none;background:#f7fbff;border-color:#cfe1fb}
.mobile-calc-title{display:none}
.hero-search{
max-width:680px;margin:18px auto 0;
background:#fff;border-radius:16px;padding:5px 10px;
display:flex;align-items:center;gap:8px;
box-shadow:0 8px 22px rgba(2,32,71,.16)
}
.hero-search .icon{color:#7a8798;width:20px;height:20px}
.hero-search input{
border:0!important;box-shadow:none!important;background:transparent!important;
min-height:46px;padding:8px 4px!important
}
.tabs-shell{
position:sticky;top:0;z-index:45;
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px);
}
.tabs{scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto}
.card{box-shadow:0 8px 26px rgba(15,23,42,.07)}
.field{transition:border-color .15s ease,background .15s ease}
.field:focus-within{border-color:#bfd6f5;background:#fff}
.result.show{
display:block;
scroll-margin-top:88px;
border-radius:18px;
}
.result .total{
font-size:clamp(24px,4vw,34px);
letter-spacing:-.5px;
}
.result-actions{position:relative}
@media(max-width:680px){
body{background:#f4f6f9}
.wrap{padding:8px 8px 92px}
.breadcrumbs{display:none}
.hero{
border-radius:18px;
padding:20px 14px 18px;
box-shadow:none;
text-align:start
}
.hero-icon{width:36px;height:36px;margin-bottom:8px}
.hero h1{font-size:22px;margin-bottom:5px}
.hero p{font-size:13px;line-height:1.6;margin:0;max-width:none}
.hero-search{
margin-top:13px;border-radius:13px;padding:3px 9px;box-shadow:none
}
.hero-search input{min-height:42px;font-size:13px!important}
.langs{margin-top:10px;justify-content:flex-start}
.langs a{padding:5px 10px;font-size:11px}
.calc-feature-strip{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;margin:8px 0
}
.calc-feature{
min-height:60px;border-radius:13px;padding:8px 9px;gap:7px;box-shadow:none
}
.calc-feature-icon{width:32px;height:32px;border-radius:10px}
.calc-feature strong{font-size:11.5px}
.calc-feature small{font-size:9.5px}
.mobile-calc-title{
display:flex;align-items:center;justify-content:space-between;
margin:12px 2px 6px;padding:0 3px
}
.mobile-calc-title strong{font-size:15px}
.mobile-calc-title span{font-size:10px;color:var(--muted)}
.tabs-shell{
margin:0 -8px;
padding:7px 8px;
border-radius:0;
border-inline:0;
top:0;
box-shadow:0 4px 12px rgba(15,23,42,.06)
}
.tabs{gap:6px}
.tab{
min-height:43px;padding:8px 11px;border-radius:12px;font-size:11px;
background:#f1f4f8;border:1px solid transparent
}
.tab .icon{width:17px;height:17px}
.tab.active{box-shadow:none}
.calc{margin-top:8px}
.card{
border-radius:17px;
padding:14px 12px;
box-shadow:none;
border-color:#e5e9ef
}
.card-head{
padding-bottom:11px;margin-bottom:12px;gap:8px;align-items:center
}
.card-title-wrap{gap:9px}
.card-icon{
width:40px;height:40px;border-radius:12px
}
.card-icon .icon{width:21px;height:21px}
.card h2{font-size:17px}
.card-subtitle{font-size:10.5px;line-height:1.5}
.step-badge{font-size:10px;padding:5px 7px}
.grid{grid-template-columns:1fr 1fr;gap:8px}
.field{padding:9px;border-radius:12px}
.field label{font-size:11px;margin-bottom:5px;line-height:1.4}
.field input,.field select,
.field select,.field input{
min-height:42px!important;
border-radius:10px!important;
padding:8px 9px!important;
font-size:13px!important
}
.actions{
position:sticky;bottom:8px;z-index:20;
margin:13px -4px 0;
padding:6px;
border-radius:14px;
background:rgba(255,255,255,.95);
backdrop-filter:blur(10px);
box-shadow:0 8px 22px rgba(15,23,42,.10)
}
.actions .btn{flex:1;min-height:44px;border-radius:11px;padding:9px 8px;font-size:12px}
.result{margin-top:12px;padding:14px}
.breakdown{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.part{padding:9px;font-size:11px}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.result-actions .btn{width:100%;min-height:43px;padding:8px;font-size:11px}
.result-actions .urgent-request{grid-column:1/-1}
}
@media(max-width:390px){
.grid{grid-template-columns:1fr}
.calc-feature-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
:root{
--m-blue:#1769d2;
--m-blue-dark:#0e4f9e;
--m-bg:#f2f4f7;
--m-card:#fff;
--m-text:#101828;
--m-muted:#667085;
--m-line:#e4e7ec;
--m-soft:#f7f9fc;
--m-green:#159455;
}
html{background:var(--m-bg)}
body{
background:var(--m-bg)!important;
padding-bottom:82px!important;
}
.wrap{
max-width:none!important;
padding:0 0 92px!important;
}
.breadcrumbs{display:none!important}
.hero{
margin:0!important;
border-radius:0 0 20px 20px!important;
padding:15px 14px 14px!important;
text-align:start!important;
background:linear-gradient(180deg,#1769d2,#1156b3)!important;
box-shadow:none!important;
}
.hero:before,.hero:after{display:none!important}
.hero-icon{
width:30px!important;height:30px!important;margin-bottom:5px!important
}
.hero h1{
font-size:20px!important;
margin:0 0 3px!important;
line-height:1.35!important
}
.hero p{
font-size:11.5px!important;
line-height:1.55!important;
opacity:.92!important;
margin:0!important
}
.langs{display:none!important}
.hero-search{
margin:11px 0 0!important;
border-radius:13px!important;
padding:3px 9px!important;
background:#fff!important;
box-shadow:0 5px 14px rgba(0,0,0,.12)!important;
}
.hero-search input{
min-height:40px!important;
font-size:12.5px!important;
border:0!important;
box-shadow:none!important
}
.calc-feature-strip{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:5px!important;
margin:8px 7px 0!important;
}
.calc-feature{
min-height:62px!important;
padding:6px 3px!important;
border-radius:12px!important;
border:1px solid var(--m-line)!important;
box-shadow:none!important;
background:#fff!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
text-align:center!important;
gap:3px!important;
}
.calc-feature-icon{
width:28px!important;height:28px!important;border-radius:9px!important
}
.calc-feature strong{font-size:9.5px!important;line-height:1.2!important}
.calc-feature small{display:none!important}
.mobile-calc-title{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
margin:12px 10px 6px!important;
padding:0!important;
}
.mobile-calc-title strong{
font-size:15px!important;color:var(--m-text)!important
}
.mobile-calc-title span{
font-size:10px!important;color:var(--m-muted)!important
}
.tabs-shell{
position:static!important;
margin:0 7px 8px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
background:transparent!important;
backdrop-filter:none!important;
}
.tabs{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:7px!important;
overflow:visible!important;
padding:0!important;
}
.tab{
min-width:0!important;
min-height:78px!important;
width:100%!important;
padding:9px 5px!important;
border-radius:14px!important;
border:1px solid var(--m-line)!important;
background:#fff!important;
color:#344054!important;
box-shadow:none!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
text-align:center!important;
white-space:normal!important;
font-size:10px!important;
line-height:1.25!important;
}
.tab .icon{
width:25px!important;
height:25px!important;
color:var(--m-blue)!important;
}
.tab.active{
background:#eaf3ff!important;
color:var(--m-blue-dark)!important;
border-color:#b9d5f8!important;
box-shadow:0 0 0 1px rgba(23,105,210,.03)!important;
}
.calc{
margin:8px 7px 0!important;
}
.card{
padding:13px 11px!important;
border-radius:16px!important;
border:1px solid var(--m-line)!important;
background:#fff!important;
box-shadow:none!important;
}
.card-head{
padding-bottom:10px!important;
margin-bottom:11px!important;
gap:8px!important;
align-items:center!important;
}
.card-title-wrap{gap:8px!important}
.card-icon{
width:38px!important;height:38px!important;border-radius:11px!important
}
.card-icon .icon{width:20px!important;height:20px!important}
.card h2{
font-size:15px!important;
line-height:1.35!important
}
.card-subtitle{
font-size:9.7px!important;
line-height:1.45!important;
margin-top:2px!important
}
.step-badge{
font-size:9px!important;
padding:4px 6px!important
}
.grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
.field{
padding:8px!important;
border-radius:11px!important;
background:#f8fafc!important;
border:1px solid #edf0f4!important;
}
.field label{
font-size:10.2px!important;
margin-bottom:4px!important;
line-height:1.35!important
}
.field input,
.field select{
min-height:39px!important;
border-radius:9px!important;
padding:7px 8px!important;
font-size:12px!important;
background:#fff!important;
}
.actions{
position:sticky!important;
bottom:73px!important;
z-index:40!important;
display:grid!important;
grid-template-columns:1.15fr .85fr!important;
gap:7px!important;
margin:11px -2px 0!important;
padding:6px!important;
border:1px solid var(--m-line)!important;
border-radius:13px!important;
background:rgba(255,255,255,.97)!important;
box-shadow:0 8px 18px rgba(16,24,40,.10)!important;
backdrop-filter:blur(10px)!important;
}
.actions .btn{
width:100%!important;
min-height:42px!important;
padding:8px 7px!important;
border-radius:10px!important;
font-size:11px!important;
}
.result{
margin-top:11px!important;
padding:13px!important;
border-radius:15px!important;
background:#f6fff9!important;
border:1px solid #ccebd7!important;
box-shadow:none!important;
}
.result .total{
font-size:22px!important;
line-height:1.25!important;
margin:6px 0 10px!important;
}
.breakdown{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:6px!important;
}
.part{
padding:8px!important;
border-radius:10px!important;
font-size:10px!important;
background:#fff!important;
}
.notice{
font-size:9.5px!important;
line-height:1.5!important;
margin-top:8px!important;
}
.result-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:6px!important;
margin-top:9px!important;
}
.result-actions .urgent-request{grid-column:1/-1!important}
.result-actions .btn{
width:100%!important;
min-height:40px!important;
padding:7px!important;
font-size:10px!important;
border-radius:9px!important;
}
.toast{bottom:92px!important}
.calc-app-nav-v2{
position:fixed;
left:8px;
right:8px;
bottom:8px;
z-index:9999;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:5px;
padding:6px;
border:1px solid rgba(228,231,236,.95);
border-radius:17px;
background:rgba(255,255,255,.98);
box-shadow:0 14px 28px rgba(16,24,40,.16);
backdrop-filter:blur(12px);
}
.calc-app-nav-v2 a,
.calc-app-nav-v2 button{
border:0;
background:#f7f8fa;
color:#475467;
min-height:46px;
border-radius:11px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
font-size:8.7px;
font-weight:800;
text-decoration:none;
}
.calc-app-nav-v2 .nav-main{
background:var(--m-blue);
color:#fff;
}
.calc-app-nav-v2 .icon{width:17px;height:17px}
}
@media(max-width:390px){
.tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.tab{min-height:72px!important;font-size:9.3px!important}
.grid{grid-template-columns:1fr!important}
}
@media(min-width:681px){
.calc-app-nav-v2{display:none!important}
}
.hero{
position:relative;
overflow:hidden;
margin:0 auto 15px;
padding:38px 20px 32px;
color:#fff;
background:
linear-gradient(rgba(4,38,86,.40),rgba(7,74,150,.52)),
url('app/art.jpg') center center / cover no-repeat !important;
border-radius:0 0 28px 28px !important;
box-shadow:0 12px 30px rgba(7,63,135,.18) !important;
isolation:isolate;
text-align:center;
}
.hero:before,.hero:after{display:none!important}
.hero::after{
content:"";
display:block!important;
position:absolute;
inset:0;
z-index:-1;
border-radius:0;
background:linear-gradient(180deg,rgba(2,27,66,.05),rgba(2,37,86,.18));
}
.hero-icon{
width:48px!important;
height:48px!important;
margin-bottom:10px!important;
color:#fff!important;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.hero h1{
max-width:860px;
margin:0 auto!important;
color:#fff!important;
font-size:clamp(29px,4vw,43px)!important;
line-height:1.25!important;
font-weight:950!important;
text-shadow:0 2px 10px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.9);
}
.hero p{
max-width:730px!important;
margin:9px auto 0!important;
color:#fff!important;
font-size:14px!important;
line-height:1.8!important;
font-weight:700;
text-shadow:0 2px 8px rgba(0,0,0,.72);
}
.hero-search{
max-width:760px!important;
margin:18px auto 0!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
padding:5px 12px!important;
border-radius:17px!important;
background:#fff!important;
border:1px solid rgba(255,255,255,.75)!important;
box-shadow:0 14px 30px rgba(1,37,88,.22)!important;
}
.hero-search .icon{
color:#8a94a2!important;
width:19px!important;
height:19px!important;
}
.hero-search input{
width:100%!important;
height:47px!important;
min-height:47px!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
color:#111827!important;
font-size:13px!important;
font-weight:700!important;
padding:0!important;
}
.calc-hero-shortcuts{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:7px;
margin-top:12px;
}
.calc-hero-shortcut{
min-height:34px;
padding:0 12px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
color:#fff;
border:1px solid rgba(255,255,255,.24);
border-radius:999px;
background:rgba(0,24,61,.24);
font-size:10.5px;
font-weight:900;
text-decoration:none;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.calc-hero-shortcut:hover{color:#fff;background:rgba(255,255,255,.18)}
@media(max-width:680px){
.wrap{padding-top:0!important}
.breadcrumbs{display:none!important}
.hero{
margin:0!important;
padding:20px 12px 18px!important;
border-radius:0 0 23px 23px!important;
text-align:start!important;
}
.hero-icon{
width:34px!important;
height:34px!important;
margin-bottom:6px!important;
}
.hero h1{
margin:0!important;
font-size:25px!important;
}
.hero p{
max-width:none!important;
margin:6px 0 0!important;
font-size:11.5px!important;
line-height:1.65!important;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.hero-search{
margin-top:12px!important;
border-radius:15px!important;
padding:4px 9px!important;
}
.hero-search input{
height:43px!important;
min-height:43px!important;
font-size:12px!important;
}
.calc-hero-shortcuts{
justify-content:flex-start;
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:none;
margin-top:9px;
}
.calc-hero-shortcuts::-webkit-scrollbar{display:none}
.calc-hero-shortcut{
flex:0 0 auto;
min-height:31px;
padding:0 10px;
font-size:9.5px;
}
}