/*
Theme Name: Netlook
Theme URI: https://netlook.org
Author: Netlook
Author URI: https://netlook.org
Description: Premium Webdesign Agentur Theme mit vollständigem Customizer
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: netlook
Tags: one-page, custom-colors, custom-logo, featured-images, theme-options
*/

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

:root{
--bg:#111;
--bg2:#1a1a1a;
--bg3:#222;
--text:#fff;
--text2:#c7c7c7;
--accent:#3fc1bf;
--accent-dark:#1a3a3a;
--radius:16px;
--transition:0.4s cubic-bezier(.4,0,.2,1);
--mouse-x:50%;
--mouse-y:50%
}

[data-theme="light"]{
--bg:#f5f5f7;
--bg2:#ffffff;
--bg3:#e8e8ed;
--text:#1d1d1f;
--text2:#6e6e73;
--accent:#3fc1bf
}

html{scroll-behavior:smooth;font-size:16px}

body{
font-family:'Inter',system-ui,-apple-system,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
transition:background-color var(--transition),color var(--transition)
}

/* Custom Cursor (Desktop only) */
@media(pointer:fine){
/*cursor disabled*/ *{cursor:auto!important}
}

.custom-cursor{
display:none!important
}

.cursor-inner{
width:8px;
height:8px;
background:var(--accent);
border-radius:50%;
transition:transform 0.1s ease
}

.cursor-outer{
width:40px;
height:40px;
border:2px solid var(--accent);
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition:all 0.15s ease;
opacity:0.8
}

.cursor-outer.hover{
transform:translate(-50%,-50%) scale(1.5);
background:rgba(63,193,191,0.1)
}

.cursor-outer.view::after{
content:'Ansehen';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:10px;
color:var(--accent);
font-weight:600;
letter-spacing:1px
}

body::before{
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(63,193,191,.06),transparent 40%);
pointer-events:none;
z-index:9999;
transition:opacity var(--transition)
}

a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:#5dd8d6}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Preloader */
#preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--bg);
z-index:100000;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:opacity .5s ease
}

#preloader.fade-out{opacity:0;pointer-events:none}

#preloader .pre-logo{
font-size:2rem;
font-weight:800;
color:var(--text);
margin-bottom:24px;
letter-spacing:-.02em
}

#preloader .pre-logo span{color:var(--accent)}

#preloader .pre-bar{
width:160px;
height:3px;
background:rgba(127,127,127,.1);
border-radius:4px;
overflow:hidden
}

#preloader .pre-bar-fill{
height:100%;
width:0;
background:var(--accent);
border-radius:4px;
animation:preload-fill 1.2s ease forwards
}

@keyframes preload-fill{to{width:100%}}

/* Scroll Progress */
#scroll-progress{
position:fixed;
top:0;
left:0;
height:3px;
background:var(--accent);
z-index:10001;
width:0;
transition:none
}

/* Back to Top */
#back-top{
position:fixed;
bottom:32px;
right:32px;
width:48px;
height:48px;
border-radius:50%;
background:var(--accent);
color:#000;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:9998;
opacity:0;
transform:translateY(20px);
transition:all var(--transition);
box-shadow:0 4px 20px rgba(63,193,191,.3)
}

#back-top.visible{opacity:1;transform:translateY(0)}
#back-top:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(63,193,191,.5)}
#back-top svg{width:20px;height:20px;fill:none;stroke:#000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Text Gradient Animation */
@keyframes gradient-shift{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

.text-gradient{
background:linear-gradient(90deg,var(--text),var(--accent),var(--text));
background-size:200% 200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:gradient-shift 4s ease infinite
}

/* Animations */
.reveal{
opacity:0;
transform:translateY(40px);
transition:opacity 0.8s cubic-bezier(.4,0,.2,1),transform 0.8s cubic-bezier(.4,0,.2,1)
}

.reveal.visible{opacity:1;transform:translateY(0)}

.reveal-left{
opacity:0;
transform:translateX(-60px);
transition:opacity 0.8s cubic-bezier(.4,0,.2,1),transform 0.8s cubic-bezier(.4,0,.2,1)
}

.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
opacity:0;
transform:translateX(60px);
transition:opacity 0.8s cubic-bezier(.4,0,.2,1),transform 0.8s cubic-bezier(.4,0,.2,1)
}

.reveal-right.visible{opacity:1;transform:translateX(0)}

/* Section Transition */
.section-transition{
opacity:1;
transform:translateY(0);
transition:opacity 0.6s ease,transform 0.6s ease
}

.section-transition.fade-out{
opacity:0;
transform:translateY(-20px)
}

/* ── NAV ── */
nav{
position:fixed;
top:0;
left:0;
width:100%;
z-index:10000;
background:rgba(17,17,17,.85);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid rgba(255,255,255,.08);
transition:all var(--transition)
}

[data-theme="light"] nav{
background:rgba(245,245,247,.85);
border-bottom:1px solid rgba(0,0,0,.08)
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:64px;
max-width:1200px;
margin:0 auto;
padding:0 24px
}

.nav-logo{
font-size:1.4rem;
font-weight:700;
color:var(--text);
letter-spacing:-.02em
}

.nav-logo span{color:var(--accent)}

.nav-links{
display:flex;
align-items:center;
gap:32px;
list-style:none
}

.nav-links a{
color:var(--text2);
font-size:.875rem;
font-weight:500;
transition:color var(--transition);
position:relative
}

.nav-links a:not(.btn)::after{
content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:2px;
background:var(--accent);
transition:width var(--transition)
}

.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn).active::after{width:100%}
.nav-links a.active{color:var(--text)}

/* Theme Toggle */
.theme-toggle{
width:48px;
height:28px;
border-radius:14px;
border:none;
background:var(--bg3);
position:relative;
cursor:pointer;
transition:all var(--transition);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 6px
}

.theme-toggle::before{
content:'';
position:absolute;
width:20px;
height:20px;
border-radius:50%;
background:var(--accent);
left:4px;
transition:all var(--transition);
box-shadow:0 2px 4px rgba(0,0,0,.2)
}

[data-theme="light"] .theme-toggle::before{
left:24px
}

.theme-toggle svg{
width:14px;
height:14px;
fill:var(--text2);
transition:all var(--transition);
z-index:1
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 24px;
border-radius:980px;
font-size:.875rem;
font-weight:600;
border:none;
cursor:pointer;
transition:all var(--transition);
text-decoration:none;
position:relative;
overflow:hidden
}

.btn-primary{
background:var(--accent);
color:#000
}

.btn-primary:hover{
background:#5dd8d6;
color:#000;
transform:scale(1.04)
}

.btn-outline{
border:1.5px solid rgba(127,127,127,.25);
color:var(--text);
background:transparent
}

.btn-outline:hover{
border-color:var(--accent);
color:var(--accent)
}

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.3);
transform:scale(0);
animation:ripple-anim .6s ease-out
}

@keyframes ripple-anim{to{transform:scale(4);opacity:0}}

.hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:4px
}

.hamburger span{
display:block;
width:22px;
height:2px;
background:var(--text);
border-radius:2px;
transition:all var(--transition)
}

.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{
position:fixed;
top:64px;
left:0;
width:100%;
height:calc(100vh - 64px);
background:rgba(17,17,17,.98);
backdrop-filter:blur(20px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:32px;
opacity:0;
pointer-events:none;
transform:translateY(-10px);
transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
z-index:999
}

[data-theme="light"] .mobile-menu{
background:rgba(245,245,247,.98)
}

.mobile-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.mobile-menu a{color:var(--text);font-size:1.25rem;font-weight:500}

/* ── HERO ── */
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 24px 80px;
background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
position:relative;
overflow:hidden
}

#hero-canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0
}

.hero::before{
content:'';
position:absolute;
width:600px;
height:600px;
border-radius:50%;
background:radial-gradient(circle,rgba(63,193,191,.12) 0%,transparent 70%);
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:0
}

.hero-content{max-width:820px;position:relative;z-index:1}

.hero-sub{
font-size:clamp(.875rem,1.5vw,1.125rem);
font-weight:500;
color:var(--accent);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:16px
}

.hero h1{
font-size:clamp(2.25rem,5.5vw,4.5rem);
font-weight:800;
letter-spacing:-.03em;
line-height:1.1;
margin-bottom:24px;
min-height:1.2em
}

.typing-cursor{
display:inline-block;
width:3px;
height:1em;
background:var(--accent);
margin-left:4px;
animation:blink-cursor .7s step-end infinite;
vertical-align:text-bottom
}

@keyframes blink-cursor{50%{opacity:0}}

.hero p{
font-size:clamp(1rem,1.8vw,1.25rem);
color:var(--text2);
max-width:640px;
margin:0 auto 40px;
line-height:1.8
}

.hero .btn{font-size:1rem;padding:14px 36px}

/* ── SECTIONS ── */
section{padding:120px 0;position:relative}

.section-label{
font-size:.8rem;
font-weight:600;
color:var(--accent);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:12px
}

.section-title{
font-size:clamp(1.75rem,4vw,3rem);
font-weight:700;
letter-spacing:-.02em;
line-height:1.2;
margin-bottom:20px
}

.section-text{
font-size:1.05rem;
color:var(--text2);
line-height:1.85;
max-width:680px
}

/* ── ABOUT ── */
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center
}

.about-graphic{
aspect-ratio:1;
position:relative;
display:flex;
align-items:center;
justify-content:center
}

.geo-container{width:280px;height:280px;position:relative}

.geo-ring{
position:absolute;
border:2px solid var(--accent);
border-radius:50%;
animation:geo-spin 12s linear infinite
}

.geo-ring:nth-child(1){width:100%;height:100%;opacity:.3}

.geo-ring:nth-child(2){
width:75%;
height:75%;
top:12.5%;
left:12.5%;
border-color:rgba(63,193,191,.5);
animation-duration:8s;
animation-direction:reverse
}

.geo-ring:nth-child(3){
width:50%;
height:50%;
top:25%;
left:25%;
border-color:rgba(63,193,191,.7);
animation-duration:6s
}

.geo-square{
position:absolute;
width:60%;
height:60%;
top:20%;
left:20%;
border:2px solid rgba(63,193,191,.4);
animation:geo-spin 10s linear reverse infinite;
border-radius:8px
}

.geo-dot{
position:absolute;
width:8px;
height:8px;
background:var(--accent);
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 20px var(--accent)
}

@keyframes geo-spin{to{transform:rotate(360deg)}}

.about-text .section-text{max-width:none}
.about-text .section-text+.section-text{margin-top:20px}

/* ── STATS ── */
.stats-section{
background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%);
padding:100px 0
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:32px;
text-align:center
}

.stat-item{padding:40px 20px}

.stat-number{
font-size:clamp(2.5rem,5vw,3.5rem);
font-weight:800;
color:var(--accent);
line-height:1;
margin-bottom:8px
}

.stat-label{
font-size:.95rem;
color:var(--text2);
font-weight:500
}

/* ── PROCESS ── */
.process-section{padding:120px 0}

.process-grid{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-top:64px;
position:relative
}

.process-line{
position:absolute;
top:40px;
left:60px;
right:60px;
height:2px;
background:rgba(127,127,127,.1)
}

.process-line-fill{
height:100%;
width:0;
background:var(--accent);
transition:width 1.5s cubic-bezier(.4,0,.2,1)
}

.process-step{
text-align:center;
flex:1;
position:relative;
z-index:1;
padding:0 16px
}

.process-num{
width:80px;
height:80px;
border-radius:50%;
background:var(--bg2);
border:2px solid rgba(127,127,127,.1);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
font-size:1.5rem;
font-weight:700;
color:var(--accent);
transition:all .5s ease
}

.process-step.active .process-num{
border-color:var(--accent);
box-shadow:0 0 30px rgba(63,193,191,.3)
}

.process-step h3{
font-size:1.1rem;
font-weight:600;
margin-bottom:8px
}

.process-step p{
font-size:.875rem;
color:var(--text2);
line-height:1.6
}

/* ── UX ── */
.ux-section{
background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
text-align:center
}

.ux-section .section-text{margin:0 auto;max-width:800px}

/* ── SERVICES ── */
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:56px
}

.service-card{
background:rgba(26,26,26,.6);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius);
padding:48px 36px;
text-align:center;
transition:all .4s cubic-bezier(.4,0,.2,1);
transform-style:preserve-3d;
perspective:800px
}

[data-theme="light"] .service-card{
background:rgba(255,255,255,.6);
border:1px solid rgba(0,0,0,.08)
}

.service-card:hover{
border-color:rgba(63,193,191,.25);
box-shadow:0 20px 60px rgba(63,193,191,.1)
}

.service-icon{
width:56px;
height:56px;
margin:0 auto 24px;
border-radius:14px;
background:linear-gradient(135deg,rgba(63,193,191,.15),rgba(63,193,191,.05));
display:flex;
align-items:center;
justify-content:center
}

.service-icon svg{
width:28px;
height:28px;
stroke:var(--accent);
fill:none;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round
}

.service-card h3{
font-size:1.2rem;
font-weight:600;
margin-bottom:12px
}

.service-card p{
font-size:.95rem;
color:var(--text2);
line-height:1.7
}

/* ── MARQUEE ── */
.marquee-section{
padding:60px 0;
overflow:hidden;
background:var(--bg2);
border-top:1px solid rgba(127,127,127,.04);
border-bottom:1px solid rgba(127,127,127,.04)
}

.marquee-track{
display:flex;
width:max-content;
animation:marquee-scroll 30s linear infinite
}

.marquee-track:hover{animation-play-state:paused}

.marquee-item{
font-size:1.2rem;
font-weight:600;
color:var(--text2);
white-space:nowrap;
padding:0 40px;
opacity:.5;
transition:opacity .3s
}

.marquee-item:hover{opacity:1;color:var(--accent)}

@keyframes marquee-scroll{to{transform:translateX(-50%)}}

/* ── PRICE CALCULATOR ── */
.calculator-section{
background:var(--bg2);
text-align:center
}

.calculator-container{
max-width:800px;
margin:56px auto 0;
background:rgba(34,34,34,.6);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius);
padding:48px 40px
}

[data-theme="light"] .calculator-container{
background:rgba(255,255,255,.8);
border:1px solid rgba(0,0,0,.08)
}

.calculator-step{
margin-bottom:40px;
opacity:0.5;
transition:opacity var(--transition)
}

.calculator-step.active{opacity:1}

.step-title{
font-size:1.3rem;
font-weight:600;
margin-bottom:24px;
color:var(--text)
}

.project-types{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:32px
}

.project-type{
background:var(--bg3);
border:2px solid transparent;
border-radius:var(--radius);
padding:24px 20px;
cursor:pointer;
transition:all var(--transition);
text-align:center
}

[data-theme="light"] .project-type{
background:var(--bg2);
border:2px solid rgba(0,0,0,.06)
}

.project-type:hover,.project-type.selected{
border-color:var(--accent);
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(63,193,191,.15)
}

.project-type h4{
font-size:1.1rem;
font-weight:600;
margin-bottom:8px;
color:var(--accent)
}

.project-type .price{
font-size:.9rem;
font-weight:600;
color:var(--text);
margin-bottom:8px
}

.project-type p{
font-size:.85rem;
color:var(--text2);
line-height:1.4
}

.page-slider{
margin:24px 0
}

.page-slider label{
display:block;
font-size:1rem;
font-weight:500;
margin-bottom:16px;
color:var(--text)
}

.slider{
width:100%;
height:6px;
border-radius:3px;
background:var(--bg3);
outline:none;
-webkit-appearance:none;
appearance:none;
margin-bottom:12px
}

[data-theme="light"] .slider{
background:#e0e0e0
}

.slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:20px;
height:20px;
border-radius:50%;
background:var(--accent);
cursor:pointer;
box-shadow:0 2px 6px rgba(63,193,191,.3)
}

.slider::-moz-range-thumb{
width:20px;
height:20px;
border-radius:50%;
background:var(--accent);
cursor:pointer;
border:none;
box-shadow:0 2px 6px rgba(63,193,191,.3)
}

.slider-value{
font-size:1.1rem;
font-weight:600;
color:var(--accent)
}

.extras-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
text-align:left
}

.extra-item{
display:flex;
align-items:center;
padding:16px;
background:var(--bg3);
border-radius:12px;
transition:all var(--transition);
cursor:pointer
}

[data-theme="light"] .extra-item{
background:var(--bg2)
}

.extra-item:hover{
background:rgba(63,193,191,.1);
transform:translateY(-1px)
}

.extra-checkbox{
width:20px;
height:20px;
border:2px solid var(--accent);
border-radius:4px;
margin-right:12px;
position:relative;
transition:all var(--transition);
flex-shrink:0
}

.extra-checkbox.checked{
background:var(--accent)
}

.extra-checkbox.checked::after{
content:'✓';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#000;
font-size:12px;
font-weight:bold
}

.extra-info{
flex:1
}

.extra-name{
font-size:.95rem;
font-weight:500;
margin-bottom:2px;
color:var(--text)
}

.extra-price{
font-size:.85rem;
color:var(--accent);
font-weight:600
}

.extra-badge{
background:linear-gradient(135deg,var(--accent),#5dd8d6);
color:#000;
font-size:.7rem;
font-weight:600;
padding:2px 8px;
border-radius:12px;
margin-left:8px
}

.price-display{
margin:40px 0;
padding:32px;
background:linear-gradient(135deg,rgba(63,193,191,.1),rgba(63,193,191,.05));
border-radius:var(--radius);
border:1px solid rgba(63,193,191,.2)
}

.price-label{
font-size:.9rem;
color:var(--text2);
margin-bottom:8px
}

.price-amount{
font-size:3rem;
font-weight:800;
color:var(--accent);
line-height:1
}

.price-suffix{
font-size:1rem;
color:var(--text2);
margin-top:8px
}

/* ── DEVICE MOCKUPS ── */
.ref-section{background:var(--bg2)}

.references-grid{
display:grid;
gap:80px;
margin-top:56px
}

.reference-item{
display:flex;
flex-direction:column;
align-items:center;
gap:40px;
max-width:800px;
margin:0 auto;
text-align:center
}

@media(min-width:900px){
.reference-item{
flex-direction:row;
text-align:left
}
.reference-item:nth-child(even){
flex-direction:row-reverse
}
}

.device-mockups{
display:flex;
align-items:flex-end;
gap:20px;
justify-content:center;
flex-shrink:0;
animation:float 6s ease-in-out infinite
}

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

.laptop-mockup{
position:relative;
width:260px;
height:170px;
background:linear-gradient(145deg,#2a2a2a,#1a1a1a);
border-radius:12px 12px 0 0;
box-shadow:0 20px 40px rgba(0,0,0,.3);
flex-shrink:0
}

.laptop-mockup::before{
content:'';
position:absolute;
top:8px;
left:8px;
right:8px;
bottom:0;
background:linear-gradient(135deg,var(--accent-dark),#0d2626);
border-radius:6px
}

.laptop-mockup::after{
content:'Website';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:var(--accent);
font-size:1.1rem;
font-weight:600;
opacity:.7;
z-index:2
}
.reference-item:nth-child(1) .laptop-mockup::after{content:'🦷 Dr. Dürr'}
.reference-item:nth-child(2) .laptop-mockup::after{content:'⚡ TechVision'}
.reference-item:nth-child(3) .laptop-mockup::after{content:'☕ Rosengarten'}

.laptop-base{
width:280px;
height:4px;
background:linear-gradient(145deg,#333,#1a1a1a);
border-radius:0 0 150px 150px;
box-shadow:0 10px 20px rgba(0,0,0,.2);
margin:-1px auto 0
}

.iphone-mockup{
position:relative;
width:90px;
height:180px;
background:linear-gradient(145deg,#2a2a2a,#1a1a1a);
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.25);
flex-shrink:0
}

.iphone-mockup::before{
content:'';
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
background:linear-gradient(135deg,var(--accent-dark),#0d2626);
border-radius:14px
}

.iphone-mockup::after{
content:'📱';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:1.5rem;
opacity:.5;
z-index:2
}

/* Mockup Images */
.laptop-mockup.has-image::before{
background:#000
}
.laptop-mockup.has-image::after{
display:none
}
.laptop-mockup .mockup-img{
position:absolute;
top:8px;
left:8px;
right:8px;
bottom:0;
width:calc(100% - 16px);
height:calc(100% - 8px);
object-fit:cover;
object-position:top;
border-radius:6px;
z-index:2
}

.iphone-mockup.has-image::before{
background:#000
}
.iphone-mockup.has-image::after{
display:none
}
.iphone-mockup .mockup-img{
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
width:calc(100% - 20px);
height:calc(100% - 20px);
object-fit:cover;
object-position:top;
border-radius:14px;
z-index:2
}

.reference-info{
padding:20px 0
}

.reference-info h3{
font-size:1.8rem;
font-weight:700;
margin-bottom:16px;
color:var(--text)
}

.reference-info p{
font-size:1.1rem;
color:var(--text2);
line-height:1.7;
margin-bottom:20px
}

.reference-tags{
display:flex;
flex-wrap:wrap;
gap:8px
}

.reference-tag{
background:rgba(63,193,191,.15);
color:var(--accent);
font-size:.85rem;
font-weight:500;
padding:6px 12px;
border-radius:6px
}

/* ── TESTIMONIALS ── */
.testimonials-section{
padding:120px 0;
background:var(--bg)
}

.testimonial-carousel{
max-width:700px;
margin:48px auto 0;
position:relative;
overflow:hidden
}

.testimonial-track{
display:flex;
transition:transform .6s cubic-bezier(.4,0,.2,1)
}

.testimonial-card{
min-width:100%;
padding:48px 40px;
text-align:center
}

.testimonial-stars{
color:#f5a623;
font-size:1.2rem;
margin-bottom:20px;
letter-spacing:4px
}

.testimonial-quote{
font-size:1.15rem;
color:var(--text);
line-height:1.8;
font-style:italic;
margin-bottom:24px;
position:relative
}

.testimonial-quote::before{
content:'"';
font-size:4rem;
color:var(--accent);
opacity:.3;
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
font-style:normal
}

.testimonial-author{
font-size:.95rem;
color:var(--accent);
font-weight:600
}

.testimonial-role{
font-size:.85rem;
color:var(--text2);
margin-top:4px
}

.testimonial-dots{
display:flex;
justify-content:center;
gap:10px;
margin-top:24px
}

.testimonial-dot{
width:10px;
height:10px;
border-radius:50%;
background:rgba(127,127,127,.2);
border:none;
cursor:pointer;
transition:all var(--transition)
}

.testimonial-dot.active{
background:var(--accent);
box-shadow:0 0 10px rgba(63,193,191,.4)
}

/* ── BLOG ── */
.blog-section{
background:var(--bg);
text-align:center
}

.blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
margin-top:56px
}

.blog-card{
background:var(--bg2);
border:1px solid rgba(127,127,127,.08);
border-radius:var(--radius);
overflow:hidden;
transition:all .4s cubic-bezier(.4,0,.2,1);
text-align:left
}

.blog-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,.15)
}

.blog-image{
height:200px;
background:linear-gradient(135deg,var(--accent),#5dd8d6);
position:relative;
overflow:hidden
}

.blog-image::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.2);
transition:transform .4s ease
}

.blog-card:hover .blog-image::before{
transform:scale(1.1)
}

.blog-content{
padding:24px
}

.blog-date{
font-size:.8rem;
color:var(--accent);
font-weight:500;
margin-bottom:8px
}

.blog-category{
display:inline-block;
background:rgba(63,193,191,.15);
color:var(--accent);
font-size:.75rem;
font-weight:600;
padding:4px 8px;
border-radius:4px;
margin-bottom:12px
}

.blog-title{
font-size:1.1rem;
font-weight:600;
margin-bottom:12px;
color:var(--text);
line-height:1.4
}

.blog-excerpt{
font-size:.9rem;
color:var(--text2);
line-height:1.6;
margin-bottom:16px
}

.blog-link{
color:var(--accent);
font-size:.9rem;
font-weight:500;
text-decoration:none;
display:flex;
align-items:center;
gap:6px;
transition:gap .3s ease
}

.blog-card:hover .blog-link{
gap:12px
}

.blog-link::after{
content:'→';
transition:transform .3s ease
}

.blog-card:hover .blog-link::after{
transform:translateX(4px)
}

/* ── TEAM ── */
.team-grid{
display:flex;
justify-content:center;
gap:64px;
margin-top:56px;
flex-wrap:wrap
}

.team-card{
text-align:center;
max-width:220px;
transform-style:preserve-3d;
perspective:800px
}

.team-avatar{
width:140px;
height:140px;
border-radius:50%;
background:rgba(26,58,58,.6);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
margin:0 auto 20px;
display:flex;
align-items:center;
justify-content:center;
border:3px solid rgba(63,193,191,.2);
transition:all var(--transition)
}

.team-card:hover .team-avatar{
border-color:var(--accent);
box-shadow:0 0 30px rgba(63,193,191,.2)
}

.team-avatar svg{
width:48px;
height:48px;
stroke:var(--accent);
fill:none;
stroke-width:1.2;
opacity:.5
}

.team-card h3{
font-size:1.05rem;
font-weight:600;
margin-bottom:6px
}

.team-card p{
font-size:.875rem;
color:var(--text2)
}

/* ── CTA + CONTACT FORM ── */
.cta-section{
text-align:center;
background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
padding:140px 0
}

.cta-section .section-title{
font-size:clamp(2rem,4vw,3.25rem)
}

.cta-section .section-text{
margin:0 auto 40px;
max-width:700px
}

.contact-form{
max-width:600px;
margin:60px auto 0;
background:rgba(26,26,26,.6);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius);
padding:48px 40px
}

[data-theme="light"] .contact-form{
background:rgba(255,255,255,.8);
border:1px solid rgba(0,0,0,.08)
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:24px
}

.form-group{
position:relative
}

.form-input,.form-select,.form-textarea{
width:100%;
padding:16px 20px;
border:2px solid rgba(127,127,127,.15);
border-radius:12px;
background:var(--bg3);
color:var(--text);
font-size:.95rem;
transition:all var(--transition);
font-family:inherit;
outline:none
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea{
background:var(--bg2);
border-color:rgba(0,0,0,.1)
}

.form-input:focus,.form-select:focus,.form-textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(63,193,191,.1)
}

.form-label{
position:absolute;
left:20px;
top:16px;
color:var(--text2);
font-size:.95rem;
pointer-events:none;
transition:all var(--transition);
background:var(--bg3);
padding:0 8px
}

[data-theme="light"] .form-label{
background:var(--bg2)
}

.form-input:focus+.form-label,
.form-input:not(:placeholder-shown)+.form-label{
top:-8px;
font-size:.8rem;
color:var(--accent)
}

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

.form-select{
cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7c7c7' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 15px center;
background-size:16px;
padding-right:50px
}

.form-error{
color:#ef4444;
font-size:.85rem;
margin-top:6px;
display:none
}

.form-submit{
width:100%;
padding:16px;
background:var(--accent);
color:#000;
border:none;
border-radius:12px;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:all var(--transition);
position:relative;
overflow:hidden;
margin-top:8px
}

.form-submit:hover{
background:#5dd8d6;
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(63,193,191,.3)
}

.form-submit:disabled{
opacity:.6;
cursor:not-allowed;
transform:none
}

.form-submit.loading::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
margin:-10px 0 0 -10px;
border:2px solid #000;
border-top-color:transparent;
border-radius:50%;
animation:button-loading .8s linear infinite
}

.form-submit.loading .submit-text{
opacity:0
}

@keyframes button-loading{
to{transform:rotate(360deg)}
}

.form-success{
display:none;
text-align:center;
padding:40px 20px;
color:var(--accent)
}

.form-success.show{
display:block;
animation:success-appear .6s ease
}

@keyframes success-appear{
from{opacity:0;transform:scale(.8)}
to{opacity:1;transform:scale(1)}
}

.success-checkmark{
width:60px;
height:60px;
border:3px solid var(--accent);
border-radius:50%;
margin:0 auto 20px;
position:relative;
animation:checkmark-bounce .6s ease
}

.success-checkmark::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:16px;
height:8px;
border:solid var(--accent);
border-width:0 0 3px 3px;
transform:translate(-50%,-50%) rotate(-45deg) scale(0);
animation:checkmark-draw .3s ease .3s forwards
}

@keyframes checkmark-bounce{
0%{transform:scale(0)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}

@keyframes checkmark-draw{
to{transform:translate(-50%,-50%) rotate(-45deg) scale(1)}
}

/* ── FAQ ── */
.faq-list{max-width:760px;margin:48px auto 0}

.faq-item{border-bottom:1px solid rgba(127,127,127,.08)}

.faq-question{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 0;
background:none;
border:none;
color:var(--text);
font-size:1.05rem;
font-weight:500;
cursor:pointer;
text-align:left;
font-family:inherit;
line-height:1.5;
gap:16px
}

.faq-question:hover{color:var(--accent)}

.faq-icon{
width:24px;
height:24px;
flex-shrink:0;
position:relative;
transition:transform var(--transition)
}

.faq-icon::before,.faq-icon::after{
content:'';
position:absolute;
background:var(--text2);
border-radius:2px;
transition:transform var(--transition)
}

.faq-icon::before{
width:14px;
height:2px;
top:11px;
left:5px
}

.faq-icon::after{
width:2px;
height:14px;
top:5px;
left:11px
}

.faq-item.open .faq-icon::after{transform:rotate(90deg)}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1)
}

.faq-answer-inner{
padding-bottom:24px;
color:var(--text2);
font-size:.95rem;
line-height:1.85
}

/* ── LOCATION ── */
.location-section{
background:var(--bg2);
text-align:center
}

.location-container{
max-width:900px;
margin:56px auto 0;
position:relative;
border-radius:var(--radius);
overflow:hidden;
height:400px;
box-shadow:0 20px 40px rgba(0,0,0,.1)
}

.location-map{
width:100%;
height:100%;
background:linear-gradient(135deg,var(--bg3),var(--accent-dark));
position:relative;
display:flex;
align-items:center;
justify-content:center
}

.location-map::before{
content:'🗺️';
font-size:4rem;
opacity:.3
}

.location-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(26,26,26,.9);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius);
padding:32px;
text-align:center;
min-width:300px
}

[data-theme="light"] .location-overlay{
background:rgba(255,255,255,.95);
border:1px solid rgba(0,0,0,.08)
}

.location-overlay h3{
font-size:1.3rem;
font-weight:600;
margin-bottom:16px;
color:var(--text)
}

.location-info{
text-align:left;
margin-bottom:16px
}

.location-info div{
display:flex;
align-items:center;
gap:12px;
margin-bottom:8px;
color:var(--text2);
font-size:.9rem
}

.location-info svg{
width:18px;
height:18px;
stroke:var(--accent);
flex-shrink:0
}

.location-hours{
background:rgba(63,193,191,.1);
border:1px solid rgba(63,193,191,.2);
border-radius:8px;
padding:12px;
font-size:.85rem;
color:var(--accent);
font-weight:500;
text-align:center
}

/* ── FOOTER ── */
footer{
background:var(--bg);
border-top:1px solid rgba(127,127,127,.06);
padding:48px 0
}

.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:24px
}

.footer-logo{font-size:1.2rem;font-weight:700}
.footer-logo span{color:var(--accent)}

.footer-links{display:flex;gap:24px;align-items:center}
.footer-links a{color:var(--text2);font-size:.85rem}
.footer-links a:hover{color:var(--accent)}

.footer-social{display:flex;gap:16px}
.footer-social a{color:var(--text2);transition:color var(--transition)}
.footer-social a:hover{color:var(--accent)}
.footer-social svg{width:20px;height:20px;fill:currentColor}

.footer-copy{
width:100%;
text-align:center;
color:var(--text2);
font-size:.8rem;
margin-top:24px;
opacity:.6
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
.about-grid{grid-template-columns:1fr;gap:48px;text-align:center}
.about-graphic{order:-1}
.services-grid{grid-template-columns:1fr 1fr;gap:20px}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.process-grid{flex-wrap:wrap;gap:32px}
.process-line{display:none}
.process-step{flex:0 0 45%}
.project-types{grid-template-columns:1fr}
.extras-grid{grid-template-columns:1fr}
.blog-grid{grid-template-columns:1fr 1fr}
.references-grid{gap:60px}
}

@media(max-width:768px){
/* Custom cursor disabled on mobile */
*{cursor:auto!important}
.custom-cursor{display:none!important}

.nav-links{display:none}
.hamburger{display:flex}
.mobile-menu.open{pointer-events:auto}
section{padding:80px 0}
.services-grid{grid-template-columns:1fr}
.team-grid{gap:40px}
.hero{min-height:90vh;padding:100px 20px 60px}
.footer-inner{flex-direction:column;text-align:center}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.process-step{flex:0 0 100%}
.testimonial-card{padding:32px 20px}
.form-row{grid-template-columns:1fr}
.project-types{grid-template-columns:1fr}
.blog-grid{grid-template-columns:1fr}
.device-mockups{transform:scale(0.85)}
.calculator-container{padding:32px 24px}
.location-overlay{min-width:280px;padding:24px}
.theme-toggle{margin-right:12px}
}

@media(max-width:480px){
.container{padding:0 16px}
.hero{padding:80px 16px 40px}
.calculator-container{padding:24px 16px}
.contact-form{padding:32px 20px}
.testimonial-card{padding:24px 16px}
}

/* WordPress Admin Bar Offset */
body.admin-bar nav{
top: 32px;
}

@media screen and (max-width: 782px) {
body.admin-bar nav{
top: 46px;
}
}

/* WordPress Customizer Styles */
.customize-preview-iframe{
opacity: 1;
transition: opacity 0.3s ease;
}