/*
Theme Name: EyeVision 360
Theme URI: https://eyevisionsarl.com
Author: EYE VISION S.A.R.L.
Description: Cinematic dark theme — 100% Customizer-editable with activation auto-populate, zero CPT dependency, mobile-first.
Version: 5.0.0
Text Domain: eyevision360
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
*/

/* ═══ CUSTOM PROPERTIES ═══ */
:root {
  --red: #E31E24;
  --red-glow: #ff2a30;
  --red-dark: #a01218;
  --dark-1: #0a0a0c;
  --dark-2: #111114;
  --dark-3: #1a1a1f;
  --dark-4: #242429;
  --dark-5: #2e2e35;
  --gray-1: #6b6b76;
  --gray-2: #9b9ba8;
  --white: #f0eee9;
  --white-pure: #ffffff;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 72px;
  --pad: clamp(4rem, 8vw, 7rem);
}

/* ═══ RESET ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--red) var(--dark-2)}
body{font-family:var(--font-body);background:var(--dark-1);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
::selection{background:var(--red);color:var(--white-pure)}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--dark-2)}::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}

/* ═══ UTILITIES ═══ */
.ev-c{max-width:1340px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);width:100%}
.s-label{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.s-label::before{content:'';width:40px;height:1px;background:var(--red);flex-shrink:0}
.s-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-bottom:1.5rem;overflow-wrap:break-word}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.vis{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}
.btn-p{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.8rem;background:var(--red);color:var(--white-pure);font-family:var(--font-display);font-size:.85rem;font-weight:700;border-radius:50px;border:none;cursor:pointer;transition:all .35s var(--ease);white-space:nowrap}
.btn-p:hover{background:var(--red-glow);transform:translateY(-2px);box-shadow:0 12px 32px rgba(227,30,36,.3)}
.btn-o{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.8rem;background:transparent;color:var(--white);font-family:var(--font-display);font-size:.85rem;font-weight:700;border:1px solid var(--dark-5);border-radius:50px;cursor:pointer;transition:all .35s var(--ease);white-space:nowrap}
.btn-o:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}

/* ═══ NAVBAR ═══ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;transition:all .4s var(--ease);background:transparent}
.navbar.scrolled{background:rgba(10,10,12,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:800;font-size:1.15rem;flex-shrink:0;z-index:1001}

/* ★ LOGO FIX — image sits before text, both aligned */
.nav-logo-img,
.nav-logo img,
.nav-logo .custom-logo,
.custom-logo-link img{
  height:36px!important;
  width:auto!important;
  max-height:36px!important;
  object-fit:contain;
  display:block;
}
.navbar.scrolled .nav-logo-img,
.navbar.scrolled .nav-logo img,
.navbar.scrolled .nav-logo .custom-logo,
.navbar.scrolled .custom-logo-link img{
  height:30px!important;
  max-height:30px!important;
}
/* Footer logo slightly larger */
.site-footer .nav-logo-img,
.site-footer .nav-logo img,
.site-footer .nav-logo .custom-logo,
.site-footer .custom-logo-link img{
  height:38px!important;
  max-height:38px!important;
}

.logo-e{color:var(--white-pure)}.logo-v{color:var(--white-pure);opacity:.7;font-weight:400}.logo-3{color:var(--red);font-size:.75em;margin-left:.15rem}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-2);transition:color .3s}
.nav-links a:hover{color:var(--white)}
.nav-cta{background:var(--red)!important;color:var(--white-pure)!important;padding:.5rem 1.2rem;border-radius:50px;transition:all .3s}
.nav-cta:hover{background:var(--red-glow)!important}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;padding:8px;-webkit-tap-highlight-color:transparent}
.nav-ham span{width:24px;height:2px;background:var(--white);transition:all .3s;border-radius:1px}
.nav-ham.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-ham.active span:nth-child(2){opacity:0}
.nav-ham.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mob-nav{position:fixed;inset:0;background:rgba(10,10,12,.98);backdrop-filter:blur(30px);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.mob-nav.active{opacity:1;pointer-events:auto}
.mob-nav a{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--white);transition:color .3s}
.mob-nav a:hover,.mob-nav a:active{color:var(--red)}

/* ═══ HERO ═══ */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:calc(var(--nav-h) + 2rem) 0 3rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:orbF 12s ease-in-out infinite}
.hero-orb-1{width:500px;height:500px;background:var(--red);top:-10%;right:-5%}
.hero-orb-2{width:350px;height:350px;background:#ff6b35;bottom:10%;left:-5%;animation-delay:-4s}
.hero-orb-3{width:250px;height:250px;background:var(--red-dark);top:50%;left:40%;animation-delay:-8s}
@keyframes orbF{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-15px,15px) scale(.95)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:center}
.hero-content{max-width:680px}
.hero-title{font-family:var(--font-display);font-size:clamp(2.8rem,5.5vw,5rem);font-weight:800;line-height:1.1;letter-spacing:-.04em;margin-bottom:1.75rem}
.hero-title .line{display:block;clip-path:inset(-10% -20% -10% -5%)}
.hero-title .line span{display:inline-block;animation:slideUp 1s var(--ease) both}
.hero-title .line:nth-child(2) span{animation-delay:.15s}
.hero-title .line:nth-child(3) span{animation-delay:.3s}
@keyframes slideUp{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
.hero-title em{font-style:normal;color:var(--red)}
.hero-desc{font-size:clamp(.95rem,1.2vw,1.15rem);color:var(--gray-2);line-height:1.7;margin-bottom:2rem;max-width:560px}
.hero-btns{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem}
.hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.stat-n{font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:var(--white)}
.stat-l{font-size:.75rem;color:var(--gray-1);text-transform:uppercase;letter-spacing:.08em}
.hero-vis{display:flex;justify-content:center;align-items:center}
.ring{width:320px;height:320px;border-radius:50%;border:1px solid var(--dark-4);position:relative;display:flex;align-items:center;justify-content:center;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ring-dot{position:absolute;top:-4px;left:50%;width:8px;height:8px;background:var(--red);border-radius:50%;box-shadow:0 0 16px var(--red-glow)}
.ring-txt{font-family:var(--font-display);font-size:5rem;font-weight:800;color:var(--white);animation:spin 30s linear infinite reverse;letter-spacing:-.03em}
.ring-txt span{color:var(--red)}

/* ═══ SERVICES ═══ */
.svc-sec{padding:var(--pad) 0}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.svc-head>a{font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--red);white-space:nowrap}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1.5rem}
.svc-card{display:block;background:var(--dark-2);border:1px solid var(--dark-4);border-radius:16px;padding:2.5rem 2rem;transition:all .4s var(--ease);position:relative;overflow:hidden}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:0;transition:opacity .4s}
.svc-card:hover{border-color:var(--dark-5);transform:translateY(-4px)}.svc-card:hover::before{opacity:1}
.svc-icon{font-size:2rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--dark-3);border-radius:14px}
.svc-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:.75rem;color:var(--white)}
.svc-card p{font-size:.9rem;color:var(--gray-2);line-height:1.6;margin-bottom:1.5rem}
.svc-arrow{font-family:var(--font-display);font-size:1.25rem;color:var(--red);opacity:0;transform:translateY(8px);transition:all .4s var(--ease)}
.svc-card:hover .svc-arrow{opacity:1;transform:translateY(0)}

/* ═══ SHOWREEL ═══ */
.sr-sec{padding:var(--pad) 0}
.sr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;aspect-ratio:16/7;border-radius:20px;overflow:hidden;background:var(--dark-2);border:1px solid var(--dark-4);cursor:pointer;transition:all .5s var(--ease);text-decoration:none;color:inherit}
.sr-wrap:hover{border-color:var(--red);transform:scale(1.01)}
.sr-bg{position:absolute;inset:0;z-index:0}.sr-bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
.sr-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,10,12,.3),rgba(10,10,12,.85))}
.sr-ct{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.sr-play{width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;transition:all .4s var(--ease);background:rgba(227,30,36,.15)}
.sr-wrap:hover .sr-play{border-color:var(--red);background:rgba(227,30,36,.3);transform:scale(1.1)}
.sr-play svg{width:28px;height:28px;fill:white}
.sr-ct h3{font-family:var(--font-display);font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:700;color:var(--white)}
.sr-ct p{font-size:.9rem;color:var(--gray-2)}
.sr-tags{position:absolute;bottom:1.5rem;left:1.5rem;display:flex;gap:.5rem;flex-wrap:wrap;z-index:1}
.sr-tag{font-family:var(--font-display);font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .85rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:50px;color:var(--gray-2)}

/* ═══ ABOUT ═══ */
.abt-sec{padding:var(--pad) 0}
.abt-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.abt-vis{position:relative}
.abt-img{border-radius:20px;overflow:hidden;background:var(--dark-2);border:1px solid var(--dark-4);aspect-ratio:4/5}
.abt-img img{width:100%;height:100%;object-fit:cover}
.abt-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:4rem;font-weight:800;color:var(--dark-4);background:linear-gradient(145deg,var(--dark-2),var(--dark-3))}
.abt-card{position:absolute;bottom:-20px;right:-20px;background:var(--dark-2);border:1px solid var(--dark-4);border-radius:14px;padding:1.25rem 1.5rem;text-align:center;backdrop-filter:blur(10px)}
.abt-card .n{font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:var(--red)}
.abt-card .l{font-size:.7rem;color:var(--gray-1);text-transform:uppercase;letter-spacing:.05em}
.abt-text{font-size:.95rem;color:var(--gray-2);line-height:1.7;margin-bottom:1rem}
.abt-feats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.abt-feat{display:flex;align-items:center;gap:.75rem}
.abt-feat-ico{color:var(--red);font-size:.85rem;flex-shrink:0}
.abt-feat span{font-size:.85rem;color:var(--gray-2)}

/* ═══ PORTFOLIO ═══ */
.port-sec{padding:var(--pad) 0}
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.5rem;margin-top:2rem}
.port-item{position:relative;border-radius:16px;overflow:hidden;background:var(--dark-2);border:1px solid var(--dark-4);aspect-ratio:4/3;display:block;transition:transform .4s var(--ease)}
.port-item:hover{transform:translateY(-4px)}
.port-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.port-item:hover img{transform:scale(1.05)}
.port-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.92) 0%,rgba(10,10,12,.3) 40%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;opacity:0;transition:opacity .4s}
.port-item:hover .port-ov{opacity:1}
.port-ov .tag{font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:.5rem}
.port-ov h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700}
.port-ov p{font-size:.8rem;color:var(--gray-2);margin-top:.35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ TESTIMONIALS ═══ */
.test-sec{padding:var(--pad) 0}
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.5rem;margin-top:2rem}
.test-card{background:var(--dark-2);border:1px solid var(--dark-4);border-radius:16px;padding:2rem;transition:border-color .4s}
.test-card:hover{border-color:var(--dark-5)}
.test-stars{color:#f5a623;font-size:.85rem;margin-bottom:1rem;letter-spacing:.1em}
.test-quote{font-size:.95rem;color:var(--gray-2);line-height:1.7;margin-bottom:1.5rem;font-style:italic}
.test-author{display:flex;align-items:center;gap:.75rem}
.test-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--red);background:var(--dark-5);flex-shrink:0}
.test-name{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--white)}
.test-role{font-size:.75rem;color:var(--gray-1)}

/* ═══ CTA ═══ */
.cta-sec{padding:var(--pad) 0;text-align:center;position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;background:var(--red);border-radius:50%;filter:blur(150px);opacity:.06;transform:translate(-50%,-50%);pointer-events:none}
.cta-sec .s-label{justify-content:center}
.cta-desc{max-width:560px;margin:0 auto 2rem;font-size:1rem;color:var(--gray-2);line-height:1.7}
.cta-btns{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* ═══ CLIENTS ═══ */
.cli-sec{padding:3rem 0 var(--pad);border-top:1px solid var(--dark-4)}
.cli-title{text-align:center;font-size:.7rem;font-family:var(--font-display);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-1);margin-bottom:2rem}
.cli-grid{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2.5rem}
.cli-logo{height:30px;width:auto;opacity:.35;filter:grayscale(1) brightness(2);transition:opacity .3s}
.cli-logo:hover{opacity:.7}

/* ═══ PAGE HERO ═══ */
.pg-hero{padding:calc(var(--nav-h) + 3rem) 0 3rem;text-align:center}
.pg-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.75rem}
.pg-hero p{font-size:1.05rem;color:var(--gray-2);max-width:560px;margin:0 auto}

/* ═══ CONTACT ═══ */
.ct-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
.ct-item{margin-bottom:2rem}
.ct-item h4{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:.5rem}
.ct-item p,.ct-item a{font-size:.95rem;color:var(--gray-2);line-height:1.6}
.ct-item a:hover{color:var(--red)}
.ct-form input,.ct-form textarea,.ct-form select{padding:1rem 1.25rem;background:var(--dark-2);border:1px solid var(--dark-4);border-radius:12px;color:var(--white);font-family:var(--font-body);font-size:16px;width:100%;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.ct-form input:focus,.ct-form textarea:focus,.ct-form select:focus{outline:none;border-color:var(--red)}
.ct-form textarea{min-height:140px;resize:vertical}
.ct-form select{cursor:pointer}.ct-form select option{background:var(--dark-2)}
.ct-form form{display:flex;flex-direction:column;gap:1rem}

/* ═══ SERVICE SINGLE ═══ */
.svc-hero{padding:calc(var(--nav-h) + 3rem) 0 2rem}
.svc-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em}
.svc-body{padding-bottom:var(--pad)}
.svc-body-grid{display:grid;grid-template-columns:2fr 1fr;gap:4rem;align-items:start}
.svc-hl{background:var(--dark-2);border:1px solid var(--dark-4);border-radius:16px;padding:2rem}
.svc-hl ul{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.svc-hl li{font-size:.9rem;color:var(--gray-2);padding-left:1.25rem;position:relative}
.svc-hl li::before{content:'✦';position:absolute;left:0;color:var(--red);font-size:.7rem}
.svc-cta{background:var(--dark-2);border:1px solid var(--dark-4);border-radius:16px;padding:2rem;margin-top:1.5rem}
.svc-cta h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:1rem;color:var(--white)}
.svc-cta p{color:var(--gray-2);font-size:.9rem;margin-bottom:1.5rem}

/* Entry content */
.entry-content{color:var(--gray-2);line-height:1.8}
.entry-content p{margin-bottom:1rem}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--font-display);color:var(--white);margin-top:1.5rem;margin-bottom:.75rem}
.entry-content ul,.entry-content ol{padding-left:1.5rem;margin-bottom:1rem}
.entry-content li{margin-bottom:.25rem}
.entry-content a{color:var(--red);text-decoration:underline}
.entry-content img{border-radius:12px;margin:1.5rem 0}

/* ═══ FOOTER ═══ */
.site-footer{background:var(--dark-2);border-top:1px solid var(--dark-4);padding:4rem 0 2rem}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.ft-brand p{font-size:.9rem;color:var(--gray-2);line-height:1.7;margin-top:1rem;max-width:280px}
.ft-social{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}
.ft-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--dark-4);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.6rem;font-weight:700;color:var(--gray-2);transition:all .3s}
.ft-social a:hover{border-color:var(--red);color:var(--red)}
.ft-col h4{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--white);margin-bottom:1rem}
.ft-col ul{list-style:none}.ft-col li{margin-bottom:.5rem}
.ft-col a{font-size:.85rem;color:var(--gray-2);transition:color .3s}.ft-col a:hover{color:var(--red)}
.ft-btm{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid var(--dark-4);flex-wrap:wrap;gap:1rem}
.ft-btm p{font-size:.75rem;color:var(--gray-1)}

/* ═══ 404 ═══ */
.p404{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:1rem;padding:var(--pad) 0}
.p404 h1{font-family:var(--font-display);font-size:clamp(5rem,15vw,10rem);font-weight:800;color:var(--dark-4);line-height:1}
.p404 p{font-size:1.1rem;color:var(--gray-2)}

/* ═══ TOUCH ═══ */
@media(hover:none){.svc-arrow{opacity:.6;transform:translateY(0)}.port-ov{opacity:1}}
.svc-card,.btn-p,.btn-o,.port-item,.nav-cta,.sr-wrap{-webkit-tap-highlight-color:rgba(227,30,36,.15);touch-action:manipulation}
.svc-card:active{transform:scale(.98)}.btn-p:active{transform:scale(.97)}.port-item:active{transform:scale(.98)}

/* ═══ TABLET ≤1024 ═══ */
@media(max-width:1024px){
  :root{--nav-h:64px}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-content{order:1;max-width:100%}.hero-vis{order:0;margin-bottom:.5rem}
  .hero-desc{margin-left:auto;margin-right:auto}.hero-btns{justify-content:center}.hero-stats{justify-content:center}
  .ring{width:220px;height:220px}.ring-txt{font-size:3.5rem}
  .hero-title{font-size:clamp(2.5rem,5.5vw,3.5rem)}
  .s-label{justify-content:center}.s-label::before{display:none}
  .abt-grid{grid-template-columns:1fr;gap:3rem}.abt-vis{max-width:360px;margin:0 auto}.abt-img{aspect-ratio:3/4}.abt-card{bottom:-15px;right:-10px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .ct-grid{grid-template-columns:1fr;gap:3rem}
  .svc-body-grid{grid-template-columns:1fr}
  .nav-links{display:none}.nav-ham{display:flex}
}

/* ═══ PHONE ≤768 ═══ */
@media(max-width:768px){
  :root{--pad:clamp(3rem,6vw,4rem)}
  .hero{min-height:auto;padding:calc(var(--nav-h) + 1.5rem) 0 2.5rem}
  .hero-title{font-size:clamp(2rem,7.5vw,2.8rem)}.hero-desc{font-size:.9rem}
  .hero-stats{gap:1.5rem}.stat-n{font-size:1.4rem}
  .ring{width:170px;height:170px}.ring-txt{font-size:2.8rem}
  .svc-head{flex-direction:column;align-items:center;text-align:center}
  .sr-wrap{aspect-ratio:16/10;border-radius:14px}.sr-play{width:60px;height:60px}.sr-play svg{width:22px;height:22px}
  .sr-tags{bottom:1rem;left:1rem}.sr-tag{font-size:.55rem;padding:.3rem .65rem}
  .abt-feats{grid-template-columns:1fr}.abt-vis{max-width:300px}
  .port-grid{grid-template-columns:1fr}.test-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr;gap:2rem}.ft-btm{flex-direction:column;text-align:center}
  .s-title{font-size:clamp(1.5rem,5.5vw,2.2rem)}.mob-nav a{font-size:1.3rem}
}

/* ═══ SMALL PHONE ≤480 ═══ */
@media(max-width:480px){
  .hero-title{font-size:clamp(1.7rem,8vw,2.2rem)}
  .hero-btns{flex-direction:column;width:100%;align-items:stretch}
  .btn-p,.btn-o{width:100%;justify-content:center;text-align:center}
  .hero-stats{flex-direction:column;gap:.75rem;align-items:center}
  .ring{width:140px;height:140px}.ring-txt{font-size:2.2rem}
  .abt-card{bottom:-10px;right:-5px;padding:.85rem 1rem}.abt-card .n{font-size:1.3rem}
  .abt-vis{max-width:260px}.svc-card{padding:2rem 1.5rem}.cta-sec{padding:3rem 0}
  .sr-wrap{aspect-ratio:16/12}.test-card{padding:1.5rem}.ft-brand p{max-width:100%}
}

/* ═══ SAFE AREAS ═══ */
@supports(padding-top:env(safe-area-inset-top)){
  .navbar{padding-top:max(1rem,env(safe-area-inset-top))}.navbar.scrolled{padding-top:max(.6rem,env(safe-area-inset-top))}
  .site-footer{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
  .ev-c{padding-left:max(clamp(1.25rem,4vw,3rem),env(safe-area-inset-left));padding-right:max(clamp(1.25rem,4vw,3rem),env(safe-area-inset-right))}
}

/* ═══ WP ADMIN BAR ═══ */
body.admin-bar .navbar{top:32px}
@media screen and (max-width:782px){body.admin-bar .navbar{top:46px}}
.wp-block-image img{border-radius:12px}.wp-block-separator{border-color:var(--dark-4)}
.wp-block-quote{border-left:3px solid var(--red);padding-left:1.25rem;color:var(--gray-2);font-style:italic}

/* ── Portfolio Placeholder (when no image uploaded) ── */
.port-placeholder {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
}
.port-placeholder-icon {
  font-size: 3rem; opacity: 0.6;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.port-item { position: relative; min-height: 280px; }
.port-item .port-placeholder + .port-ov { position: relative; }

/* ── Service Detail sections ── */
.svc-detail { scroll-margin-top: 80px; }
.svc-detail h2 { line-height: 1.3; }

/* ══ WHATSAPP FLOATING BUTTON ══ */
.wa-float{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  z-index:99999;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25d366;
  box-shadow:0 2px 12px rgba(37,211,102,.35);
  transition:all .3s ease;
  text-decoration:none;
}
.wa-float:hover{
  transform:scale(1.08);
  box-shadow:0 4px 18px rgba(37,211,102,.45);
}
.wa-float svg{
  width:24px;
  height:24px;
  fill:#fff;
}
@media(max-width:768px){
  .wa-float{bottom:1rem;right:1rem;width:42px;height:42px}
  .wa-float svg{width:22px;height:22px}
}