/* ============================================
MAKE ZONE DIGITAL — style.css
White Theme | Bold Editorial | Eye-Catching
============================================ */
/* Fonts loaded via in — no @import needed */
/* ── Variables ── */
:root {
--white: #ffffff;
--offwhite:#f9f8f5;
--light: #f2f0ea;
--border: #e4e0d6;
--border2: #ccc8bc;
--ink: #0f0e0b;
--ink2: #3a3830;
--ink3: #8a8578;
--accent: #ff3d00; /* electric orange-red */
--accent2: #0057ff; /* cobalt blue */
--accent3: #00c851; /* success green */
--yellow: #ffe135;
--shadow: 0 4px 24px rgba(15,14,11,0.08);
--shadow2: 0 16px 60px rgba(15,14,11,0.14);
--r: 14px;
--r-sm: 8px;
--r-lg: 24px;
--ease: cubic-bezier(0.4,0,0.2,1);
}
/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{
background:var(--white);color:var(--ink);
font-family:'Outfit',sans-serif;line-height:1.6;
overflow-x:hidden;cursor:none;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:none;font-family:'Outfit',sans-serif;}
img{max-width:100%;display:block;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--light);}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px;}
/* ── Custom Cursor ── */
.cursor{
width:12px;height:12px;border-radius:50%;
background:var(--accent);position:fixed;pointer-events:none;
z-index:9999;transition:transform 0.15s var(--ease),opacity 0.2s;
mix-blend-mode:multiply;
}
.cursor-ring{
width:36px;height:36px;border-radius:50%;
border:1.5px solid var(--accent);position:fixed;pointer-events:none;
z-index:9998;transition:transform 0.35s var(--ease),width 0.3s,height 0.3s,border-color 0.3s;
transform:translate(-50%,-50%);
}
.cursor.hovered{transform:scale(2.5);opacity:0.5;}
.cursor-ring.hovered{width:56px;height:56px;border-color:var(--accent2);}
/* ── Nav ── */
.nav{
position:fixed;top:0;left:0;right:0;z-index:500;
display:flex;align-items:center;justify-content:space-between;
padding:0 5%;height:70px;
background:rgba(255,255,255,0.9);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
transition:box-shadow 0.3s;
}
.nav.scrolled{box-shadow:var(--shadow);}
.nav-logo{
display:flex;align-items:center;gap:10px;
font-family:'Outfit',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-0.5px;
}
.nav-logo-mark{
width:34px;height:34px;border-radius:9px;
background:var(--ink);color:var(--yellow);
display:flex;align-items:center;justify-content:center;
font-family:'DM Mono',monospace;font-size:0.7rem;font-weight:500;
letter-spacing:-0.5px;flex-shrink:0;
}
.nav-logo span{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
padding:7px 13px;border-radius:6px;
font-size:0.88rem;font-weight:500;color:var(--ink2);
transition:all 0.2s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--light);}
.nav-cta{
display:inline-flex;align-items:center;gap:7px;
padding:10px 22px;border-radius:50px;
background:var(--ink);color:var(--white);
font-size:0.88rem;font-weight:700;
transition:all 0.25s var(--ease);
}
.nav-cta:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,61,0,0.3);}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:all 0.3s var(--ease);}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px);}
.mobile-menu{
display:none;position:fixed;inset:0;top:70px;
background:var(--white);z-index:400;padding:32px 5%;
flex-direction:column;gap:6px;overflow-y:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:14px 18px;border-radius:var(--r-sm);font-size:1.05rem;font-weight:600;color:var(--ink2);border:1px solid var(--border);}
.mobile-menu a:hover{color:var(--accent);border-color:var(--accent);background:rgba(255,61,0,0.04);}
/* ── Hero ── */
.hero{
min-height:100vh;display:flex;flex-direction:column;
justify-content:center;padding:120px 5% 80px;
position:relative;overflow:hidden;
background:var(--white);
}
/* Big decorative letters */
.hero-bg-text{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-family:'Bebas Neue',sans-serif;font-size:clamp(140px,22vw,320px);
color:transparent;-webkit-text-stroke:1px var(--border);
white-space:nowrap;pointer-events:none;user-select:none;
letter-spacing:-4px;opacity:0.6;z-index:0;
}
/* Geometric shapes */
.hero-shape{position:absolute;pointer-events:none;z-index:0;}
.hs1{
width:420px;height:420px;border-radius:50%;
border:1px solid var(--border);
top:-80px;right:-80px;
}
.hs2{
width:200px;height:200px;background:var(--yellow);
border-radius:50%;bottom:80px;left:-60px;
animation:float1 6s ease-in-out infinite;
opacity:0.5;
}
.hs3{
width:80px;height:80px;background:var(--accent);
border-radius:16px;right:10%;bottom:20%;
animation:spin 20s linear infinite;opacity:0.15;
transform-origin:center;
}
.hs4{
width:120px;height:120px;border:2px solid var(--accent2);
border-radius:50%;right:20%;top:20%;
animation:float2 8s ease-in-out infinite;opacity:0.25;
}
@keyframes float1{0%,100%{transform:translateY(0);}50%{transform:translateY(-24px);}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(18px) rotate(180deg);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.hero-inner{
max-width:1160px;margin:0 auto;width:100%;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;
position:relative;z-index:1;
}
.hero-left{
min-width:0;
}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:var(--yellow);border-radius:4px;
padding:5px 12px;margin-bottom:24px;
font-family:'DM Mono',monospace;font-size:0.72rem;font-weight:500;
letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
}
.hero-eyebrow .blink{
width:7px;height:7px;border-radius:50%;background:var(--accent);
animation:blink 1.2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.7);}}
.hero h1{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(4rem,9vw,8rem);
line-height:0.95;letter-spacing:-1px;
color:var(--ink);margin-bottom:28px;
}
/* ── TYPED TEXT LAYOUT-SHIFT FIX ──────────────────
The typed line is display:block with a fixed height
equal to exactly one line of the h1 font-size.
'overflow:hidden' clips it so no word, however long,
can ever push siblings down. 'white-space:nowrap'
prevents the text wrapping onto a second line.
The inner .typed-text span carries the visual style.
─────────────────────────────────────────────────── */
.hero h1 .line-acc{
display:block;
height:calc(clamp(4rem, 9vw, 8rem) * 0.95);
white-space:nowrap;
width:100%;
}
.hero h1 .line-acc .typed-text{
display:inline;
color:transparent;
-webkit-text-stroke:2px var(--accent);
white-space:nowrap;
}
/* Blinking cursor right after typed text */
.hero h1 .line-acc .typed-text::after{
content:'|';
-webkit-text-stroke:0;
color:var(--accent);
font-style:normal;
animation:cursor-blink 0.9s step-end infinite;
margin-left:4px;
}
@keyframes cursor-blink{0%,100%{opacity:1;}50%{opacity:0;}}
.hero h1 .line-fill{color:var(--ink);display:block;white-space:nowrap;}
.hero-sub{
font-size:1.05rem;color:var(--ink2);line-height:1.75;
max-width:440px;margin-bottom:36px;
}
.hero-sub strong{color:var(--ink);font-weight:700;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.btn-primary{
display:inline-flex;align-items:center;gap:8px;
padding:14px 30px;border-radius:50px;
background:var(--accent);color:var(--white);
font-size:0.95rem;font-weight:700;
transition:all 0.25s var(--ease);
box-shadow:0 6px 20px rgba(255,61,0,0.25);
}
.btn-primary:hover{background:#e03200;transform:translateY(-2px);box-shadow:0 10px 32px rgba(255,61,0,0.35);}
.btn-secondary{
display:inline-flex;align-items:center;gap:8px;
padding:14px 28px;border-radius:50px;
background:transparent;color:var(--ink);
font-size:0.95rem;font-weight:600;
border:1.5px solid var(--border2);
transition:all 0.25s var(--ease);
}
.btn-secondary:hover{border-color:var(--ink);background:var(--ink);color:var(--white);transform:translateY(-2px);}
.btn-whatsapp{
display:inline-flex;align-items:center;gap:9px;
padding:14px 26px;border-radius:50px;
background:#25D366;color:#fff;
font-size:0.95rem;font-weight:700;
border:none;
transition:all 0.25s var(--ease);
box-shadow:0 4px 18px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,0.45);}
.hero-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--border);border:1px solid var(--border);
border-radius:var(--r);overflow:hidden;
}
.hero-stat{
background:var(--offwhite);padding:20px;
transition:background 0.2s;
}
.hero-stat:hover{background:var(--yellow);}
.hs-num{
font-family:'Bebas Neue',sans-serif;font-size:2.8rem;
color:var(--ink);line-height:1;letter-spacing:-0.5px;
}
.hs-num sup{font-size:1.4rem;color:var(--accent);}
.hs-label{font-size:0.78rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
/* Hero right — services card stack */
.hero-cards{position:relative;height:460px;}
.hcard{
position:absolute;background:var(--white);
border:1px solid var(--border2);border-radius:var(--r-lg);
padding:28px;box-shadow:var(--shadow2);
transition:transform 0.4s var(--ease);
}
.hcard:hover{transform:translateY(-6px) rotate(0deg) !important;}
.hcard-1{width:300px;right:0;top:0;transform:rotate(3deg);z-index:3;}
.hcard-2{width:280px;right:30px;top:80px;transform:rotate(-2deg);z-index:2;background:var(--ink);color:var(--white);}
.hcard-3{width:260px;right:10px;top:180px;transform:rotate(1.5deg);z-index:1;background:var(--yellow);}
.hcard-icon{font-size:2rem;margin-bottom:12px;}
.hcard-title{font-weight:800;font-size:1rem;margin-bottom:6px;}
.hcard-2 .hcard-title{color:var(--white);}
.hcard-desc{font-size:0.82rem;color:var(--ink3);line-height:1.6;}
.hcard-2 .hcard-desc{color:rgba(255,255,255,0.65);}
.hcard-3 .hcard-desc{color:var(--ink2);}
.hcard-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
.hcard-tag{
font-family:'DM Mono',monospace;font-size:0.65rem;
padding:3px 9px;border-radius:4px;
background:var(--light);border:1px solid var(--border);color:var(--ink2);
}
.hcard-2 .hcard-tag{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);}
.hcard-3 .hcard-tag{background:rgba(15,14,11,0.08);border-color:rgba(15,14,11,0.15);color:var(--ink2);}
/* ── Marquee ── */
.marquee-bar{
overflow:hidden;background:var(--ink);
padding:16px 0;border-top:1px solid rgba(255,255,255,0.1);
}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite;}
.marquee-item{
display:flex;align-items:center;gap:12px;padding:0 28px;
font-family:'Bebas Neue',sans-serif;font-size:1.1rem;
letter-spacing:1.5px;color:rgba(255,255,255,0.5);white-space:nowrap;
}
.marquee-item .sep{color:var(--accent);font-size:0.7rem;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ── Section shared ── */
section{padding:100px 5%;}
.container{max-width:1160px;margin:0 auto;}
.section-label{
display:inline-flex;align-items:center;gap:8px;
font-family:'DM Mono',monospace;font-size:0.72rem;font-weight:500;
letter-spacing:2px;text-transform:uppercase;color:var(--accent);
margin-bottom:16px;
}
.section-label::before{content:'[ ';opacity:0.5;}
.section-label::after{content:' ]';opacity:0.5;}
.section-title{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(2.8rem,5vw,4.8rem);
line-height:1;letter-spacing:-0.5px;color:var(--ink);
margin-bottom:16px;
}
.section-title .acc{color:var(--accent);}
.section-desc{font-size:1rem;color:var(--ink2);max-width:560px;line-height:1.75;}
/* Reveal animations */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:0.1s;}
.reveal-d2{transition-delay:0.2s;}
.reveal-d3{transition-delay:0.3s;}
.reveal-d4{transition-delay:0.4s;}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
/* ── Services ── */
#services{background:var(--offwhite);}
.services-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2px;background:var(--border);
border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
margin-top:56px;
}
.svc{
background:var(--white);padding:36px 30px;
position:relative;overflow:hidden;
transition:all 0.3s var(--ease);
}
.svc::after{
content:'';position:absolute;
bottom:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--accent),var(--accent2));
transform:scaleX(0);transform-origin:left;
transition:transform 0.35s var(--ease);
}
.svc:hover{background:var(--ink);transform:scale(1.02);z-index:2;box-shadow:var(--shadow2);}
.svc:hover::after{transform:scaleX(1);}
.svc:hover .svc-num{color:rgba(255,255,255,0.25);}
.svc:hover .svc-name{color:var(--white);}
.svc:hover .svc-desc{color:rgba(255,255,255,0.6);}
.svc:hover .svc-stack .chip{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);}
.svc:hover .svc-link{color:var(--yellow);}
.svc:hover .svc-icon-bg{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);}
.svc-num{
font-family:'DM Mono',monospace;font-size:0.68rem;
color:var(--ink3);letter-spacing:2px;margin-bottom:20px;
transition:color 0.3s;
}
.svc-icon-bg{
width:52px;height:52px;border-radius:13px;
display:flex;align-items:center;justify-content:center;
font-size:1.4rem;margin-bottom:18px;
background:var(--light);border:1px solid var(--border);
transition:all 0.3s var(--ease);
}
.svc-name{
font-family:'Outfit',sans-serif;font-weight:800;
font-size:1.1rem;color:var(--ink);margin-bottom:10px;
transition:color 0.3s;
}
.svc-desc{font-size:0.87rem;color:var(--ink2);line-height:1.7;margin-bottom:18px;transition:color 0.3s;}
.svc-stack{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px;}
.chip{
font-family:'DM Mono',monospace;font-size:0.67rem;
padding:3px 9px;border-radius:4px;
background:var(--light);border:1px solid var(--border);color:var(--ink3);
transition:all 0.3s;
}
.svc-link{
display:inline-flex;align-items:center;gap:6px;
font-size:0.82rem;font-weight:700;color:var(--accent);
transition:gap 0.2s,color 0.3s;
}
.svc-link:hover{gap:10px;}
/* ── Portfolio ── */
#portfolio{background:var(--white);}
.portfolio-header{
display:flex;justify-content:space-between;align-items:flex-end;
flex-wrap:wrap;gap:20px;margin-bottom:48px;
}
.portfolio-filters{display:flex;gap:8px;flex-wrap:wrap;}
.flt{
padding:7px 16px;border-radius:6px;
font-size:0.82rem;font-weight:600;
border:1.5px solid var(--border2);background:transparent;
color:var(--ink2);transition:all 0.2s var(--ease);
font-family:'DM Mono',monospace;
}
.flt:hover,.flt.active{
background:var(--ink);color:var(--white);border-color:var(--ink);
}
.portfolio-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:auto;
gap:20px;
}
.pcard{
border-radius:var(--r);overflow:hidden;
background:var(--offwhite);border:1px solid var(--border);
transition:all 0.35s var(--ease);cursor:pointer;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow2);border-color:var(--border2);}
.pcard.featured{grid-column:span 2;}
.pcard-visual{
height:220px;display:flex;align-items:center;justify-content:center;
font-size:5rem;position:relative;overflow:hidden;
transition:transform 0.4s var(--ease);
}
.pcard.featured .pcard-visual{height:300px;}
.pcard:hover .pcard-visual{transform:scale(1.04);}
.pcard-overlay{
position:absolute;inset:0;
background:linear-gradient(135deg,var(--accent),var(--accent2));
display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity 0.3s;
}
.pcard:hover .pcard-overlay{opacity:0.92;}
.pcard-overlay span{
color:var(--white);font-weight:800;font-size:0.95rem;
display:flex;align-items:center;gap:7px;
}
.pcard-body{padding:22px;}
.pcard-cat{
font-family:'DM Mono',monospace;font-size:0.67rem;
color:var(--accent);font-weight:500;letter-spacing:1.5px;
text-transform:uppercase;margin-bottom:7px;
}
.pcard-title{font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:8px;}
.pcard-desc{font-size:0.84rem;color:var(--ink3);line-height:1.6;}
.pcard-results{
display:flex;gap:12px;margin-top:12px;padding-top:12px;
border-top:1px solid var(--border);flex-wrap:wrap;
}
.pcard-result{
font-family:'DM Mono',monospace;font-size:0.72rem;
background:rgba(0,87,255,0.06);color:var(--accent2);
border:1px solid rgba(0,87,255,0.15);
padding:3px 10px;border-radius:20px;font-weight:600;
}
/* ── Pricing ── */
#pricing{background:var(--ink);}
#pricing .section-title{color:var(--white);}
#pricing .section-label{color:var(--yellow);}
#pricing .section-desc{color:rgba(255,255,255,0.6);}
.pricing-toggle{
display:flex;align-items:center;gap:14px;
justify-content:center;margin:40px 0;
}
.ptl{font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.5);}
.ptl.on{color:var(--white);}
.pswitch{
width:50px;height:28px;border-radius:14px;
background:rgba(255,255,255,0.15);border:none;
position:relative;cursor:none;transition:background 0.3s;
}
.pswitch::after{
content:'';position:absolute;top:3px;left:3px;
width:22px;height:22px;border-radius:50%;
background:var(--yellow);transition:transform 0.3s var(--ease);
}
.pswitch.yr::after{transform:translateX(22px);}
.pswitch.yr{background:rgba(255,225,53,0.25);}
.save-tag{
background:var(--accent3);color:var(--white);
font-family:'DM Mono',monospace;font-size:0.68rem;font-weight:700;
padding:3px 10px;border-radius:20px;
}
.pricing-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:18px;align-items:start;
}
.prc{
border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-lg);
padding:36px;position:relative;
transition:transform 0.3s var(--ease),box-shadow 0.3s;
background:rgba(255,255,255,0.04);
}
.prc:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.prc.pop{
background:var(--white);border-color:var(--white);
box-shadow:0 24px 80px rgba(255,255,255,0.15);
}
.pop-tag{
position:absolute;top:-14px;left:50%;transform:translateX(-50%);
background:var(--accent);color:var(--white);
font-family:'DM Mono',monospace;font-size:0.68rem;font-weight:700;
padding:5px 16px;border-radius:20px;white-space:nowrap;
letter-spacing:1px;text-transform:uppercase;
}
.prc-plan{
font-family:'DM Mono',monospace;font-size:0.7rem;font-weight:500;
letter-spacing:2.5px;text-transform:uppercase;
color:rgba(255,255,255,0.4);margin-bottom:14px;
}
.prc.pop .prc-plan{color:var(--ink3);}
.prc-price{
display:flex;align-items:flex-start;gap:4px;margin-bottom:8px;
}
.prc-cur{font-size:1.3rem;font-weight:700;margin-top:10px;color:rgba(255,255,255,0.6);}
.prc.pop .prc-cur{color:var(--ink2);}
.prc-num{
font-family:'Bebas Neue',sans-serif;font-size:4rem;
line-height:1;color:var(--white);
}
.prc.pop .prc-num{color:var(--ink);}
.prc-per{font-size:0.85rem;color:rgba(255,255,255,0.4);align-self:flex-end;margin-bottom:8px;}
.prc.pop .prc-per{color:var(--ink3);}
.prc-desc{
font-size:0.84rem;color:rgba(255,255,255,0.5);
margin-bottom:24px;padding-bottom:24px;
border-bottom:1px solid rgba(255,255,255,0.1);line-height:1.6;
}
.prc.pop .prc-desc{color:var(--ink2);border-color:var(--border);}
.prc-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.pf{display:flex;align-items:flex-start;gap:9px;font-size:0.88rem;color:rgba(255,255,255,0.7);}
.prc.pop .pf{color:var(--ink2);}
.pf.off{opacity:0.3;}
.pf-ck{
width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:1px;
display:flex;align-items:center;justify-content:center;
font-size:0.6rem;font-weight:800;
background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);
}
.prc.pop .pf-ck{background:rgba(255,61,0,0.1);color:var(--accent);}
.prc-btn{
display:block;width:100%;padding:13px;text-align:center;
border-radius:50px;font-weight:700;font-size:0.92rem;
transition:all 0.25s var(--ease);
border:1.5px solid rgba(255,255,255,0.2);
color:var(--white);background:transparent;cursor:none;
font-family:'Outfit',sans-serif;
}
.prc-btn:hover{border-color:var(--white);background:rgba(255,255,255,0.1);}
.prc.pop .prc-btn{background:var(--accent);color:var(--white);border-color:var(--accent);}
.prc.pop .prc-btn:hover{background:#e03200;box-shadow:0 8px 24px rgba(255,61,0,0.35);}
/* ── Testimonials ── */
#testimonials{background:var(--offwhite);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
.tc{
background:var(--white);border:1px solid var(--border);
border-radius:var(--r);padding:30px;
transition:all 0.3s var(--ease);position:relative;
}
.tc:hover{box-shadow:var(--shadow2);transform:translateY(-3px);}
.tc.feat{background:var(--ink);border-color:var(--ink);}
.tc-stars{font-size:0.8rem;letter-spacing:2px;color:#f59e0b;margin-bottom:14px;}
.tc-q{
font-family:'Bebas Neue',sans-serif;font-size:3.5rem;
color:var(--accent);line-height:1;opacity:0.3;margin-bottom:4px;
}
.tc.feat .tc-q{color:var(--yellow);}
.tc-text{font-size:0.9rem;line-height:1.75;color:var(--ink2);margin-bottom:22px;}
.tc.feat .tc-text{color:rgba(255,255,255,0.7);}
.tc-author{display:flex;align-items:center;gap:12px;}
.tc-av{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:0.9rem;background:var(--accent);color:var(--white);
}
.tc-name{font-weight:800;font-size:0.92rem;color:var(--ink);}
.tc.feat .tc-name{color:var(--white);}
.tc-role{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--ink3);}
.tc.feat .tc-role{color:rgba(255,255,255,0.45);}
/* ── Process ── */
#process{background:var(--white);}
.process-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:0;position:relative;margin-top:56px;
}
.process-grid::before{
content:'';position:absolute;
top:36px;left:10%;right:10%;height:1.5px;
background:repeating-linear-gradient(90deg,var(--border) 0,var(--border) 8px,transparent 8px,transparent 16px);
z-index:0;
}
.ps{padding:0 20px;text-align:center;position:relative;z-index:1;}
.ps-num{
width:72px;height:72px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Bebas Neue',sans-serif;font-size:1.6rem;
margin:0 auto 20px;
background:var(--white);border:2px solid var(--border);
color:var(--ink3);
transition:all 0.3s var(--ease);
}
.ps:hover .ps-num{
background:var(--accent);border-color:var(--accent);
color:var(--white);transform:scale(1.1);
box-shadow:0 8px 24px rgba(255,61,0,0.3);
}
.ps-title{font-weight:800;font-size:1rem;color:var(--ink);margin-bottom:8px;}
.ps-desc{font-size:0.83rem;color:var(--ink3);line-height:1.65;}
/* ── FAQ ── */
#faq{background:var(--offwhite);}
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-item{
border:1px solid var(--border);border-radius:var(--r-sm);
margin-bottom:10px;overflow:hidden;background:var(--white);
transition:all 0.3s var(--ease);
}
.faq-item.open{border-color:var(--accent);box-shadow:0 4px 20px rgba(255,61,0,0.1);}
.faq-q{
display:flex;justify-content:space-between;align-items:center;
padding:18px 22px;cursor:none;
font-weight:700;font-size:0.95rem;color:var(--ink);
user-select:none;transition:color 0.2s;
}
.faq-q:hover{color:var(--accent);}
.faq-icon{
width:28px;height:28px;border-radius:50%;flex-shrink:0;
background:var(--light);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:1.1rem;color:var(--ink3);
transition:all 0.3s var(--ease);
}
.faq-item.open .faq-icon{
transform:rotate(45deg);background:var(--accent);
border-color:var(--accent);color:var(--white);
}
.faq-body{
padding:0 22px;max-height:0;overflow:hidden;
font-size:0.9rem;color:var(--ink2);line-height:1.8;
transition:max-height 0.4s var(--ease),padding 0.3s;
}
.faq-item.open .faq-body{max-height:300px;padding-bottom:20px;}
/* ── Contact ── */
#contact{background:var(--white);}
.contact-layout{
display:grid;grid-template-columns:1fr 1.5fr;gap:72px;align-items:start;
}
.contact-side h3{
font-family:'Bebas Neue',sans-serif;font-size:2.8rem;
line-height:1.05;color:var(--ink);margin-bottom:16px;
}
.contact-side h3 span{color:var(--accent);}
.contact-side p{font-size:0.93rem;color:var(--ink2);margin-bottom:32px;line-height:1.75;}
.cinfo{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;}
.cinfo-icon{
width:44px;height:44px;border-radius:11px;flex-shrink:0;
background:var(--yellow);
display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.cinfo-label{font-family:'DM Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--ink3);margin-bottom:3px;}
.cinfo-val{font-weight:700;font-size:0.92rem;color:var(--ink);}
.socials{display:flex;gap:8px;margin-top:28px;}
.soc{
width:40px;height:40px;border-radius:10px;
background:var(--light);border:1.5px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:0.9rem;color:var(--ink2);
transition:all 0.25s var(--ease);
}
.soc:hover{background:var(--ink);color:var(--white);border-color:var(--ink);transform:translateY(-2px);}
/* Form */
.cform{
background:var(--offwhite);border:1px solid var(--border);
border-radius:var(--r-lg);padding:36px;
}
.cform-title{
font-family:'Outfit',sans-serif;font-weight:800;
font-size:1.3rem;color:var(--ink);margin-bottom:5px;
}
.cform-sub{font-size:0.85rem;color:var(--ink3);margin-bottom:26px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ff{margin-bottom:14px;}
.ff label{
display:block;font-family:'DM Mono',monospace;
font-size:0.68rem;font-weight:500;color:var(--ink3);
text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;
}
.ff input,.ff textarea,.ff select{
width:100%;padding:12px 15px;
background:var(--white);border:1.5px solid var(--border);
border-radius:var(--r-sm);font-family:'Outfit',sans-serif;
font-size:0.92rem;color:var(--ink);outline:none;
transition:border-color 0.25s,box-shadow 0.25s;
}
.ff input:focus,.ff textarea:focus,.ff select:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(255,61,0,0.08);
}
.ff input::placeholder,.ff textarea::placeholder{color:var(--ink3);}
.ff select{cursor:none;}
.ff select option{background:var(--white);}
.ff textarea{resize:vertical;min-height:110px;}
.form-submit{
width:100%;padding:14px;
background:var(--accent);color:var(--white);border:none;
border-radius:50px;font-family:'Outfit',sans-serif;
font-size:0.95rem;font-weight:800;cursor:none;
transition:all 0.25s var(--ease);margin-top:4px;
letter-spacing:0.3px;
}
.form-submit:hover{background:#e03200;transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,61,0,0.3);}
/* ── CTA Banner ── */
.cta-banner{
background:linear-gradient(135deg,var(--accent) 0%,#ff7043 50%,var(--accent2) 100%);
padding:80px 5%;text-align:center;
position:relative;overflow:hidden;
}
.cta-banner::before{
content:'HIRE US';
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-family:'Bebas Neue',sans-serif;font-size:18vw;
color:rgba(255,255,255,0.05);white-space:nowrap;
pointer-events:none;letter-spacing:-3px;
}
.cta-banner h2{
font-family:'Bebas Neue',sans-serif;
font-size:clamp(2.5rem,6vw,5rem);
color:var(--white);line-height:1;margin-bottom:16px;letter-spacing:-0.5px;
}
.cta-banner p{color:rgba(255,255,255,0.8);max-width:500px;margin:0 auto 36px;font-size:1.05rem;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.btn-white{
display:inline-flex;align-items:center;gap:8px;
padding:14px 32px;border-radius:50px;
background:var(--white);color:var(--accent);
font-size:0.95rem;font-weight:800;
transition:all 0.25s var(--ease);
}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.2);}
.btn-outline-w{
display:inline-flex;align-items:center;gap:8px;
padding:14px 30px;border-radius:50px;
background:transparent;color:var(--white);
font-size:0.95rem;font-weight:700;
border:2px solid rgba(255,255,255,0.5);
transition:all 0.25s var(--ease);
}
.btn-outline-w:hover{border-color:var(--white);background:rgba(255,255,255,0.15);}
/* ── Footer ── */
footer{
background:var(--ink);color:rgba(255,255,255,0.7);
padding:64px 5% 0;
}
.footer-grid{
display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
max-width:1160px;margin:0 auto;padding-bottom:56px;
}
.footer-brand .nav-logo{color:var(--white);margin-bottom:16px;}
.footer-brand .nav-logo-mark{background:var(--yellow);color:var(--ink);}
.footer-brand .nav-logo span{color:var(--yellow);}
.footer-brand p{font-size:0.87rem;max-width:280px;line-height:1.7;margin-bottom:22px;}
.footer-news input{
width:100%;padding:11px 14px;
background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);
border-radius:8px;color:var(--white);font-family:'Outfit',sans-serif;
font-size:0.88rem;margin-bottom:8px;outline:none;
}
.footer-news input::placeholder{color:rgba(255,255,255,0.35);}
.footer-news input:focus{border-color:rgba(255,225,53,0.5);}
.footer-news button{
width:100%;padding:11px;background:var(--yellow);
color:var(--ink);border:none;border-radius:8px;
font-weight:800;font-size:0.88rem;cursor:none;
font-family:'Outfit',sans-serif;transition:all 0.25s var(--ease);
}
.footer-news button:hover{background:#ffd700;transform:translateY(-1px);}
.footer-col h4{
font-family:'DM Mono',monospace;font-size:0.68rem;
text-transform:uppercase;letter-spacing:2px;
color:rgba(255,255,255,0.4);margin-bottom:18px;
}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{
font-size:0.88rem;color:rgba(255,255,255,0.6);
transition:color 0.2s;display:flex;align-items:center;gap:6px;
}
.footer-col ul li a:hover{color:var(--yellow);}
.footer-bottom{
max-width:1160px;margin:0 auto;
border-top:1px solid rgba(255,255,255,0.08);
padding:22px 0;
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-size:0.8rem;color:rgba(255,255,255,0.35);}
.footer-bottom span{color:var(--yellow);}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:0.8rem;color:rgba(255,255,255,0.35);transition:color 0.2s;}
.footer-bottom-links a:hover{color:var(--yellow);}
/* ── Footer col headings (now h3 in markup) ── */
.footer-col-h,
.footer-col h3,
.footer-col h4{
font-family:'DM Mono',monospace;font-size:0.68rem;font-weight:500;
text-transform:uppercase;letter-spacing:2px;
color:rgba(255,255,255,0.4);margin-bottom:18px;
}
/* ── FAQ q is now a