/*
Theme Name: threeDE — 3D Services & Solutions
Theme URI: https://threede.com
Author: threeDE
Description: Premium dark-mode 3D agency WordPress theme. Pixel-perfect match to original Next.js design.
Version: 7.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: threede
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --color-primary: #66B234;
  --color-primary-dim: rgba(102,178,52,0.08);
  --color-primary-border: rgba(102,178,52,0.2);
  --color-bg: #050505;
  --color-surface: rgba(255,255,255,0.03);
  --color-border: rgba(255,255,255,0.08);
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

*, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background-color: #050505;
  color: #F5F5F5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
::selection { background: rgba(102,178,52,0.3); color: #fff; }

/* ── GLASS UTILITIES ── */
.glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); }
.glass-strong { background: rgba(255,255,255,0.06); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.12); }
.glass-green { background: rgba(102,178,52,0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(102,178,52,0.2); }
.glass-card { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.06); transition: all 0.5s cubic-bezier(0.23,1,0.32,1); }
.glass-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(102,178,52,0.3); box-shadow: 0 0 40px rgba(102,178,52,0.08); transform: translateY(-4px); }
.glass-input { background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; }
.glass-input:focus { background: rgba(255,255,255,0.06); border-color: rgba(102,178,52,0.5); box-shadow: 0 0 20px rgba(102,178,52,0.1); outline: none; }

/* ── GRADIENT TEXT ── */
.gradient-text { background: linear-gradient(135deg,#66B234 0%,#4ADE80 50%,#66B234 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── GRID / NOISE PATTERNS ── */
.grid-pattern { background-image: linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size: 60px 60px; }
.noise { position: relative; }
.noise::after { content:''; position:absolute; inset:0; opacity:0.03; 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='1'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; }

/* ── ANIMATIONS ── */
@keyframes fade-up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes rotate-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes bounce-dots { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-6px); } }
@keyframes slide-down { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.animate-fade-up { animation: fade-up 0.7s ease both; }
.animate-fade-in { animation: fade-in 0.5s ease both; }
.animate-marquee { animation: marquee 30s linear infinite; display:flex; width:max-content; }
.animate-rotate-slow { animation: rotate-slow 20s linear infinite; }
.animate-pulse { animation: pulse-dot 2s ease-in-out infinite; }

/* ── CONTAINER ── */
.td-container { width:100%; max-width:1320px; margin:0 auto; padding:0 24px; }

/* ── HEADER ── */
#site-header { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; transition:padding 0.5s ease; }
#site-header.scrolled { padding:12px 0; }
.admin-bar #site-header { top:32px; }
@media(max-width:782px){.admin-bar #site-header{top:46px;}}
.td-nav-pill { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; border-radius:9999px; background:rgba(255,255,255,0.03); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.06); transition:background 0.5s,box-shadow 0.5s; }
#site-header.scrolled .td-nav-pill { background:rgba(10,10,10,0.7); backdrop-filter:blur(24px); box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.site-logo { display:flex; align-items:center; gap:2px; text-decoration:none; flex-shrink:0; }
.site-logo img { height:38px; width:auto; }
.logo-text-1 { font-size:24px; font-weight:800; letter-spacing:-0.5px; color:#fff; font-family:var(--font-display); }
.logo-text-2 { font-size:24px; font-weight:800; letter-spacing:-0.5px; color:#66B234; font-family:var(--font-display); }
.td-nav-links { display:flex; align-items:center; gap:2px; }
.td-nav-link { position:relative; display:inline-flex; align-items:center; padding:10px 18px; font-size:14px; font-weight:500; color:rgba(255,255,255,0.6); border-radius:9999px; text-decoration:none; transition:color 0.3s,background 0.3s; }
.td-nav-link:hover, .td-nav-link.active { color:#fff; background:rgba(255,255,255,0.05); }
.td-nav-link span.underline { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:0; height:2px; background:#66B234; border-radius:2px; transition:width 0.3s; }
.td-nav-link:hover span.underline, .td-nav-link.active span.underline { width:14px; }
.td-header-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.td-cta-btn { display:inline-flex; align-items:center; gap:8px; background:#66B234; color:#fff; padding:10px 22px; border-radius:9999px; font-size:14px; font-weight:600; text-decoration:none; transition:background 0.3s,box-shadow 0.3s; white-space:nowrap; }
.td-cta-btn:hover { background:#5aa32d; box-shadow:0 0 30px rgba(102,178,52,0.3); color:#fff; }
.td-cta-btn svg { transition:transform 0.2s; }
.td-cta-btn:hover svg { transform:translate(1px,-1px); }
.td-mob-toggle { display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:9999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#fff; cursor:pointer; padding:0; }
.td-mob-toggle .ic-close { display:none; }
.td-mob-toggle.is-open .ic-menu { display:none; }
.td-mob-toggle.is-open .ic-close { display:block; }
@media(max-width:1024px){
  .td-nav-links,.td-cta-btn { display:none; }
  .td-mob-toggle { display:flex; }
}
.td-mob-overlay { position:fixed; inset:0; z-index:999; opacity:0; pointer-events:none; transition:opacity 0.4s; }
.td-mob-overlay.is-open { opacity:1; pointer-events:auto; }
.td-mob-bg { position:absolute; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(4px); }
.td-mob-panel { position:absolute; top:88px; left:16px; right:16px; background:rgba(15,15,15,0.96); backdrop-filter:blur(40px); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:20px; transform:translateY(-24px); opacity:0; transition:transform 0.4s,opacity 0.4s; }
.td-mob-overlay.is-open .td-mob-panel { transform:translateY(0); opacity:1; }
.td-mob-links { display:flex; flex-direction:column; gap:2px; }
.td-mob-link { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-radius:14px; font-size:15px; font-weight:500; color:rgba(255,255,255,0.8); text-decoration:none; transition:color 0.2s,background 0.2s; }
.td-mob-link:hover { color:#fff; background:rgba(255,255,255,0.05); }
.td-mob-footer { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.06); }
.td-mob-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:#66B234; color:#fff; padding:14px; border-radius:14px; font-size:15px; font-weight:700; text-decoration:none; }
.td-mob-cta:hover { background:#5aa32d; color:#fff; }

/* ── HERO ── */
#hero-section { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:160px 0 80px; }
.hero-badge { display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-radius:9999px; margin-bottom:32px; animation:fade-up 0.7s ease both; }
.hero-badge-dot { width:8px; height:8px; border-radius:50%; background:#66B234; animation:pulse-dot 2s ease-in-out infinite; }
.hero-badge-text { color:#66B234; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }
.hero-h1 { font-family:var(--font-display); font-size:clamp(48px,7vw,80px); font-weight:800; line-height:1.05; letter-spacing:-0.02em; margin-bottom:32px; animation:fade-up 0.7s ease both; }
.hero-subtitle { color:rgba(255,255,255,0.5); font-size:clamp(16px,2vw,19px); line-height:1.7; max-width:580px; margin-bottom:48px; animation:fade-up 0.7s 0.2s ease both; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:80px; animation:fade-up 0.7s 0.3s ease both; }
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:#66B234; color:#fff; padding:16px 32px; border-radius:9999px; font-size:15px; font-weight:700; text-decoration:none; transition:background 0.3s,box-shadow 0.3s; }
.btn-primary:hover { background:#5aa32d; box-shadow:0 0 40px rgba(102,178,52,0.3); color:#fff; }
.btn-primary svg { transition:transform 0.2s; }
.btn-primary:hover svg { transform:translate(1px,-1px); }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); color:#fff; padding:16px 32px; border-radius:9999px; font-size:15px; font-weight:700; text-decoration:none; transition:background 0.3s; backdrop-filter:blur(20px); }
.btn-secondary:hover { background:rgba(255,255,255,0.06); color:#fff; }
.btn-secondary svg { color:rgba(255,255,255,0.4); transition:transform 0.2s; }
.btn-secondary:hover svg { transform:translateX(4px); }
.hero-stats { display:flex; flex-wrap:wrap; align-items:center; gap:32px; animation:fade-up 0.7s 0.4s ease both; }
.hero-stat-num { display:block; font-family:var(--font-display); font-size:clamp(32px,4vw,42px); font-weight:800; color:#fff; letter-spacing:-0.03em; }
.hero-stat-label { display:block; color:rgba(255,255,255,0.3); font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }
.hero-orb-1 { position:absolute; top:-200px; right:-100px; width:600px; height:600px; border-radius:50%; background:rgba(102,178,52,0.07); filter:blur(120px); pointer-events:none; }
.hero-orb-2 { position:absolute; bottom:-200px; left:-100px; width:500px; height:500px; border-radius:50%; background:rgba(102,178,52,0.04); filter:blur(100px); pointer-events:none; }
.hero-ring-1 { position:absolute; top:50%; right:10%; transform:translateY(-50%); width:500px; height:500px; border:1px solid rgba(255,255,255,0.03); border-radius:50%; }
.hero-ring-2 { position:absolute; top:50%; right:10%; transform:translateY(-50%); width:350px; height:350px; border:1px solid rgba(102,178,52,0.08); border-radius:50%; animation:rotate-slow 20s linear infinite; }

/* ── SECTION SHARED ── */
.td-section { position:relative; padding:112px 0; overflow:hidden; }
.td-section-sm { padding:64px 0; }
.td-divider { position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent); }
.section-label { display:block; color:#66B234; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; }
.section-title { font-family:var(--font-display); font-size:clamp(32px,4vw,48px); font-weight:800; color:#fff; line-height:1.1; letter-spacing:-0.02em; }
.section-header { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:64px; }
.section-link { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,0.5); font-size:14px; font-weight:500; text-decoration:none; transition:color 0.3s; }
.section-link:hover { color:#66B234; }
.section-link svg { transition:transform 0.2s; }
.section-link:hover svg { transform:translate(2px,-2px); }

/* ── MARQUEE ── */
#marquee-section { border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); padding:64px 0; overflow:hidden; }
.marquee-track { display:flex; animation:marquee 30s linear infinite; width:max-content; }
.marquee-item { font-family:var(--font-display); font-size:clamp(28px,4vw,48px); font-weight:800; color:rgba(255,255,255,0.04); letter-spacing:-0.02em; white-space:nowrap; margin-right:48px; }
.marquee-dot { width:8px; height:8px; border-radius:50%; background:rgba(102,178,52,0.3); flex-shrink:0; margin-right:48px; }

/* ── SERVICES GRID ── */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.services-grid{grid-template-columns:1fr;}}
.svc-card { position:relative; display:flex; flex-direction:column; min-height:260px; padding:24px; border-radius:16px; overflow:hidden; text-decoration:none; transition:all 0.5s cubic-bezier(0.23,1,0.32,1); }
.svc-card:hover { transform:translateY(-4px); }
.svc-card:hover .svc-hover-glow { opacity:1; }
.svc-hover-glow { position:absolute; top:0; right:0; width:128px; height:128px; background:rgba(102,178,52,0.06); border-radius:50%; filter:blur(40px); opacity:0; transition:opacity 0.7s; pointer-events:none; }
.svc-icon-wrap { width:48px; height:48px; border-radius:12px; background:rgba(102,178,52,0.08); border:1px solid rgba(102,178,52,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:background 0.5s; }
.svc-card:hover .svc-icon-wrap { background:rgba(102,178,52,0.15); }
.svc-title { color:#fff; font-size:16px; font-weight:700; margin-bottom:8px; transition:color 0.3s; }
.svc-card:hover .svc-title { color:#66B234; }
.svc-desc { color:rgba(255,255,255,0.4); font-size:13px; line-height:1.6; margin-bottom:auto; }
.svc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.svc-tag { font-size:11px; color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); padding:4px 10px; border-radius:9999px; }

/* ── PORTFOLIO GRID ── */
.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:768px){.portfolio-grid{grid-template-columns:1fr;}}
.port-card { position:relative; border-radius:24px; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:32px; text-decoration:none; transition:transform 0.5s cubic-bezier(0.23,1,0.32,1); }
.port-card:hover { transform:translateY(-4px); }
.port-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity 0.7s; }
.port-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 60%,transparent 100%); }
.port-card-gradient { position:absolute; inset:0; }
.port-card-grid { position:absolute; inset:0; }
.port-arrow { position:absolute; top:32px; left:32px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition:background 0.5s,border-color 0.5s; }
.port-card:hover .port-arrow { background:#66B234; border-color:#66B234; }
.port-circles { position:absolute; top:32px; right:32px; }
.port-circle-1 { width:80px; height:80px; border-radius:50%; border:1px solid rgba(255,255,255,0.06); transition:transform 0.7s; }
.port-card:hover .port-circle-1 { transform:scale(1.1); }
.port-circle-2 { position:absolute; top:20px; left:20px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(102,178,52,0.15); }
.port-cat { display:inline-block; color:#66B234; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; background:rgba(102,178,52,0.1); padding:4px 12px; border-radius:9999px; margin-bottom:12px; }
.port-title { color:#fff; font-family:var(--font-display); font-size:clamp(20px,2.5vw,28px); font-weight:700; transition:color 0.3s; }
.port-card:hover .port-title { color:#66B234; }

/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){.testimonials-grid{grid-template-columns:1fr;}}
.testi-card { padding:32px; border-radius:16px; display:flex; flex-direction:column; }
.testi-stars { display:flex; gap:4px; margin-bottom:24px; }
.testi-star { color:#66B234; }
.testi-text { color:rgba(255,255,255,0.6); font-size:14px; line-height:1.7; margin-bottom:32px; flex:1; }
.testi-author { display:flex; align-items:center; gap:16px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06); }
.testi-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#66B234,#3d7a1a); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; flex-shrink:0; }
.testi-name { color:#fff; font-size:14px; font-weight:600; }
.testi-role { color:rgba(255,255,255,0.3); font-size:12px; }

/* ── CTA SECTION ── */
.cta-box { position:relative; border-radius:32px; padding:80px; text-align:center; overflow:hidden; }
@media(max-width:768px){.cta-box{padding:48px 24px;}}
.cta-orb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; height:400px; background:rgba(102,178,52,0.08); border-radius:50%; filter:blur(100px); pointer-events:none; }
.cta-title { font-family:var(--font-display); font-size:clamp(32px,4vw,52px); font-weight:800; color:#fff; line-height:1.1; margin-bottom:24px; }
.cta-sub { color:rgba(255,255,255,0.4); font-size:clamp(15px,2vw,18px); max-width:480px; margin:0 auto 40px; }
.cta-buttons { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }

/* ── SERVICE DETAIL PAGE ── */
.svc-detail-hero { position:relative; padding:144px 0 96px; overflow:hidden; }
.svc-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media(max-width:900px){.svc-detail-grid{grid-template-columns:1fr;}}
.svc-highlights-card { border-radius:24px; padding:40px; position:relative; overflow:hidden; }
.svc-highlights-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.svc-highlight-item { text-align:center; }
.svc-highlight-val { font-family:var(--font-display); font-size:clamp(28px,3vw,40px); font-weight:800; color:#fff; margin-bottom:4px; }
.svc-highlight-label { color:rgba(255,255,255,0.4); font-size:13px; }
.svc-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06); }
.svc-tool { font-size:12px; color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); padding:6px 12px; border-radius:9999px; }
.svc-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.svc-feature-item { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.6); font-size:14px; }
.svc-deliverables-card { border-radius:24px; padding:32px; position:sticky; top:128px; }
.svc-deliverable { display:flex; align-items:flex-start; gap:12px; font-size:14px; margin-bottom:16px; }
.svc-deliverable-num { width:24px; height:24px; border-radius:8px; background:rgba(102,178,52,0.08); border:1px solid rgba(102,178,52,0.15); display:flex; align-items:center; justify-content:center; color:#66B234; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; }
.svc-deliverable-text { color:rgba(255,255,255,0.5); }

/* ── PRICING ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}}
.pricing-card { border-radius:24px; padding:40px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.pricing-card.highlighted { border-color:rgba(102,178,52,0.4); background:rgba(102,178,52,0.06); }
.pricing-card.highlighted::before { content:'Most Popular'; position:absolute; top:20px; right:20px; background:#66B234; color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:9999px; text-transform:uppercase; letter-spacing:0.05em; }
.pricing-name { color:#66B234; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:12px; }
.pricing-price { font-family:var(--font-display); font-size:clamp(36px,4vw,48px); font-weight:800; color:#fff; margin-bottom:4px; }
.pricing-desc { color:rgba(255,255,255,0.4); font-size:14px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.06); }
.pricing-features { list-style:none; padding:0; margin:0 0 32px; flex:1; }
.pricing-feature { display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,0.6); font-size:14px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.pricing-feature svg { color:#66B234; flex-shrink:0; margin-top:2px; }
.pricing-btn { display:block; text-align:center; padding:14px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; transition:all 0.3s; }
.pricing-btn-primary { background:#66B234; color:#fff; }
.pricing-btn-primary:hover { background:#5aa32d; box-shadow:0 0 20px rgba(102,178,52,0.3); color:#fff; }
.pricing-btn-ghost { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.06); }
.pricing-btn-ghost:hover { background:rgba(255,255,255,0.08); color:#fff; }

/* ── PROCESS STEPS ── */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.process-grid{grid-template-columns:1fr;}}
.process-step { padding:28px; border-radius:20px; position:relative; }
.process-num { font-family:var(--font-display); font-size:48px; font-weight:800; color:rgba(102,178,52,0.15); line-height:1; margin-bottom:16px; }
.process-title { color:#fff; font-size:18px; font-weight:700; margin-bottom:8px; }
.process-desc { color:rgba(255,255,255,0.45); font-size:14px; line-height:1.6; margin-bottom:16px; }
.process-details { list-style:none; padding:0; margin:0; }
.process-detail { display:flex; align-items:flex-start; gap:8px; color:rgba(255,255,255,0.35); font-size:13px; padding:4px 0; }
.process-detail::before { content:'→'; color:#66B234; flex-shrink:0; font-size:12px; margin-top:2px; }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid rgba(255,255,255,0.06); }
.faq-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; padding:24px 0; background:none; border:none; color:#fff; text-align:left; font-size:16px; font-weight:600; cursor:pointer; transition:color 0.3s; }
.faq-trigger:hover { color:#66B234; }
.faq-icon { flex-shrink:0; transition:transform 0.3s; color:rgba(255,255,255,0.4); }
.faq-item.open .faq-icon { transform:rotate(180deg); color:#66B234; }
.faq-answer { overflow:hidden; max-height:0; transition:max-height 0.4s ease; }
.faq-item.open .faq-answer { max-height:300px; }
.faq-answer-inner { padding:0 0 24px; color:rgba(255,255,255,0.5); font-size:15px; line-height:1.7; }

/* ── CASE STUDIES ── */
.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:768px){.case-grid{grid-template-columns:1fr;}}
.case-card { border-radius:24px; padding:40px; position:relative; overflow:hidden; }
.case-results { display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.case-result { display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,0.6); }
.case-result::before { content:'✓'; color:#66B234; font-weight:700; font-size:13px; flex-shrink:0; }

/* ── ABOUT PAGE ── */
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:900px){.about-stats{grid-template-columns:repeat(2,1fr);}}
.about-stat { text-align:center; padding:32px; border-radius:16px; }
.about-stat-icon { color:rgba(102,178,52,0.4); margin:0 auto 16px; display:block; text-align:center; }
.about-stat-val { font-family:var(--font-display); font-size:clamp(32px,4vw,42px); font-weight:800; color:#fff; margin-bottom:4px; }
.about-stat-label { color:rgba(255,255,255,0.3); font-size:13px; text-transform:uppercase; letter-spacing:0.07em; }
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(max-width:768px){.values-grid{grid-template-columns:1fr;}}
.value-card { padding:32px; border-radius:20px; }
.value-icon { width:48px; height:48px; border-radius:12px; background:rgba(102,178,52,0.08); border:1px solid rgba(102,178,52,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:#66B234; }
.value-title { color:#fff; font-size:18px; font-weight:700; margin-bottom:8px; }
.value-desc { color:rgba(255,255,255,0.45); font-size:14px; line-height:1.6; }
.timeline { position:relative; padding-left:32px; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.06); }
.timeline-item { position:relative; padding-bottom:28px; }
.timeline-dot { position:absolute; left:-36px; top:4px; width:8px; height:8px; border-radius:50%; background:#66B234; }
.timeline-year { color:#66B234; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:4px; }
.timeline-event { color:rgba(255,255,255,0.6); font-size:14px; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr;}}
.team-card { padding:28px; border-radius:20px; text-align:center; }
.team-avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,rgba(102,178,52,0.2),rgba(102,178,52,0.05)); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; overflow:hidden; border:1px solid rgba(102,178,52,0.2); }
.team-avatar img { width:100%; height:100%; object-fit:cover; }
.team-avatar span { font-size:28px; font-weight:800; color:#66B234; }
.team-name { color:#fff; font-size:16px; font-weight:600; margin-bottom:4px; }
.team-role { color:rgba(255,255,255,0.4); font-size:13px; }

/* ── CONTACT PAGE ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; }
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-info-cards { display:flex; flex-direction:column; gap:16px; margin-bottom:32px; }
.contact-info-card { display:flex; align-items:flex-start; gap:16px; padding:20px; border-radius:16px; }
.contact-info-icon { width:40px; height:40px; border-radius:12px; background:rgba(102,178,52,0.08); border:1px solid rgba(102,178,52,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#66B234; }
.contact-info-label { color:rgba(255,255,255,0.4); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }
.contact-info-val { color:#fff; font-size:14px; font-weight:500; }
.contact-form-card { padding:40px; border-radius:24px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
.form-field { margin-bottom:16px; }
.form-label { display:block; color:rgba(255,255,255,0.5); font-size:13px; font-weight:500; margin-bottom:8px; }
.form-input, .form-select, .form-textarea { width:100%; padding:14px 16px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:#fff; font-size:14px; font-family:inherit; transition:border-color 0.3s,background 0.3s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:rgba(102,178,52,0.5); background:rgba(255,255,255,0.06); box-shadow:0 0 20px rgba(102,178,52,0.1); }
.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,255,255,0.25); }
.form-select option { background:#1a1a1a; color:#fff; }
.form-textarea { resize:vertical; min-height:130px; }
.form-msg { padding:14px 18px; border-radius:10px; font-size:14px; font-weight:500; margin-bottom:16px; display:none; }
.form-msg.success { background:rgba(102,178,52,0.1); border:1px solid rgba(102,178,52,0.3); color:#66B234; display:block; }
.form-msg.error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#f87171; display:block; }

/* ── PORTFOLIO ARCHIVE ── */
.portfolio-archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){.portfolio-archive-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.portfolio-archive-grid{grid-template-columns:1fr;}}
.port-archive-card { border-radius:20px; overflow:hidden; text-decoration:none; display:block; transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); }
.port-archive-card:hover { transform:translateY(-4px); }
.port-archive-img { height:260px; background-size:cover; background-position:center; background-color:#0d0d0d; position:relative; overflow:hidden; }
.port-archive-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s; }
.port-archive-card:hover .port-archive-img img { transform:scale(1.05); }
.port-archive-info { padding:20px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-top:none; border-radius:0 0 20px 20px; }
.port-archive-cat { color:#66B234; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px; }
.port-archive-title { color:#fff; font-size:16px; font-weight:700; margin-bottom:8px; }
.port-archive-tags { display:flex; flex-wrap:wrap; gap:6px; }
.port-archive-tag { font-size:11px; color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); padding:3px 8px; border-radius:9999px; }

/* ── FILTER TABS ── */
.filter-tabs { display:inline-flex; align-items:center; gap:6px; padding:6px; border-radius:9999px; margin-bottom:40px; }
.filter-tab { padding:10px 24px; border-radius:9999px; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:all 0.3s; background:transparent; color:rgba(255,255,255,0.5); }
.filter-tab:hover { color:#fff; background:rgba(255,255,255,0.05); }
.filter-tab.active { background:#66B234; color:#fff; box-shadow:0 0 20px rgba(102,178,52,0.3); }

/* ── BREADCRUMB ── */
.breadcrumb { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,0.4); font-size:13px; font-weight:500; margin-bottom:32px; text-decoration:none; transition:color 0.3s; }
.breadcrumb:hover { color:#66B234; }
.breadcrumb svg { transition:transform 0.2s; }
.breadcrumb:hover svg { transform:translateX(-2px); }

/* ── FOOTER ── */
#site-footer { background:#050505; position:relative; padding-top:80px; }
.footer-glow { position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:1px; background:linear-gradient(90deg,transparent,rgba(102,178,52,0.4),transparent); }
.footer-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:48px; border-radius:24px; margin-bottom:64px; }
@media(max-width:768px){.footer-cta{flex-direction:column;text-align:center;padding:32px 24px;}}
.footer-cta-title { font-family:var(--font-display); font-size:clamp(20px,2.5vw,28px); font-weight:700; color:#fff; margin-bottom:6px; }
.footer-cta-sub { color:rgba(255,255,255,0.45); font-size:15px; }
.footer-cta-btn { display:inline-flex; align-items:center; gap:8px; background:#66B234; color:#fff; padding:14px 28px; border-radius:9999px; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:background 0.3s,box-shadow 0.3s; }
.footer-cta-btn:hover { background:#5aa32d; box-shadow:0 0 40px rgba(102,178,52,0.3); color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:48px; }
@media(max-width:1200px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand { grid-column:span 1; }
@media(max-width:1200px){.footer-brand{grid-column:span 3;}}
@media(max-width:768px){.footer-brand{grid-column:span 2;}}
.footer-tagline { color:rgba(255,255,255,0.35); font-size:13px; line-height:1.7; margin:16px 0 20px; max-width:260px; }
.footer-socials { display:flex; gap:10px; flex-wrap:wrap; }
.footer-social { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.3s,border-color 0.3s; }
.footer-social:hover { color:#66B234; border-color:rgba(102,178,52,0.3); }
.footer-col-title { color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin:0 0 20px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:rgba(255,255,255,0.38); font-size:13px; text-decoration:none; transition:color 0.3s; }
.footer-links a:hover { color:#66B234; }
.footer-contact-items { display:flex; flex-direction:column; gap:14px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,0.38); font-size:13px; line-height:1.5; text-decoration:none; transition:color 0.3s; }
.footer-contact-item:hover { color:#66B234; }
.footer-contact-icon { color:rgba(102,178,52,0.6); flex-shrink:0; margin-top:1px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding:20px 0 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-copy { color:rgba(255,255,255,0.25); font-size:13px; }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { color:rgba(255,255,255,0.25); font-size:13px; text-decoration:none; transition:color 0.3s; }
.footer-legal a:hover { color:rgba(255,255,255,0.5); }

/* ── BLOG ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card { border-radius:20px; overflow:hidden; text-decoration:none; display:block; transition:transform 0.4s; }
.blog-card:hover { transform:translateY(-4px); }
.blog-thumb { height:200px; background-size:cover; background-position:center; background-color:#0d0d0d; }
.blog-body { padding:24px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-top:none; border-radius:0 0 20px 20px; }
.blog-cat { color:#66B234; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
.blog-title { color:#fff; font-size:17px; font-weight:700; line-height:1.4; margin-bottom:8px; }
.blog-excerpt { color:rgba(255,255,255,0.4); font-size:13px; line-height:1.6; margin-bottom:16px; }
.blog-meta { display:flex; align-items:center; justify-content:space-between; }
.blog-date { color:rgba(255,255,255,0.25); font-size:12px; }
.blog-read-more { display:inline-flex; align-items:center; gap:4px; color:#66B234; font-size:13px; font-weight:600; }

/* ── LIVE CHAT ── */
#td-chat-btn { position:fixed; bottom:24px; right:24px; z-index:9999; width:56px; height:56px; border-radius:50%; background:#66B234; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(102,178,52,0.35); transition:transform 0.2s,background 0.2s; }
#td-chat-btn:hover { background:#5aa32d; transform:scale(1.05); }
#td-chat-badge { position:absolute; top:-4px; right:-4px; width:20px; height:20px; background:#ef4444; border-radius:50%; font-size:10px; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
#td-chat-window { position:fixed; bottom:96px; right:24px; z-index:9999; width:380px; height:520px; border-radius:20px; overflow:hidden; display:none; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,0.5); background:rgba(17,17,17,0.97); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(20px); }
#td-chat-window.open { display:flex; animation:slide-down 0.3s ease; }
.chat-header { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.05); background:rgba(102,178,52,0.06); display:flex; align-items:center; gap:12px; }
.chat-avatar { width:40px; height:40px; border-radius:50%; background:rgba(102,178,52,0.2); display:flex; align-items:center; justify-content:center; color:#66B234; font-weight:700; font-size:14px; position:relative; flex-shrink:0; }
.chat-online-dot { position:absolute; bottom:0; right:0; width:12px; height:12px; background:#22c55e; border-radius:50%; border:2px solid #111; }
.chat-agent-name { color:#fff; font-size:14px; font-weight:600; }
.chat-agent-status { color:#4ade80; font-size:12px; }
.chat-close { margin-left:auto; background:none; border:none; color:rgba(255,255,255,0.5); cursor:pointer; padding:4px; border-radius:6px; transition:color 0.2s; }
.chat-close:hover { color:#fff; }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-track { background:transparent; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }
.chat-msg { display:flex; max-width:80%; }
.chat-msg.visitor { align-self:flex-end; }
.chat-msg.ai { align-self:flex-start; }
.chat-bubble { padding:10px 14px; border-radius:16px; font-size:13px; line-height:1.5; white-space:pre-line; }
.chat-msg.visitor .chat-bubble { background:#66B234; color:#000; border-bottom-right-radius:4px; }
.chat-msg.ai .chat-bubble { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.05); border-bottom-left-radius:4px; }
.chat-typing { display:none; align-self:flex-start; }
.chat-typing.show { display:flex; }
.chat-typing .chat-bubble { display:flex; align-items:center; gap:4px; padding:12px 16px; }
.typing-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3); animation:bounce-dots 1.2s ease infinite; }
.typing-dot:nth-child(2) { animation-delay:0.15s; }
.typing-dot:nth-child(3) { animation-delay:0.3s; }
.chat-quick-replies { padding:8px 16px; display:flex; flex-wrap:wrap; gap:6px; }
.chat-quick-btn { padding:6px 12px; background:rgba(102,178,52,0.1); border:1px solid rgba(102,178,52,0.2); border-radius:9999px; font-size:12px; color:#66B234; cursor:pointer; transition:background 0.2s; font-family:inherit; }
.chat-quick-btn:hover { background:rgba(102,178,52,0.2); }
.chat-input-area { padding:12px 16px; border-top:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.3); }
.chat-input { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:10px 14px; color:#fff; font-size:13px; font-family:inherit; outline:none; transition:border-color 0.2s; }
.chat-input:focus { border-color:rgba(102,178,52,0.4); }
.chat-input::placeholder { color:rgba(255,255,255,0.25); }
.chat-send { width:36px; height:36px; border-radius:10px; background:#66B234; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; flex-shrink:0; }
.chat-send:hover { background:#5aa32d; }
.chat-send:disabled { opacity:0.4; cursor:not-allowed; }
.chat-footer-note { text-align:center; font-size:10px; color:rgba(255,255,255,0.2); padding:6px 0 2px; }

/* ── ADMIN NOTICE ── */
.td-plugin-notice { background:#0d1f0d; border-left:4px solid #66B234; padding:12px 16px; color:#66B234; font-size:14px; }

/* ── PAGE PADDING ── */
main { padding-top:0; }
.page-hero { position:relative; padding:144px 0 80px; overflow:hidden; }
.page-hero .grid-pattern { position:absolute; inset:0; opacity:0.3; }
.page-hero-orb { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(120px); pointer-events:none; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .svc-detail-grid,.pricing-grid,.process-grid,.contact-grid,.case-grid { grid-template-columns:1fr; }
  .svc-features-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .values-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .blog-grid { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .about-stats,.team-grid { grid-template-columns:1fr; }
  .svc-highlights-grid { grid-template-columns:1fr 1fr; }
}