:root{
--stone-50:#fafaf9;
--stone-100:#f5f5f4;
--stone-200:#e7e5e4;
--stone-300:#d6d3d1;
--stone-400:#a8a29e;
--stone-500:#78716c;
--stone-600:#57534e;
--stone-700:#44403c;
--stone-800:#292524;
--stone-900:#1c1917;
--sage-400:#84a98c;
--sage-500:#6b8e5a;
--sage-600:#52796f;
--cream:#fefae0;
--warm-white:#faf9f6;
--font-display:'Playfair Display',Georgia,serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
--space-xs:0.5rem;
--space-sm:0.875rem;
--space-md:1.25rem;
--space-lg:2rem;
--space-xl:3.5rem;
--space-2xl:6rem;
--ease-out-expo:cubic-bezier(0.16,1,0.3,1);
--shadow-sm:0 1px 2px rgba(0,0,0,0.05);
--shadow-md:0 4px 6px -1px rgba(0,0,0,0.05);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.05);
--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.05)
}

*{
margin:0;
padding:0;
box-sizing:border-box
}

html{
font-size:16px;
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}

body{
font-family:var(--font-body);
font-size:1rem;
line-height:1.6;
color:var(--stone-800);
background:var(--warm-white);
overflow-x:hidden;
padding-bottom:80px;
font-weight:500
}

@media(min-width:768px){
body{
padding-bottom:0
}
}

.grain-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:9999;
opacity:0.03;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
}

.skip-link{
position:absolute;
top:-40px;
left:0;
background:var(--stone-900);
color:var(--warm-white);
padding:8px 16px;
z-index:10000;
transition:top 0.3s;
font-size:0.875rem;
font-weight:600
}

.skip-link:focus{
top:0
}

.site-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
padding:var(--space-md);
transition:all 0.4s var(--ease-out-expo);
background:rgba(250,249,246,0.95);
backdrop-filter:blur(10px)
}

.site-header.scrolled{
padding-top:var(--space-sm);
padding-bottom:var(--space-sm);
border-bottom:1px solid var(--stone-200)
}

.header-inner{
max-width:1400px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between
}

.brand-mark{
display:flex;
align-items:center;
gap:var(--space-sm);
text-decoration:none;
color:inherit
}

.brand-symbol{
width:40px;
height:40px;
background:var(--stone-800);
color:var(--warm-white);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-display);
font-size:1.25rem;
font-weight:700;
border-radius:50%
}

.brand-text{
display:flex;
flex-direction:column
}

.brand-name{
font-family:var(--font-display);
font-size:1.125rem;
font-weight:700;
letter-spacing:-0.02em;
line-height:1.2
}

.brand-tagline{
font-size:0.6875rem;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--stone-500);
font-weight:600
}

.primary-nav{
display:none
}

@media(min-width:768px){
.primary-nav{
display:block
}
}

.nav-list{
display:flex;
list-style:none;
gap:var(--space-lg)
}

.nav-anchor{
text-decoration:none;
color:var(--stone-600);
font-size:0.875rem;
font-weight:600;
position:relative;
padding:var(--space-xs) 0;
transition:color 0.3s
}

.nav-anchor::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background:var(--sage-600);
transition:width 0.3s var(--ease-out-expo)
}

.nav-anchor:hover{
color:var(--stone-900)
}

.nav-anchor:hover::after{
width:100%
}

.menu-trigger{
width:32px;
height:24px;
position:relative;
background:none;
border:none;
cursor:pointer;
z-index:101
}

@media(min-width:768px){
.menu-trigger{
display:none
}
}

.trigger-line{
position:absolute;
left:0;
width:100%;
height:2px;
background:var(--stone-800);
transition:all 0.3s var(--ease-out-expo)
}

.trigger-line:nth-child(1){
top:4px
}

.trigger-line:nth-child(2){
bottom:4px
}

.menu-trigger.active .trigger-line:nth-child(1){
top:50%;
transform:translateY(-50%) rotate(45deg)
}

.menu-trigger.active .trigger-line:nth-child(2){
bottom:50%;
transform:translateY(50%) rotate(-45deg)
}

.mobile-nav{
position:fixed;
top:0;
right:-100%;
width:80%;
max-width:360px;
height:100vh;
background:var(--warm-white);
z-index:99;
padding:100px var(--space-lg) var(--space-lg);
transition:right 0.5s var(--ease-out-expo);
border-left:1px solid var(--stone-200);
display:flex;
flex-direction:column;
justify-content:space-between
}

.mobile-nav.active{
right:0
}

.mobile-nav-list{
list-style:none
}

.mobile-link{
display:block;
padding:var(--space-md) 0;
text-decoration:none;
color:var(--stone-700);
font-family:var(--font-display);
font-size:1.5rem;
border-bottom:1px solid var(--stone-200);
transition:color 0.3s;
font-weight:600
}

.mobile-link:hover{
color:var(--sage-600)
}

.mobile-contact{
margin-top:auto;
padding-top:var(--space-lg);
border-top:1px solid var(--stone-200)
}

.mobile-tel{
display:block;
font-size:1.25rem;
font-weight:700;
color:var(--stone-900);
text-decoration:none;
margin-bottom:var(--space-xs)
}

.mobile-availability{
font-size:0.875rem;
color:var(--stone-500);
font-weight:600
}

.hero-section{
min-height:100vh;
padding:100px var(--space-lg) var(--space-xl);
display:flex;
flex-direction:column;
position:relative;
overflow:hidden
}

@media(min-width:768px){
.hero-section{
flex-direction:row;
align-items:center;
gap:var(--space-2xl);
padding-top:120px
}
}

.hero-visual{
position:relative;
margin-bottom:var(--space-xl)
}

@media(min-width:768px){
.hero-visual{
flex:1;
margin-bottom:0
}
}

.hero-image-wrapper{
position:relative;
border-radius:20px;
overflow:hidden;
aspect-ratio:4/3
}

@media(min-width:768px){
.hero-image-wrapper{
aspect-ratio:3/4
}
}

.hero-image{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(20%) contrast(1.05);
transition:filter 0.6s
}

.hero-image-wrapper:hover .hero-image{
filter:grayscale(0%) contrast(1)
}

.image-caption{
position:absolute;
bottom:var(--space-md);
left:var(--space-md);
background:rgba(255,255,255,0.95);
padding:var(--space-xs) var(--space-sm);
border-radius:20px;
font-size:0.75rem;
color:var(--stone-600);
backdrop-filter:blur(4px);
font-weight:600
}

.floating-stat{
position:absolute;
background:var(--warm-white);
padding:var(--space-sm) var(--space-md);
border-radius:16px;
box-shadow:var(--shadow-xl);
display:flex;
align-items:center;
gap:var(--space-sm);
animation:float 6s ease-in-out infinite
}

@media(max-width:767px){
.floating-stat{
display:none
}
}

#stat1{
top:-20px;
right:var(--space-sm)
}

#stat2{
bottom:20px;
left:-10px;
animation-delay:-3s
}

.stat-value{
font-family:var(--font-display);
font-size:1.5rem;
font-weight:700;
color:var(--sage-600);
line-height:1
}

.stat-label{
font-size:0.625rem;
color:var(--stone-500);
line-height:1.2;
text-transform:uppercase;
letter-spacing:0.05em;
font-weight:700
}

@keyframes float{
0%,100%{
transform:translateY(0)
}
50%{
transform:translateY(-10px)
}
}

.hero-content{
flex:1
}

.content-inner{
max-width:600px
}

.eyebrow{
display:inline-block;
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:0.15em;
color:var(--sage-600);
margin-bottom:var(--space-md);
font-weight:700
}

.hero-title{
font-family:var(--font-display);
font-size:clamp(2.5rem,8vw,4rem);
line-height:1.1;
margin-bottom:var(--space-lg);
font-weight:700;
letter-spacing:-0.03em
}

.title-line{
display:block
}

.title-line.accent{
color:var(--sage-600);
font-style:italic;
font-weight:600
}

.hero-lead{
font-size:1.125rem;
color:var(--stone-600);
margin-bottom:var(--space-lg);
line-height:1.7;
font-weight:500
}

.service-pills{
display:flex;
flex-wrap:wrap;
gap:var(--space-sm);
margin-bottom:var(--space-xl)
}

.pill{
padding:var(--space-xs) var(--space-md);
background:var(--stone-100);
border-radius:20px;
font-size:0.875rem;
color:var(--stone-700);
border:1px solid var(--stone-200);
transition:all 0.3s;
cursor:pointer;
font-weight:600
}

.pill:hover{
background:var(--stone-800);
color:var(--warm-white);
border-color:var(--stone-800)
}

.cta-cluster{
display:flex;
gap:var(--space-md);
flex-wrap:wrap
}

.btn-primary{
display:inline-flex;
align-items:center;
gap:var(--space-sm);
padding:var(--space-md) var(--space-lg);
background:var(--stone-800);
color:var(--warm-white);
text-decoration:none;
border-radius:50px;
font-weight:700;
font-size:0.9375rem;
transition:all 0.3s var(--ease-out-expo);
border:1px solid var(--stone-800);
min-height:48px;
min-width:48px
}

.btn-primary:hover{
background:var(--stone-700);
transform:translateY(-2px);
box-shadow:var(--shadow-lg)
}

.btn-arrow{
transition:transform 0.3s
}

.btn-primary:hover .btn-arrow{
transform:translateX(4px)
}

.btn-secondary{
display:inline-flex;
align-items:center;
padding:var(--space-md) var(--space-lg);
background:transparent;
color:var(--stone-700);
text-decoration:none;
border-radius:50px;
font-weight:600;
font-size:0.9375rem;
border:1px solid var(--stone-300);
transition:all 0.3s;
min-height:48px
}

.btn-secondary:hover{
border-color:var(--stone-800);
color:var(--stone-900)
}

.scroll-indicator{
position:absolute;
bottom:var(--space-lg);
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:var(--space-sm);
opacity:0.5;
display:none
}

@media(min-width:768px){
.scroll-indicator{
display:flex
}
}

.scroll-text{
font-size:0.6875rem;
text-transform:uppercase;
letter-spacing:0.1em;
font-weight:600
}

.scroll-line{
width:1px;
height:60px;
background:linear-gradient(to bottom,var(--stone-800),transparent);
animation:scrollPulse 2s infinite
}

@keyframes scrollPulse{
0%,100%{
transform:scaleY(1);
opacity:1
}
50%{
transform:scaleY(0.5);
opacity:0.5
}
}

section{
padding:var(--space-2xl) var(--space-lg)
}

.section-eyebrow{
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:0.15em;
color:var(--sage-600);
margin-bottom:var(--space-md);
display:block;
font-weight:700
}

.section-title{
font-family:var(--font-display);
font-size:clamp(2rem,5vw,3rem);
line-height:1.2;
font-weight:700;
letter-spacing:-0.02em;
color:var(--stone-900)
}

.about-section{
background:var(--stone-100)
}

.section-grid{
max-width:1200px;
margin:0 auto;
display:grid;
gap:var(--space-2xl);
align-items:center
}

@media(min-width:768px){
.section-grid{
grid-template-columns:1fr 1fr
}
}

.text-content{
order:2
}

@media(min-width:768px){
.text-content{
order:1
}
}

.visual-content{
order:1
}

@media(min-width:768px){
.visual-content{
order:2
}
}

.lead-text{
font-size:1.25rem;
color:var(--stone-700);
margin-bottom:var(--space-md);
line-height:1.6;
font-weight:600
}

.text-block p{
color:var(--stone-600);
margin-bottom:var(--space-md);
line-height:1.8;
font-weight:500
}

.feature-list{
margin-top:var(--space-xl);
display:flex;
flex-direction:column;
gap:var(--space-md)
}

.feature-item{
display:flex;
align-items:center;
gap:var(--space-sm);
font-size:0.9375rem;
color:var(--stone-700);
font-weight:600
}

.feature-icon{
width:24px;
height:24px;
color:var(--sage-600);
flex-shrink:0
}

.feature-icon svg{
width:100%;
height:100%
}

.image-stack{
position:relative;
max-width:400px;
margin:0 auto
}

.stack-image{
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow-xl)
}

.stack-image img{
width:100%;
height:auto;
display:block
}

.stack-card{
position:absolute;
bottom:-30px;
right:-20px;
background:var(--warm-white);
padding:var(--space-md);
border-radius:16px;
box-shadow:var(--shadow-lg);
max-width:200px;
border:1px solid var(--stone-200)
}

@media(max-width:480px){
.stack-card{
right:0;
bottom:-20px
}
}

.card-number{
display:block;
font-family:var(--font-display);
font-size:2rem;
font-weight:700;
color:var(--sage-600);
line-height:1;
margin-bottom:var(--space-xs)
}

.card-text{
font-size:0.8125rem;
color:var(--stone-600);
line-height:1.4;
font-weight:600
}

.services-section{
background:var(--warm-white)
}

.section-header{
text-align:center;
margin-bottom:var(--space-2xl)
}

.bento-grid{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:1fr;
gap:var(--space-md)
}

@media(min-width:768px){
.bento-grid{
grid-template-columns:repeat(2,1fr)
}
}

@media(min-width:1024px){
.bento-grid{
grid-template-columns:repeat(3,1fr)
}
}

.bento-card{
background:var(--stone-50);
border-radius:24px;
overflow:hidden;
cursor:pointer;
transition:all 0.4s var(--ease-out-expo);
border:1px solid var(--stone-200);
position:relative
}

.bento-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-xl);
border-color:var(--stone-300)
}

@media(min-width:768px){
.bento-card.large{
grid-column:span 2;
grid-row:span 2
}
}

@media(min-width:768px){
.bento-card.wide{
grid-column:span 2
}
}

.card-visual{
aspect-ratio:16/9;
overflow:hidden
}

.bento-card.large .card-visual{
aspect-ratio:16/10
}

@media(min-width:768px){
.bento-card.large .card-visual{
aspect-ratio:16/9
}
}

.card-visual img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.6s var(--ease-out-expo)
}

.bento-card:hover .card-visual img{
transform:scale(1.05)
}

.card-content{
padding:var(--space-lg)
}

.bento-card.large .card-content{
padding:var(--space-xl)
}

.card-meta{
font-size:0.6875rem;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--sage-600);
margin-bottom:var(--space-xs);
font-weight:700
}

.bento-card h3{
font-family:var(--font-display);
font-size:1.25rem;
margin-bottom:var(--space-sm);
color:var(--stone-900);
font-weight:700
}

@media(min-width:768px){
.bento-card.large h3{
font-size:1.75rem
}
}

.bento-card p{
font-size:0.9375rem;
color:var(--stone-600);
line-height:1.6;
margin-bottom:var(--space-md);
font-weight:500
}

.card-link{
font-size:0.875rem;
color:var(--sage-600);
font-weight:700;
display:inline-flex;
align-items:center;
gap:4px;
transition:gap 0.3s
}

.bento-card:hover .card-link{
gap:8px
}

.regions-section{
background:var(--stone-900);
color:var(--stone-100);
position:relative;
overflow:hidden
}

.regions-container{
max-width:1000px;
margin:0 auto;
position:relative;
z-index:1
}

.regions-header{
text-align:center;
margin-bottom:var(--space-2xl)
}

.regions-header .section-eyebrow{
color:var(--sage-400)
}

.regions-header .section-title{
color:var(--warm-white);
margin-bottom:var(--space-md)
}

.regions-desc{
color:var(--stone-400);
max-width:500px;
margin:0 auto;
font-weight:500
}

.regions-map{
position:relative;
height:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--space-md);
padding:var(--space-lg)
}

@media(min-width:768px){
.regions-map{
height:400px;
display:flex;
align-items:center;
justify-content:center
}
}

.region-node{
text-align:center;
cursor:pointer;
transition:transform 0.3s;
position:relative
}

@media(min-width:768px){
.region-node{
position:absolute
}
}

.region-node:hover{
transform:scale(1.1)
}

.node-marker{
width:12px;
height:12px;
background:var(--stone-600);
border-radius:50%;
margin:0 auto var(--space-xs);
position:relative;
transition:all 0.3s
}

.node-marker::after{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:24px;
height:24px;
border:1px solid var(--sage-400);
border-radius:50%;
opacity:0;
transition:opacity 0.3s
}

.region-node.active .node-marker,
.region-node:hover .node-marker{
background:var(--sage-400)
}

.region-node.active .node-marker::after,
.region-node:hover .node-marker::after{
opacity:1
}

.node-label{
font-size:0.875rem;
color:var(--stone-400);
white-space:nowrap;
display:block;
margin-top:var(--space-xs);
font-weight:600
}

@media(min-width:768px){
.node-label{
font-size:0.75rem
}
}

.region-node.active .node-label,
.region-node:hover .node-label{
color:var(--warm-white)
}

@media(min-width:768px){
.region-node[data-region="yarimca"]{
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

.region-node[data-region="yarimca"] .node-marker{
width:16px;
height:16px;
background:var(--sage-400)
}

.region-node[data-region="izmit"]{
top:30%;
left:60%
}

.region-node[data-region="derince"]{
top:25%;
left:70%
}

.region-node[data-region="körfez"]{
top:20%;
left:40%
}

.region-node[data-region="karamürsel"]{
bottom:20%;
left:30%
}

.region-node[data-region="gölcük"]{
bottom:25%;
right:30%
}

.region-node[data-region="hereke"]{
top:40%;
right:20%
}

.region-node[data-region="dilovası"]{
bottom:30%;
left:60%
}
}

.contact-section{
background:var(--cream)
}

.contact-layout{
max-width:1200px;
margin:0 auto;
display:grid;
gap:var(--space-2xl)
}

@media(min-width:768px){
.contact-layout{
grid-template-columns:1fr 1fr;
align-items:start
}
}

.contact-info-panel{
display:flex;
flex-direction:column;
gap:var(--space-xl)
}

.panel-header{
margin-bottom:var(--space-md)
}

.contact-methods{
display:flex;
flex-direction:column;
gap:var(--space-md)
}

.contact-method{
display:flex;
align-items:flex-start;
gap:var(--space-md);
padding:var(--space-md);
border-radius:16px;
text-decoration:none;
color:inherit;
transition:all 0.3s;
border:1px solid transparent;
min-height:48px
}

.contact-method:hover{
background:var(--warm-white);
border-color:var(--stone-200);
box-shadow:var(--shadow-md)
}

.contact-method.primary{
background:var(--stone-800);
color:var(--warm-white);
border-color:var(--stone-800)
}

.contact-method.primary:hover{
background:var(--stone-700);
transform:translateY(-2px);
box-shadow:var(--shadow-lg)
}

.method-icon{
width:48px;
height:48px;
border-radius:12px;
background:rgba(255,255,255,0.1);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0
}

.method-icon svg{
width:24px;
height:24px
}

.method-details{
display:flex;
flex-direction:column;
gap:4px
}

.method-label{
font-size:0.75rem;
text-transform:uppercase;
letter-spacing:0.05em;
opacity:0.7;
font-weight:600
}

.method-value{
font-size:1.125rem;
font-weight:700;
line-height:1.4;
word-break:break-word
}

.whatsapp-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-sm);
padding:var(--space-md);
background:#25d366;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:700;
margin-top:var(--space-md);
transition:all 0.3s;
width:100%;
min-height:48px
}

.whatsapp-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(37,211,102,0.3)
}

.whatsapp-btn svg{
width:20px;
height:20px
}

.contact-form-panel{
background:var(--warm-white);
padding:var(--space-xl);
border-radius:24px;
box-shadow:var(--shadow-lg);
border:1px solid var(--stone-200)
}

.inquiry-form h3{
font-family:var(--font-display);
font-size:1.5rem;
margin-bottom:var(--space-xl);
color:var(--stone-900);
font-weight:700
}

.form-field{
position:relative;
margin-bottom:var(--space-lg)
}

.form-field input,
.form-field select,
.form-field textarea{
width:100%;
padding:var(--space-sm) 0;
border:none;
border-bottom:1px solid var(--stone-300);
background:transparent;
font-family:inherit;
font-size:1rem;
color:var(--stone-800);
outline:none;
transition:border-color 0.3s;
min-height:48px;
font-weight:500
}

.form-field textarea{
resize:vertical;
min-height:80px
}

.form-field label{
position:absolute;
left:0;
top:var(--space-sm);
color:var(--stone-500);
pointer-events:none;
transition:all 0.3s;
font-size:1rem;
font-weight:500
}

.form-field input:focus~label,
.form-field input:not(:placeholder-shown)~label,
.form-field textarea:focus~label,
.form-field textarea:not(:placeholder-shown)~label{
top:-16px;
font-size:0.75rem;
color:var(--sage-600);
font-weight:600
}

.field-line{
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background:var(--sage-600);
transition:width 0.3s var(--ease-out-expo)
}

.form-field input:focus~.field-line,
.form-field textarea:focus~.field-line{
width:100%
}

.select-field select{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2378716c' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right center;
padding-right:20px;
cursor:pointer
}

.submit-btn{
width:100%;
padding:var(--space-md);
background:var(--stone-800);
color:var(--warm-white);
border:none;
border-radius:50px;
font-family:inherit;
font-size:1rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-sm);
transition:all 0.3s;
margin-top:var(--space-xl);
min-height:48px
}

.submit-btn:hover{
background:var(--stone-700);
transform:translateY(-2px);
box-shadow:var(--shadow-lg)
}

.submit-btn svg{
width:18px;
height:18px
}

.site-footer{
background:var(--stone-100);
padding:var(--space-xl) var(--space-lg);
border-top:1px solid var(--stone-200)
}

.footer-content{
max-width:1200px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:var(--space-lg);
align-items:center;
text-align:center
}

@media(min-width:768px){
.footer-content{
flex-direction:row;
justify-content:space-between;
text-align:left
}
}

.footer-brand{
display:flex;
align-items:center;
gap:var(--space-sm)
}

.footer-symbol{
width:32px;
height:32px;
background:var(--stone-800);
color:var(--warm-white);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-display);
font-weight:700
}

.footer-info{
display:flex;
flex-direction:column
}

.footer-info strong{
font-size:0.9375rem;
color:var(--stone-900);
font-weight:700
}

.footer-info span{
font-size:0.75rem;
color:var(--stone-500);
font-weight:600
}

.footer-nav{
display:flex;
gap:var(--space-lg);
flex-wrap:wrap;
justify-content:center
}

.footer-nav a{
text-decoration:none;
color:var(--stone-600);
font-size:0.875rem;
transition:color 0.3s;
font-weight:600
}

.footer-nav a:hover{
color:var(--stone-900)
}

.footer-legal{
font-size:0.75rem;
color:var(--stone-500);
font-weight:500
}

.action-bar{
position:fixed;
bottom:0;
left:0;
right:0;
background:rgba(250,249,246,0.98);
backdrop-filter:blur(10px);
border-top:1px solid var(--stone-200);
padding:var(--space-sm) var(--space-lg);
display:flex;
justify-content:center;
gap:var(--space-md);
z-index:90
}

@media(min-width:768px){
.action-bar{
display:none
}
}

.action-btn{
display:flex;
align-items:center;
gap:var(--space-sm);
padding:var(--space-sm) var(--space-lg);
border-radius:50px;
text-decoration:none;
font-weight:700;
font-size:0.9375rem;
transition:all 0.3s;
flex:1;
justify-content:center;
max-width:160px;
min-height:48px
}

.action-btn svg{
width:18px;
height:18px
}

.action-btn.call{
background:var(--stone-800);
color:var(--warm-white)
}

.action-btn.call:hover{
background:var(--stone-700)
}

.action-btn.whatsapp{
background:#25d366;
color:#fff
}

.action-btn.whatsapp:hover{
background:#128c7e
}

.detail-modal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:1000;
display:flex;
align-items:flex-end;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.3s
}

.detail-modal.active{
opacity:1;
pointer-events:all
}

.modal-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,0.5);
backdrop-filter:blur(4px)
}

.modal-sheet{
background:var(--warm-white);
width:100%;
max-width:600px;
max-height:80vh;
border-radius:24px 24px 0 0;
padding:var(--space-xl);
position:relative;
transform:translateY(100%);
transition:transform 0.4s var(--ease-out-expo);
overflow-y:auto
}

.detail-modal.active .modal-sheet{
transform:translateY(0)
}

.modal-close{
position:absolute;
top:var(--space-md);
right:var(--space-md);
width:40px;
height:40px;
border-radius:50%;
border:1px solid var(--stone-200);
background:transparent;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.3s;
min-height:44px;
min-width:44px
}

.modal-close:hover{
background:var(--stone-100)
}

.modal-close svg{
width:20px;
height:20px;
color:var(--stone-600)
}

.blog-article{
max-width:800px;
margin:0 auto;
padding:120px var(--space-lg) var(--space-2xl)
}

.article-header{
margin-bottom:var(--space-xl)
}

.article-meta{
display:flex;
gap:var(--space-md);
align-items:center;
flex-wrap:wrap;
margin-bottom:var(--space-md);
font-size:0.875rem;
color:var(--stone-500);
font-weight:600
}

.category{
background:var(--stone-200);
padding:4px 12px;
border-radius:20px;
font-size:0.75rem;
font-weight:700;
color:var(--stone-700);
text-transform:uppercase;
letter-spacing:0.05em
}

.article-title{
font-family:var(--font-display);
font-size:clamp(1.75rem,5vw,2.5rem);
line-height:1.2;
margin-bottom:var(--space-md);
color:var(--stone-900);
font-weight:700
}

.article-title strong{
color:var(--sage-600);
font-weight:700
}

.article-lead{
font-size:1.125rem;
color:var(--stone-600);
line-height:1.7;
margin-bottom:var(--space-lg);
font-weight:500
}

.article-content h2{
font-family:var(--font-display);
font-size:1.5rem;
margin:var(--space-xl) 0 var(--space-md);
color:var(--stone-900);
font-weight:700
}

.article-content h3{
font-size:1.125rem;
margin:var(--space-lg) 0 var(--space-sm);
color:var(--stone-800);
font-weight:700
}

.article-content p{
margin-bottom:var(--space-md);
color:var(--stone-600);
line-height:1.8;
font-weight:500
}

.article-content ul{
margin-bottom:var(--space-md);
padding-left:var(--space-lg);
color:var(--stone-600)
}

.article-content li{
margin-bottom:var(--space-xs);
line-height:1.6;
font-weight:500
}

.tip-box{
background:var(--cream);
border-left:4px solid var(--sage-500);
padding:var(--space-md);
margin:var(--space-lg) 0;
border-radius:0 12px 12px 0
}

.tip-box h3{
margin-bottom:var(--space-sm);
color:var(--stone-800);
font-size:1rem;
font-weight:700
}

.cta-box{
background:var(--stone-800);
color:var(--warm-white);
padding:var(--space-xl);
border-radius:24px;
text-align:center;
margin:var(--space-xl) 0
}

.cta-box h3{
margin-bottom:var(--space-sm);
font-family:var(--font-display);
font-size:1.5rem;
font-weight:700
}

.cta-box p{
margin-bottom:var(--space-lg);
opacity:0.9;
font-weight:500
}

.article-footer{
margin-top:var(--space-2xl);
padding-top:var(--space-xl);
border-top:1px solid var(--stone-200)
}

.related-posts{
margin-bottom:var(--space-xl)
}

.related-posts h4{
font-family:var(--font-display);
font-size:1.25rem;
margin-bottom:var(--space-md);
color:var(--stone-900);
font-weight:700
}

.related-grid{
display:grid;
gap:var(--space-md)
}

@media(min-width:768px){
.related-grid{
grid-template-columns:repeat(2,1fr)
}
}

.related-card{
background:var(--stone-50);
padding:var(--space-lg);
border-radius:16px;
text-decoration:none;
color:inherit;
transition:all 0.3s;
border:1px solid var(--stone-200)
}

.related-card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md);
border-color:var(--stone-300)
}

.related-card h5{
font-family:var(--font-display);
font-size:1.125rem;
margin-bottom:var(--space-xs);
color:var(--stone-900);
font-weight:700
}

.related-card p{
font-size:0.875rem;
color:var(--stone-600);
line-height:1.5;
font-weight:500
}

.author-box{
background:var(--stone-100);
padding:var(--space-md);
border-radius:12px;
margin-top:var(--space-lg);
font-size:0.9375rem;
color:var(--stone-600);
font-weight:500
}

@media print{
.site-header,
.action-bar,
.mobile-nav,
.scroll-indicator,
.grain-overlay{
display:none!important
}

body{
padding-bottom:0
}

.hero-section{
min-height:auto;
padding-top:20px
}
}