@font-face{
font-family: 'Inter';
src: url('/assets/fonts/Inter-Latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root{
--color-bg: #fdfdfb;
--color-text: #1a1a1a;
--color-text-muted: #666666;
--color-primary: #0C3B2E;
--color-accent: #1E7A55;
--color-secondary: #95CCB2;
--color-card: #f8f8f5;
--color-white: #ffffff;
--font-primary: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--container-max-width: 1200px;
--section-padding: 100px 20px;
--border-radius: 24px;
--transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
font-size: 16px;
}
body{
font-family: var(--font-primary);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
overflow-x: hidden;
}
a{
text-decoration: none;
color: inherit;
transition: var(--transition-smooth);
}
ul{
list-style: none;
}
img{
max-width: 100%;
display: block;
object-fit: cover;
border-radius: var(--border-radius);
}
.container{
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 20px;
}
.reveal{
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease,transform 0.7s ease;
}
.reveal.visible{
opacity: 1;
transform: none;
}
.reveal.stagger > *{
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease,transform 0.5s ease;
}
.reveal.stagger.visible > *{
opacity: 1;
transform: none;
}
.reveal.stagger.visible > *:nth-child(1){transition-delay: 0.05s}
.reveal.stagger.visible > *:nth-child(2){transition-delay: 0.15s}
.reveal.stagger.visible > *:nth-child(3){transition-delay: 0.25s}
.reveal.stagger.visible > *:nth-child(4){transition-delay: 0.35s}
@media (max-width: 768px),(prefers-reduced-motion: reduce){
.reveal,.reveal.stagger > *{opacity:1;transform:none;transition:none}
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 0;
background: rgba(253, 253, 251, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: padding 0.4s ease,box-shadow 0.4s ease;
}
.header.scrolled{
padding: 12px 0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.nav-container{
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 20px;
}
.nav-right{
display: flex;
align-items: center;
gap: 40px;
}
.logo{
display: flex;
align-items: center;
gap: 12px;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
}
.nav-links{
display: flex;
gap: 32px;
}
.nav-links a{
font-weight: 500;
color: var(--color-text-muted);
}
.nav-links a:hover,
.nav-links a.active{
color: var(--color-primary);
}
.nav-actions{
display: flex;
align-items: center;
gap: 16px;
}
.btn-nav{
padding: 9px 18px;
font-size: 0.8rem;
box-shadow: none;
white-space: nowrap;
}
.hamburger{
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 100px;
transition: background 0.2s ease;
}
.hamburger:hover{
background: rgba(12, 59, 46, 0.06);
}
.hamburger span{
display: block;
width: 22px;
height: 2px;
background-color: var(--color-primary);
border-radius: 2px;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),opacity 0.2s ease;
transform-origin: center;
}
.hamburger.active span:nth-child(1){
transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
opacity: 0;
transform: scaleX(0);
}
.hamburger.active span:nth-child(3){
transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu{
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: var(--color-white);
z-index: 1200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease,visibility 0.35s ease;
}
.preload .mobile-menu{transition: none}
.mobile-close{
position: absolute;
top: 24px;
right: 24px;
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
padding: 8px;
border-radius: 100px;
transition: background 0.2s ease,color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-close:hover{
background: rgba(12, 59, 46, 0.06);
color: var(--color-primary);
}
.mobile-menu.active{
opacity: 1;
visibility: visible;
}
.mobile-menu ul{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.mobile-menu ul a{
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--color-text-muted);
padding: 12px 0;
transition: color 0.2s ease,transform 0.2s ease;
}
.mobile-menu ul a:hover{
color: var(--color-primary);
transform: translateX(4px);
}
.mobile-menu .btn-primary{
margin-top: 48px;
}
.section-badge{
display: inline-block;
padding: 6px 16px;
background: #f0f0ed;
color: var(--color-text-muted);
border-radius: 100px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 24px;
}
.section-title{
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
color: var(--color-primary);
}
.section-description{
font-size: 1.25rem;
color: var(--color-text-muted);
max-width: 600px;
margin-bottom: 48px;
}
.btn-primary{
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--color-primary);
color: var(--color-white);
padding: 12px 22px;
border-radius: 100px;
font-weight: 600;
font-size: 0.9rem;
font-family: inherit;
border: none;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: 0 6px 20px rgba(12, 59, 46, 0.2);
}
.btn-primary:hover{
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(12, 59, 46, 0.28);
}
.btn-secondary{
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--color-white);
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
padding: 11px 22px;
border-radius: 100px;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition-smooth);
}
.btn-secondary:hover{
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-white{
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--color-white);
color: var(--color-primary);
padding: 12px 22px;
border-radius: 100px;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition-smooth);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.btn-white:hover{
background-color: var(--color-secondary);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.hero{
padding: 160px 0 80px;
text-align: center;
}
.hero-badge{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #f0f0ed;
border-radius: 100px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 32px;
}
.hero-badge .dot{
width: 7px;
height: 7px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.dot-green{background-color: #3dbe6c}
.dot-red{background-color: #e05252}
@keyframes pulse{
0%,100%{transform: scale(1);opacity: 1}
50%{transform: scale(1.4);opacity: 0.7}
}
.hero-title{
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 800;
line-height: 1;
margin-bottom: 32px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
color: var(--color-primary);
}
.hero-description{
font-size: clamp(1.1rem, 2vw, 1.5rem);
color: var(--color-text-muted);
max-width: 700px;
margin: 0 auto 48px;
}
.hero-gallery{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 80px;
}
.gallery-card{
aspect-ratio: 3/4;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: var(--transition-smooth);
}
.gallery-card:hover{
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.mock-site{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.mock-nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
flex-shrink: 0;
}
.mock-logo{
height: 5px;
border-radius: 3px;
width: 44px;
}
.mock-nav-links{
display: flex;
gap: 5px;
align-items: center;
}
.mock-nav-link{
height: 3px;
border-radius: 2px;
width: 18px;
}
.mock-nav-btn{
height: 10px;
border-radius: 5px;
width: 28px;
}
.mock-hero-area{
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 12px;
gap: 5px;
position: relative;
overflow: hidden;
}
.mock-line{
border-radius: 3px;
flex-shrink: 0;
}
.mock-line-lg{height: 9px;width: 80%}
.mock-line-md{height: 9px;width: 56%}
.mock-line-sm{height: 4px;width: 64%;margin-top: 2px}
.mock-cta{
height: 14px;
border-radius: 7px;
width: 52px;
margin-top: 6px;
flex-shrink: 0;
}
.mock-hero-text{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 10px 8px 10px 12px;
}
.mock-hero-img{
width: 44%;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.mock-content{
padding: 9px 12px 12px;
flex-shrink: 0;
}
.mock-cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.mock-list{
display: flex;
flex-direction: column;
gap: 5px;
}
.mock-list-item{
height: 20px;
border-radius: 4px;
}
.mock-grid-2x2{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
.mock-stats{
display: flex;
gap: 6px;
}
.mock-stat{
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.mock-stat-num{height: 10px;border-radius: 3px;width: 58%}
.mock-stat-label{height: 3px;border-radius: 2px;width: 80%}
.mock-item{
height: 40px;
border-radius: 5px;
}
.ms-1{background: #0f0a05}
.ms-1 .mock-nav{background: rgba(0,0,0,0.45);border-bottom: 1px solid rgba(255,255,255,0.05)}
.ms-1 .mock-logo{background: #d4845a}
.ms-1 .mock-nav-link{background: rgba(255,255,255,0.2)}
.ms-1 .mock-hero-area{background: linear-gradient(165deg, #1a0c04 0%, #2e1a08 60%, #3d2612 100%)}
.ms-1 .mock-hero-area::before{
content: '';
position: absolute;
top: 10%;left: 45%;
width: 90%;height: 55%;
border-radius: 50%;
background: radial-gradient(circle,rgba(196,88,40,0.2) 0%, transparent 65%);
pointer-events: none;
}
.ms-1 .mock-line-lg,.ms-1 .mock-line-md{background: rgba(255,255,255,0.9)}
.ms-1 .mock-line-sm{background: rgba(212,132,90,0.5)}
.ms-1 .mock-cta{background: #c45828;border-radius: 2px}
.ms-1 .mock-content{background: #0a0704;border-top: 1px solid rgba(255,255,255,0.04)}
.ms-1 .mock-item{background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.07)}
.ms-2{background: #f8f5ee}
.ms-2 .mock-nav{background: #f8f5ee;border-bottom: 1px solid rgba(0,0,0,0.07)}
.ms-2 .mock-logo{background: #2d5038}
.ms-2 .mock-nav-link{background: rgba(0,0,0,0.18)}
.ms-2 .mock-nav-btn{background: #2d5038}
.ms-2 .mock-hero-area{flex-direction: row;align-items: stretch;padding: 0;gap: 0;background: #f8f5ee}
.ms-2 .mock-hero-text{background: #f8f5ee}
.ms-2 .mock-hero-img{background: linear-gradient(170deg, #2d5038 0%, #3f7250 100%)}
.ms-2 .mock-hero-img::before{
content: '';
position: absolute;
bottom: 15%;left: 50%;
transform: translateX(-50%);
width: 55%;height: 55%;
border-radius: 50%;
background: rgba(255,255,255,0.08);
pointer-events: none;
}
.ms-2 .mock-line-lg,.ms-2 .mock-line-md{background: rgba(0,0,0,0.75)}
.ms-2 .mock-line-sm{background: rgba(0,0,0,0.28)}
.ms-2 .mock-cta{background: #2d5038;border-radius: 8px}
.ms-2 .mock-content{background: #f8f5ee}
.ms-2 .mock-list-item{background: rgba(0,0,0,0.07)}
.ms-2 .mock-list-item:first-child{background: rgba(45,80,56,0.12)}
.ms-3{background: #fff}
.ms-3 .mock-nav{background: #fff;border-bottom: 1px solid rgba(0,0,0,0.06)}
.ms-3 .mock-logo{background: #2244a8}
.ms-3 .mock-nav-link{background: rgba(0,0,0,0.15)}
.ms-3 .mock-hero-area{
background: linear-gradient(145deg, #0f1f5c 0%, #2244a8 60%, #3a68d8 100%);
justify-content: center;
align-items: center;
}
.ms-3 .mock-hero-area::before{
content: '';
position: absolute;
top: -20%;right: -15%;
width: 70%;height: 70%;
border-radius: 50%;
background: radial-gradient(circle,rgba(100,160,255,0.15) 0%, transparent 70%);
pointer-events: none;
}
.ms-3 .mock-line-lg,.ms-3 .mock-line-md{background: rgba(255,255,255,0.92)}
.ms-3 .mock-line-sm{background: rgba(255,255,255,0.32)}
.ms-3 .mock-cta{background: #fff;border-radius: 7px}
.ms-3 .mock-content{background: #fff}
.ms-3 .mock-item{background: #edf2ff;border: 1px solid rgba(34,68,168,0.1)}
.ms-4{background: #080807}
.ms-4 .mock-nav{background: rgba(255,255,255,0.02);border-bottom: 1px solid rgba(201,168,110,0.15)}
.ms-4 .mock-logo{background: #c9a86e}
.ms-4 .mock-nav-link{background: rgba(255,255,255,0.18)}
.ms-4 .mock-hero-area{background: linear-gradient(170deg, #0e0d0b 0%, #181610 100%)}
.ms-4 .mock-hero-area::before{
content: '';
position: absolute;
top: 50%;right: 6%;
transform: translateY(-50%);
width: 52%;height: 68%;
border-radius: 50%;
border: 1.5px solid rgba(201,168,110,0.18);
pointer-events: none;
}
.ms-4 .mock-hero-area::after{
content: '';
position: absolute;
top: 50%;right: 6%;
transform: translateY(-50%);
width: 35%;height: 46%;
border-radius: 50%;
border: 1px solid rgba(201,168,110,0.09);
pointer-events: none;
}
.ms-4 .mock-line-lg,.ms-4 .mock-line-md{background: rgba(255,255,255,0.85)}
.ms-4 .mock-line-sm{background: rgba(201,168,110,0.5)}
.ms-4 .mock-cta{background: #c9a86e;border-radius: 1px}
.ms-4 .mock-content{background: #0d0c0a;border-top: 1px solid rgba(201,168,110,0.12)}
.ms-4 .mock-stat-num{background: rgba(201,168,110,0.6)}
.ms-4 .mock-stat-label{background: rgba(255,255,255,0.14)}
.services-section{
padding: 120px 0;
}
.services-header{
margin-bottom: 80px;
}
.services-list{
display: flex;
flex-direction: column;
gap: 120px;
}
.services-cta{
margin-top: 72px;
text-align: center;
}
.service-item{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: sticky;
top: 100px;
background-color: var(--color-bg);
padding: 40px 0;
}
.service-image{
aspect-ratio: 16/10;
border-radius: var(--border-radius);
overflow: hidden;
}
.service-image img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.service-item:hover .service-image img{
transform: scale(1.03);
}
.service-number{
display: flex;
align-items: center;
gap: 16px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-accent);
margin-bottom: 20px;
}
.service-number::after{
content: '';
flex: 1;
height: 1px;
background: var(--color-accent);
opacity: 0.35;
}
.service-content h3{
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 24px;
color: var(--color-primary);
}
.service-content p{
font-size: 1.25rem;
color: var(--color-text-muted);
}
.benefits-section{
padding: 120px 0;
}
.bento-grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 300px);
gap: 24px;
margin-top: 60px;
}
.bento-card{
background-color: var(--color-card);
border-radius: var(--border-radius);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: box-shadow 0.4s ease;
overflow: hidden;
position: relative;
}
.bento-card:hover{
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.bento-grid.reveal.stagger > *{
transform: scale(0.88) translateY(28px);
transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.bento-grid.reveal.stagger.visible > *{
transform: scale(1) translateY(0);
}
.bento-icon svg *{
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.bento-grid.visible .bento-icon svg *{
stroke-dashoffset: 0;
transition: stroke-dashoffset 2s cubic-bezier(0.4,0,0.2,1);
}
.bento-grid.visible .bento-card:nth-child(1) .bento-icon svg *{transition-delay: 0.6s}
.bento-grid.visible .bento-card:nth-child(2) .bento-icon svg *{transition-delay: 0.85s}
.bento-grid.visible .bento-card:nth-child(3) .bento-icon svg *{transition-delay: 1.0s}
.bento-grid.visible .bento-card:nth-child(4) .bento-icon svg *{transition-delay: 1.15s}
.bento-card.large{
grid-column: span 3;
}
.bento-grid .bento-card:nth-child(2){grid-column: span 2}
.bento-grid .bento-card:nth-child(3){grid-column: span 2}
.bento-grid .bento-card:nth-child(4){grid-column: span 3}
.bento-card.dark{
background: var(--color-primary);
}
.bento-icon{
margin-bottom: 24px;
color: var(--color-accent);
flex-shrink: 0;
}
.bento-icon svg{
display: block;
}
.bento-card.dark .bento-icon{
color: rgba(255, 255, 255, 0.85);
}
.bento-card.dark h3{
color: var(--color-white);
}
.bento-card.dark p{
color: rgba(255, 255, 255, 0.65);
}
.bento-card h3{
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 16px;
color: var(--color-primary);
}
.bento-card p{
color: var(--color-text-muted);
font-size: 1.1rem;
}
.card-visual.privacy{
position: absolute;
bottom: -20px;
right: -20px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.workflow-section{
padding: 120px 0;
background: var(--color-primary);
}
.workflow-section .section-badge{
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
}
.workflow-section .section-title{
color: var(--color-white);
}
.workflow-section .section-description{
color: rgba(255, 255, 255, 0.6);
}
.workflow-timeline{
display: flex;
flex-direction: column;
margin-top: 64px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: 0 clamp(24px, 4vw, 80px);
}
.workflow-step-card{
display: grid;
grid-template-columns: 52px 1fr;
grid-template-rows: auto 1fr;
column-gap: 28px;
padding-bottom: 44px;
}
.workflow-step-card:last-child{
padding-bottom: 0;
}
.step-top{
grid-column: 1;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
align-items: center;
}
.step-circle{
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: var(--color-white);
font-size: 0.9rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-line{
flex: 1;
width: 1px;
background: rgba(255, 255, 255, 0.2);
margin-top: 10px;
}
.workflow-step-card h3{
grid-column: 2;
grid-row: 1;
font-size: 1.25rem;
font-weight: 800;
color: var(--color-white);
line-height: 1.2;
align-self: center;
margin: 0;
}
.workflow-step-card p{
grid-column: 2;
grid-row: 2;
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.7;
margin-top: 10px;
}
.pricing-section{
padding: 120px 0;
}
.pricing-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 60px;
align-items: start;
}
.pricing-card{
background-color: var(--color-white);
border: 1px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 48px;
display: flex;
flex-direction: column;
transition: var(--transition-smooth);
}
.pricing-card:hover{
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
}
.pricing-card.featured{
background-color: var(--color-primary);
color: var(--color-white);
border: none;
position: relative;
transform: scale(1.05);
}
.pricing-card.featured:hover{
transform: scale(1.05) translateY(-10px);
}
.pricing-card.featured .price,
.pricing-card.featured h3{
color: var(--color-white);
}
.pricing-card.featured .badge{
position: absolute;
top: 24px;
right: 24px;
background-color: var(--color-secondary);
color: var(--color-primary);
padding: 4px 12px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 700;
}
.pricing-card h3{
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 16px;
color: var(--color-primary);
}
.pricing-card .price{
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 6px;
color: var(--color-primary);
}
.pricing-note{
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: 28px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
.pricing-card.featured .pricing-note{
color: rgba(255, 255, 255, 0.55);
}
.pricing-card .price sup{
font-size: 1rem;
font-weight: 600;
vertical-align: super;
}
.pricing-footnote{
margin-top: 24px;
font-size: 0.8rem;
color: var(--color-text-muted);
text-align: center;
}
.pricing-card ul{
margin-bottom: 40px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.pricing-card li{
font-weight: 500;
padding-left: 24px;
position: relative;
}
.pricing-card li::before{
content: '✓';
position: absolute;
left: 0;
font-weight: 700;
color: var(--color-accent);
}
.pricing-card.featured li::before{
color: var(--color-secondary);
}
.testimonials-section{
padding: 120px 0;
background-color: var(--color-card);
}
.testimonials-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 60px;
}
.testimonial-card{
background: var(--color-white);
padding: 48px;
border-radius: var(--border-radius);
font-style: italic;
font-size: 1.25rem;
transition: var(--transition-smooth);
}
.testimonial-card:hover{
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}
.testimonial-stars{
font-size: 1.1rem;
color: var(--color-accent);
letter-spacing: 2px;
margin-bottom: 20px;
font-style: normal;
}
.testimonial-card .client{
margin-top: 24px;
font-weight: 700;
font-style: normal;
color: var(--color-primary);
}
.about-section{
padding: 120px 0;
background-color: var(--color-bg);
}
.about-header{
margin-bottom: 64px;
}
.about-header-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
margin-top: 20px;
}
.about-avatar{
width: 240px;
height: 240px;
border-radius: 38%;
overflow: hidden;
flex-shrink: 0;
}
.about-avatar img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
filter: brightness(1.15) grayscale(1);
}
.about-body{
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: start;
margin-bottom: 64px;
}
.about-headline{
font-size: clamp(3rem, 6vw, 5.5rem);
font-weight: 800;
color: var(--color-primary);
line-height: 1;
}
.about-headline em{
font-style: italic;
color: var(--color-accent);
}
.about-bio p{
font-size: 1.05rem;
color: var(--color-text-muted);
line-height: 1.85;
margin-bottom: 20px;
}
.about-intro-text{
font-size: 1.15rem !important;
color: var(--color-text) !important;
font-weight: 500;
}
.about-quote{
position: relative;
padding: 36px 36px 36px 48px;
background: var(--color-card);
border-radius: var(--border-radius);
font-style: italic;
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: var(--color-primary);
font-weight: 600;
line-height: 1.6;
}
.about-quote::before{
content: '\201C';
position: absolute;
top: 12px;
left: 20px;
font-size: 5rem;
color: var(--color-secondary);
opacity: 0.5;
font-family: Georgia,serif;
line-height: 1;
}
.about-stats{
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid #e0e0db;
border-radius: var(--border-radius);
overflow: hidden;
}
.stat-item{
padding: 36px 28px;
display: flex;
flex-direction: column;
gap: 8px;
border-right: 1px solid #e0e0db;
transition: background 0.3s ease;
}
.stat-item:last-child{
border-right: none;
}
.stat-item:hover{
background: var(--color-card);
}
.stat-number{
font-size: 2rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
}
.stat-label{
font-size: 0.82rem;
color: var(--color-text-muted);
font-weight: 500;
}
.cta-banner{
padding: 120px 0;
}
.cta-card{
background-color: var(--color-primary);
border-radius: var(--border-radius);
padding: 80px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: center;
color: var(--color-white);
overflow: hidden;
position: relative;
}
.cta-content h2{
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
}
.cta-content p{
font-size: 1.25rem;
margin-bottom: 48px;
opacity: 0.8;
}
.cta-visual{
display: flex;
align-items: center;
justify-content: center;
}
.cta-circles{
position: relative;
width: 240px;
height: 240px;
}
.circle{
position: absolute;
border-radius: 50%;
border: 1px solid rgba(173, 188, 159, 0.25);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle.c1{
width: 100px;
height: 100px;
background: rgba(173, 188, 159, 0.15);
}
.circle.c2{
width: 170px;
height: 170px;
}
.circle.c3{
width: 240px;
height: 240px;
}
.faq-section{
padding: var(--section-padding);
background: var(--color-card);
}
.faq-header{
max-width: 600px;
margin-bottom: 60px;
}
.faq-list{
max-width: 800px;
}
.faq-item{
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.faq-item:first-child{
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.faq-question{
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 28px 0;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-primary);
list-style: none;
user-select: none;
}
.faq-question::-webkit-details-marker{
display: none;
}
.faq-question:hover{
color: var(--color-accent);
}
.faq-icon{
flex-shrink: 0;
color: var(--color-accent);
transition: transform 0.3s ease;
}
details[open] .faq-icon{
transform: rotate(180deg);
}
details[open] .faq-question{
color: var(--color-accent);
}
.faq-answer{
padding-bottom: 28px;
}
.faq-answer p{
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1.7;
max-width: 680px;
}
.contact-section{
padding: 120px 0;
background-color: var(--color-bg);
}
.contact-grid{
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
align-items: start;
}
.contact-info .section-title{
font-size: clamp(2rem, 4vw, 3rem);
}
.contact-intro{
font-size: 1.15rem;
color: var(--color-text-muted);
margin-bottom: 48px;
line-height: 1.7;
}
.contact-details{
display: flex;
flex-direction: column;
gap: 28px;
}
.contact-item{
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-label{
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
}
.contact-item a,
.contact-item span:not(.contact-label){
font-size: 1.05rem;
font-weight: 500;
color: var(--color-primary);
}
.contact-item a:hover{
text-decoration: underline;
}
.contact-form{
display: flex;
flex-direction: column;
gap: 20px;
background: var(--color-white);
padding: 48px;
border-radius: var(--border-radius);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
}
.form-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group{
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label{
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
}
.form-group input,
.form-group textarea{
width: 100%;
padding: 14px 18px;
background: var(--color-bg);
border: 1.5px solid #e0e0db;
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
color: var(--color-text);
transition: border-color 0.2s ease,box-shadow 0.2s ease;
outline: none;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
color: #aaa;
}
.form-group input:focus,
.form-group textarea:focus{
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(30, 122, 85, 0.12);
}
.contact-form .btn-primary{
align-self: flex-start;
}
.contact-form .btn-primary:disabled{
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.form-message{
font-size: 0.9rem;
font-weight: 500;
padding: 12px 16px;
border-radius: 8px;
display: none;
}
.form-message:not(:empty){
display: block;
}
.form-message.success{
background: #f0faf4;
color: var(--color-accent);
border: 1px solid #b6e8cc;
}
.form-message.error{
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.form-hidden{
display: none;
}
.form-consent{
margin-top: 4px;
}
.checkbox-label{
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
.checkbox-label input[type="checkbox"]{
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 2px;
accent-color: var(--color-primary);
cursor: pointer;
}
.checkbox-label span{
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.checkbox-label span a{
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.footer{
padding: 80px 0 40px;
background-color: #f8f8f5;
}
.footer-top{
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 80px;
margin-bottom: 60px;
}
.footer-brand .logo{
margin-bottom: 24px;
}
.footer-brand p{
color: var(--color-text-muted);
margin-bottom: 24px;
}
.footer-links-title{
margin-bottom: 24px;
font-size: 1.1rem;
font-weight: 800;
}
.footer-links ul{
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a{
color: var(--color-text-muted);
}
.footer-links a:hover{
color: var(--color-primary);
}
.footer-bottom{
border-top: 1px solid #e0e0e0;
padding-top: 40px;
text-align: center;
color: var(--color-text-muted);
}
@media (max-width: 1024px){
.hero-gallery{grid-template-columns: 1fr 1fr}
.bento-grid{
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.bento-card.large{grid-column: span 2}
.bento-grid .bento-card:nth-child(2){grid-column: span 1}
.bento-grid .bento-card:nth-child(3){grid-column: span 1}
.bento-grid .bento-card:nth-child(4){grid-column: span 1}
.pricing-grid{grid-template-columns: 1fr;max-width: 480px}
.pricing-card.featured{transform: none}
.pricing-card.featured:hover{transform: translateY(-10px)}
.cta-card{grid-template-columns: 1fr;text-align: center}
.cta-circles{margin: 0 auto}
.contact-grid{grid-template-columns: 1fr;gap: 60px}
.about-header-row{flex-direction: column-reverse; align-items: flex-start}
.about-avatar{width: 180px; height: 180px}
.about-body{grid-template-columns: 1fr;gap: 48px}
}
@media (max-width: 768px){
.nav-links{display: none}
.btn-nav{display: none}
.hamburger{display: flex}
.service-item{
grid-template-columns: 1fr;
position: static;
}
.footer-top{grid-template-columns: 1fr;gap: 40px}
.testimonials-grid{grid-template-columns: 1fr}
.cta-card{padding: 48px 32px}
.cta-content h2{font-size: 2.5rem}
.contact-form{padding: 32px 24px}
.form-row{grid-template-columns: 1fr}
.bento-grid{grid-template-columns: 1fr}
.bento-card.large{grid-column: span 1}
.hero-gallery{grid-template-columns: 1fr 1fr}
.about-stats{grid-template-columns: 1fr 1fr}
}
@media (max-width: 480px){
.hero-gallery{grid-template-columns: 1fr 1fr;gap: 12px}
.hero-title{font-size: 2.8rem}
.cta-card{padding: 40px 24px}
.about-stats{grid-template-columns: 1fr 1fr}
}
.error-section{
min-height: 80vh;
display: flex;
align-items: center;
padding: 120px 0 80px;
}
.error-inner{
max-width: 540px;
}
.error-number{
font-size: clamp(6rem, 18vw, 12rem);
font-weight: 800;
line-height: 1;
color: var(--color-secondary);
margin-bottom: 16px;
letter-spacing: -0.04em;
}
.error-inner h1{
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 16px;
color: var(--color-text);
}
.error-inner p{
font-size: 1.1rem;
color: var(--color-text-muted);
margin-bottom: 32px;
line-height: 1.6;
}
.legal-header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 0;
background: rgba(253, 253, 251, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.legal-nav{
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 20px;
}
.legal-back-link{
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-muted);
transition: color 0.2s ease;
}
.legal-back-link:hover{
color: var(--color-primary);
}
.legal-section{
padding: 140px 0 100px;
}
.legal-container{
max-width: 760px;
margin: 0 auto;
padding: 0 20px;
}
.legal-page-title{
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
color: var(--color-primary);
margin-bottom: 16px;
line-height: 1.1;
}
.legal-page-meta{
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: 64px;
}
.legal-block{
margin-bottom: 64px;
}
.legal-crosslink{
margin-top: 48px;
}
.legal-link{
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-block h2{
font-size: 1.5rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e0e0db;
}
.legal-block h3{
font-size: 1rem;
font-weight: 700;
color: var(--color-text);
margin-top: 28px;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.legal-block p{
color: var(--color-text-muted);
line-height: 1.8;
margin-bottom: 14px;
}
.legal-block ul{
list-style: disc;
padding-left: 24px;
margin-bottom: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.legal-block ul li{
color: var(--color-text-muted);
line-height: 1.7;
}
.legal-block a{
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-block a:hover{
color: var(--color-primary);
}
.legal-footer{
padding: 40px 0;
background: #f8f8f5;
border-top: 1px solid #e0e0db;
text-align: center;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.legal-footer a{
color: var(--color-text-muted);
margin: 0 12px;
}
.legal-footer a:hover{
color: var(--color-primary);
}
.blog-hero{
padding: 160px 0 80px;
text-align: center;
}
.blog-hero .section-badge{
margin-bottom: 28px;
}
.blog-hero-title{
font-size: clamp(2.8rem, 7vw, 5.5rem);
font-weight: 800;
line-height: 1;
color: var(--color-primary);
margin-bottom: 24px;
}
.blog-hero-desc{
font-size: 1.15rem;
color: var(--color-text-muted);
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}
.blog-section{
padding: 80px 0 120px;
}
.blog-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 0;
}
.blog-card{
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid #e8e8e4;
border-radius: var(--border-radius);
overflow: hidden;
transition: var(--transition-smooth);
text-decoration: none;
color: inherit;
}
.blog-card:hover{
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
border-color: transparent;
}
.blog-card-image{
height: 220px;
overflow: hidden;
flex-shrink: 0;
}
.blog-card-image img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
border-radius: 0;
}
.blog-card:hover .blog-card-image img{
transform: scale(1.05);
}
.blog-card-content{
padding: 28px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card-meta{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.blog-cat{
display: inline-block;
padding: 3px 10px;
background: #f0f0ed;
color: var(--color-text-muted);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.blog-date{
font-size: 0.8rem;
color: var(--color-text-muted);
}
.blog-card-title{
font-size: 1.2rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 12px;
}
.blog-card-excerpt{
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.7;
flex: 1;
}
.blog-read-more{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-accent);
transition: gap 0.2s ease;
}
.blog-card:hover .blog-read-more{
gap: 10px;
}
.article-header{
padding: 140px 0 60px;
text-align: center;
}
.article-header-inner{
max-width: 760px;
margin: 0 auto;
padding: 0 20px;
}
.article-cat-date{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 24px;
}
.article-title{
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
color: var(--color-primary);
line-height: 1.1;
margin-bottom: 20px;
}
.article-subtitle{
font-size: 1.2rem;
color: var(--color-text-muted);
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.article-body{
max-width: 720px;
margin: 0 auto;
padding: 72px 20px 100px;
}
.article-lead{
font-size: 1.35rem;
color: var(--color-text);
line-height: 1.8;
font-weight: 400;
margin-bottom: 48px;
padding-bottom: 48px;
border-bottom: 1px solid #e8e8e4;
}
.article-body h2{
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 800;
color: var(--color-primary);
margin: 72px 0 20px;
line-height: 1.15;
letter-spacing: -0.02em;
}
.article-body h3{
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
margin: 40px 0 12px;
line-height: 1.3;
}
.article-body p{
font-size: 1.05rem;
color: var(--color-text-muted);
line-height: 1.85;
margin-bottom: 20px;
}
.article-body ul,.article-body ol{
margin: 0 0 24px 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.article-body li{
font-size: 1.05rem;
color: var(--color-text-muted);
line-height: 1.7;
padding-left: 24px;
position: relative;
}
.article-body ul li::before{
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
background: var(--color-accent);
border-radius: 50%;
}
.article-body a{
color: var(--color-accent);
text-decoration: underline;
text-decoration-color: rgba(30,122,85,0.35);
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
.article-body a:hover{
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
.nm-visual{
padding: 0 20px 56px;
}
.nm-visual-inner{
position: relative;
max-width: 900px;
margin: 0 auto;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 16px 48px rgba(12,59,46,0.12);
}
.nm-visual-inner img{
width: 100%;
height: auto;
display: block;
border-radius: 0;
}
.nm-visual-stats{
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
gap: 32px;
padding: 56px 36px 28px;
background: linear-gradient(to top, rgba(12,59,46,0.88) 0%, rgba(12,59,46,0.45) 60%, transparent 100%);
align-items: flex-end;
flex-wrap: wrap;
}
.nm-stat strong{
display: block;
font-size: 1.35rem;
font-weight: 800;
color: #fff;
line-height: 1.1;
}
.nm-stat span{
font-size: 0.75rem;
color: rgba(255,255,255,0.72);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.article-body blockquote{
margin: 48px 0;
padding: 0 0 0 24px;
position: relative;
font-size: 1.25rem;
color: var(--color-primary);
font-weight: 600;
font-style: italic;
line-height: 1.6;
border: none;
background: none;
border-radius: 0;
}
.article-body blockquote::before{
content: '\201C';
position: absolute;
left: -8px;
top: -24px;
font-size: 5rem;
color: var(--color-accent);
opacity: 0.4;
font-style: normal;
line-height: 1;
}
.related-posts{
padding: 80px 20px;
background: var(--color-card);
border-top: 1px solid rgba(0,0,0,0.06);
}
.related-posts-inner{
max-width: 1200px;
margin: 0 auto;
}
.related-posts-inner .related-posts-title{
text-align: center;
}
.related-posts-title{
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 40px;
}
.related-posts-grid{
display: grid;
grid-template-columns: repeat(3,minmax(0, 360px));
gap: 28px;
justify-content: center;
}
.related-posts-grid .blog-card-title{
font-size: 1.1rem;
}
@media (max-width: 1024px){
.related-posts-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 600px){
.related-posts-grid{grid-template-columns: 1fr}
.related-posts{padding: 60px 20px}
}
.article-cta-block{
max-width: 720px;
margin: 0 auto 120px;
padding: 0 20px;
}
@media (min-width: 1024px){
.article-cta-block{max-width: 960px}
}
.article-cta-inner{
background: var(--color-primary);
border-radius: var(--border-radius);
padding: 56px 64px;
text-align: center;
}
.article-cta-label{
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
margin-bottom: 12px;
}
.article-cta-heading{
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-white);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.article-cta-text{
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.65);
margin-bottom: 36px;
}
.article-nav-bottom{
max-width: 720px;
margin: 24px auto 80px;
padding: 0 20px;
text-align: center;
}
.article-cta-actions{
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.article-affiliate-note{
font-size: 0.78rem;
color: var(--color-text-muted);
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,0.08);
}
.article-cta-back{
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.article-cta-back:hover{
color: var(--color-primary);
}
@media (max-width: 1024px){
.blog-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
.blog-grid{grid-template-columns: 1fr}
.blog-card-image{height: 180px}
.article-header{min-height: 50vh}
.article-cta-inner{padding: 40px 32px}
}
@media (min-width: 1024px){
.article-body p,.article-body li{font-size: 1.15rem}
}
.cursor-dot{
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
background-color: var(--color-primary);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
opacity: 0;
transform: translate(0, 0);
transition: opacity 0.3s ease,width 0.25s ease,height 0.25s ease,background-color 0.25s ease;
will-change: transform;
margin-left: -5px;
margin-top: -5px;
}
.cursor-dot.visible{
opacity: 1;
}
.cursor-dot.expanded{
width: 32px;
height: 32px;
margin-left: -16px;
margin-top: -16px;
background-color: var(--color-accent);
opacity: 0.35;
}
@media (pointer: coarse){
.cursor-dot{display: none}
}
.back-to-top{
position: fixed;
bottom: 32px;
right: 32px;
width: 48px;
height: 48px;
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(12, 59, 46, 0.3);
z-index: 999;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s ease,transform 0.3s ease,background-color 0.2s ease;
pointer-events: none;
}
.back-to-top.visible{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover{
background: var(--color-accent);
transform: translateY(-3px);
}