/*
Theme Name: Likha Web Studio
Theme URI: https://likhawebstudio.com
Author: Likha Web Studio
Description: A professional, conversion-focused WordPress theme for Likha Web Studio agency.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: likha
Tags: agency, portfolio, business, custom-colors, custom-logo, custom-menu
*/

:root {
  /* ── Likha Brand: Teal → Blue gradient palette ── */
  --clr-brand:        #2563C4;   /* primary blue */
  --clr-brand-dark:   #1a4ea0;   /* darker blue */
  --clr-brand-light:  #4d8fe0;   /* lighter blue */
  --clr-brand-pale:   #e6f0fd;   /* very light blue tint */
  --clr-brand-faint:  #f0f6ff;   /* near-white blue */

  --clr-teal:         #00C9C8;   /* logo teal/cyan accent */
  --clr-teal-dark:    #00a8a7;   /* darker teal */
  --clr-teal-pale:    #e0fafa;   /* teal tint */

  /* Brand gradient (logo direction: teal → blue) */
  --gradient-brand:   linear-gradient(135deg, #00C9C8 0%, #2563C4 100%);
  --gradient-brand-r: linear-gradient(135deg, #2563C4 0%, #00C9C8 100%);

  --clr-dark:        #1B2B6B;   /* navy from logo text */
  --clr-dark-mid:    #1e3380;   /* slightly lighter navy */
  --clr-dark-soft:   #2a4099;   /* nav/card dark surfaces */
  --clr-dark-bg:     #101c45;   /* deep navy for dark sections */

  --clr-white:       #ffffff;
  --clr-gray-50:     #f5f8ff;
  --clr-gray-100:    #eaf0fb;
  --clr-gray-200:    #d6e2f5;
  --clr-gray-400:    #8fa3c8;
  --clr-gray-600:    #5a6e96;
  --clr-text:        #1B2B6B;
  --clr-muted:       #5a6e96;

  --clr-coral:       #E05252;
  --clr-amber:       #f5a623;

  --ff-display:      'Sora', sans-serif;
  --ff-body:         'DM Sans', sans-serif;
  --ff-mono:         'JetBrains Mono', monospace;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(37,99,196,.14);
  --shadow-lg:  0 12px 40px rgba(37,99,196,.20);
  --shadow-xl:  0 24px 64px rgba(37,99,196,.26);
  --transition: 0.22s ease;
  --transition-slow: 0.45s cubic-bezier(.16,1,.3,1);
  --container: 1160px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--ff-body); font-size: 1rem; font-weight: 400; color: var(--clr-text); background: var(--clr-white); line-height: 1.7; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--ff-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--clr-dark); }
h1 { font-size: clamp(2.2rem,5vw,3.75rem); }
h2 { font-size: clamp(1.75rem,3.5vw,2.5rem); }
h3 { font-size: clamp(1.25rem,2.5vw,1.5rem); }
h4 { font-size: 1.25rem; }
p { line-height: 1.75; color: var(--clr-muted); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 2rem; }
.section { padding-block: 5rem; }
.section--dark { background: var(--clr-dark-bg); color: var(--clr-white); }
.section--gray { background: var(--clr-gray-50); }
.section--brand { background: var(--clr-brand); }
.text-center { text-align: center; }
.text-center .section-sub { margin-inline: auto; }
.text-center .section-label { justify-content: center; }

.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; color: var(--clr-brand);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .75rem;
}
.section-label::before { content:''; display:block; width:18px; height:2px; background:var(--clr-brand); border-radius:2px; }
.section--dark .section-label { color: var(--clr-brand-light); }
.section--dark .section-label::before { background: var(--clr-brand-light); }
.section-title { margin-bottom: .75rem; }
.section--dark .section-title { color: var(--clr-white); }
.section-sub { font-size: 1.125rem; color: var(--clr-muted); max-width: 540px; margin-bottom: 3rem; }
.section--dark .section-sub { color: rgba(255,255,255,.55); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-display); font-size: .875rem; font-weight: 600;
  padding: .75rem 1.625rem; border-radius: var(--radius-md);
  transition: all var(--transition); white-space: nowrap; letter-spacing: -.01em;
}
.btn--primary { background: var(--clr-brand); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--clr-brand-dark); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--clr-brand); border: 1.5px solid var(--clr-brand); }
.btn--outline:hover { background: var(--clr-brand-pale); }
.btn--white { background: #fff; color: var(--clr-brand); box-shadow: var(--shadow-md); }
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.btn--lg { font-size: 1rem; padding: .9rem 2rem; }
.btn-group { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.btn svg { width:16px; height:16px; transition: transform var(--transition); }
.btn:hover svg { transform: translateX(3px); }

/* HEADER */
.site-header { position: fixed; top:0; left:0; right:0; z-index: 1000; transition: background var(--transition), box-shadow var(--transition); }
.site-header.scrolled { background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--clr-gray-200), 0 4px 24px rgba(0,0,0,.06); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; gap:0; }
.site-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.site-logo__mark { width:36px; height:36px; background:var(--clr-brand); border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:700; font-size:1.1rem; color:#fff; transition: transform var(--transition); }
.site-logo:hover .site-logo__mark { transform: rotate(-5deg) scale(1.05); }
.site-logo__text { font-family:var(--ff-display); font-size:1rem; font-weight:700; color:var(--clr-dark); line-height:1.2; letter-spacing:-.02em; }
.site-logo__text span { color: var(--clr-brand); }
.site-logo__sub { font-size:10px; font-weight:500; color:var(--clr-muted); text-transform:uppercase; letter-spacing:.08em; display:block; }
.primary-nav { display:flex; align-items:center; gap:.25rem; flex:1; justify-content:center; }
.primary-nav a { font-size:.875rem; font-weight:500; color:var(--clr-muted); padding:.5rem .875rem; border-radius:var(--radius-sm); transition: color var(--transition), background var(--transition); }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color:var(--clr-brand); background:var(--clr-brand-pale); }
.nav-actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:6px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--clr-dark-bg); border-radius:2px; transition:all var(--transition); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display:none; position:fixed; top:72px; left:0; right:0; background:#fff; border-top:1px solid var(--clr-gray-200); padding:1.5rem 2rem; box-shadow:0 20px 40px rgba(0,0,0,.12); z-index:999; }
.mobile-nav.open { display:block; }
.mobile-nav a { display:block; font-size:1.125rem; font-weight:500; color:var(--clr-dark); padding:.875rem 0; border-bottom:1px solid var(--clr-gray-100); }
.mobile-nav .btn { margin-top:1.25rem; width:100%; justify-content:center; }

/* HERO */
.hero { min-height:100svh; display:flex; align-items:center; padding-top:72px; background:var(--clr-white); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-200px; right:-200px; width:700px; height:700px; background:radial-gradient(circle,rgba(37,99,196,.08) 0%,transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(0,201,200,.06) 0%,transparent 70%); pointer-events:none; }
.hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; width:100%; max-width:var(--container); margin-inline:auto; padding-inline:2rem; padding-block:5rem; }
.hero__badge { display:inline-flex; align-items:center; gap:8px; background:var(--clr-brand-faint); border:1px solid var(--clr-brand-pale); color:var(--clr-brand); font-size:.75rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-full); margin-bottom:1.5rem; letter-spacing:.04em; }
.hero__badge-dot { width:7px; height:7px; background:var(--clr-teal); border-radius:50%; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.2)} }
.hero__title { font-size:clamp(2.4rem,5.5vw,4.2rem); line-height:1.08; letter-spacing:-.04em; color:var(--clr-dark); margin-bottom:1.5rem; }
.hero__title mark { background:none; color:var(--clr-brand); }
.hero__desc { font-size:1.125rem; color:var(--clr-muted); max-width:480px; margin-bottom:2.5rem; line-height:1.8; }
.hero__stats { display:flex; gap:2.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--clr-gray-200); }
.hero__stat-num { font-family:var(--ff-display); font-size:2rem; font-weight:700; color:var(--clr-dark); letter-spacing:-.04em; }
.hero__stat-label { font-size:.75rem; color:var(--clr-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.hero__visual { position:relative; }
.hero__browser { background:var(--clr-dark-mid); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xl); }
.browser__bar { background:var(--clr-dark-soft); padding:12px 16px; display:flex; align-items:center; gap:7px; }
.browser__dot { width:10px; height:10px; border-radius:50%; }
.browser__dot--red{background:#ff6b6b} .browser__dot--yellow{background:#ffd93d} .browser__dot--green{background:#6bcb77}
.browser__url { background:rgba(255,255,255,.07); border-radius:6px; height:18px; flex:1; margin-left:10px; }
.browser__content { padding:20px; }
.b-bar { height:10px; background:var(--clr-brand); border-radius:5px; margin-bottom:10px; opacity:.9; }
.b-bar--short { width:55%; background:var(--clr-brand-light); opacity:.6; }
.b-bar--xs { width:35%; background:rgba(91,63,212,.3); }
.b-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.b-card { height:60px; background:rgba(255,255,255,.05); border-radius:8px; border:1px solid rgba(255,255,255,.06); }
.b-btn { width:90px; height:22px; background:var(--clr-brand); border-radius:6px; margin-top:8px; }
.hero__float { position:absolute; background:#fff; border-radius:var(--radius-md); box-shadow:0 8px 30px rgba(0,0,0,.14); padding:10px 14px; font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:8px; z-index:2; }
.hero__float--1 { bottom:-20px; left:-24px; color:var(--clr-teal); }
.hero__float--2 { top:-16px; right:-16px; color:var(--clr-brand); }
.hero__float-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.hero__float--1 .hero__float-icon { background:rgba(0,201,200,.1); }
.hero__float--2 .hero__float-icon { background:var(--clr-brand-pale); }

/* TRUSTED */
.trusted { padding-block:2rem; background:var(--clr-gray-50); border-top:1px solid var(--clr-gray-200); border-bottom:1px solid var(--clr-gray-200); }
.trusted__label { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--clr-gray-400); text-align:center; margin-bottom:1.25rem; }
.trusted__row { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.trusted__pill { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--clr-gray-200); color:var(--clr-muted); font-size:.75rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-full); transition:all var(--transition); }
.trusted__pill:hover { border-color:var(--clr-brand); color:var(--clr-brand); background:var(--clr-brand-pale); }

/* SERVICES */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.service-card { background:#fff; border:1px solid var(--clr-gray-200); border-radius:var(--radius-lg); padding:1.75rem; transition:all var(--transition-slow); position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; inset:0; background:var(--clr-brand-faint); opacity:0; transition:opacity var(--transition); }
.service-card:hover { border-color:var(--clr-brand); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.service-card:hover::before { opacity:1; }
.service-card__icon { width:48px; height:48px; background:var(--clr-brand-pale); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; position:relative; transition:background var(--transition); }
.service-card:hover .service-card__icon { background:var(--clr-brand); }
.service-card__icon svg { width:22px; height:22px; stroke:var(--clr-brand); fill:none; transition:stroke var(--transition); }
.service-card:hover .service-card__icon svg { stroke:#fff; }
.service-card__title { font-size:1rem; font-weight:600; color:var(--clr-dark); margin-bottom:.625rem; position:relative; letter-spacing:-.02em; }
.service-card__desc { font-size:.875rem; color:var(--clr-muted); line-height:1.7; position:relative; }
.service-card__link { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; color:var(--clr-brand); margin-top:1rem; position:relative; letter-spacing:.02em; text-transform:uppercase; }
.service-card__link svg { width:14px; height:14px; stroke:currentColor; fill:none; transition:transform var(--transition); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }

/* PROCESS */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin-top:1rem; }
.process-steps::before { content:''; position:absolute; top:24px; left:calc(12.5%); right:calc(12.5%); height:1px; background:linear-gradient(90deg,transparent,rgba(91,63,212,.5) 20%,rgba(91,63,212,.5) 80%,transparent); }
.process-step { padding:0 1.5rem 0 0; }
.process-step__num { width:48px; height:48px; background:var(--clr-brand); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:1rem; font-weight:700; color:#fff; margin-bottom:1.5rem; position:relative; z-index:1; box-shadow:0 0 0 6px rgba(37,99,196,.2); }
.process-step__title { font-size:1rem; font-weight:600; color:#fff; margin-bottom:.625rem; letter-spacing:-.02em; }
.process-step__desc { font-size:.875rem; color:rgba(255,255,255,.45); line-height:1.7; }

/* PORTFOLIO */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.portfolio-card { background:#fff; border:1px solid var(--clr-gray-200); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition-slow); cursor:pointer; }
.portfolio-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--clr-brand); }
.portfolio-card__thumb { height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.portfolio-card__thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.3)); opacity:0; transition:opacity var(--transition); }
.portfolio-card:hover .portfolio-card__thumb::after { opacity:1; }
.portfolio-card__thumb--purple { background: var(--gradient-brand); }
.portfolio-card__thumb--teal   { background:linear-gradient(135deg,#00C9C8,#00a8a7); }
.portfolio-card__thumb--coral  { background:linear-gradient(135deg,#E05252,#F08080); }
.portfolio-card__thumb--amber  { background:linear-gradient(135deg,#BA7517,#EF9F27); }
.portfolio-card__thumb--dark   { background:linear-gradient(135deg,#101c45,#1B2B6B); }
.portfolio-card__thumb--pink   { background:linear-gradient(135deg,#2563C4,#00C9C8); }
.portfolio-card__thumb-label { font-family:var(--ff-display); font-size:3.5rem; font-weight:700; color:rgba(255,255,255,.2); letter-spacing:-.06em; }
.portfolio-card__overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--transition); z-index:1; }
.portfolio-card:hover .portfolio-card__overlay { opacity:1; }
.portfolio-card__view-btn { background:#fff; color:var(--clr-brand); font-size:.75rem; font-weight:600; padding:8px 18px; border-radius:var(--radius-full); letter-spacing:.04em; text-transform:uppercase; }
.portfolio-card__info { padding:1.25rem 1.5rem; }
.portfolio-card__tag { font-size:10px; font-weight:600; color:var(--clr-brand); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.portfolio-card__title { font-size:1rem; font-weight:600; color:var(--clr-dark); letter-spacing:-.02em; }

/* TESTIMONIALS */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.testimonial-card { background:#fff; border:1px solid var(--clr-gray-200); border-radius:var(--radius-lg); padding:1.75rem; transition:all var(--transition); }
.testimonial-card:hover { border-color:var(--clr-brand); box-shadow:var(--shadow-md); }
.testimonial-card__stars { display:flex; gap:3px; margin-bottom:1rem; color:var(--clr-amber); font-size:16px; }
.testimonial-card__text { font-size:.875rem; color:var(--clr-muted); line-height:1.75; font-style:italic; margin-bottom:1.25rem; }
.testimonial-card__author { display:flex; align-items:center; gap:12px; }
.testimonial-card__avatar { width:40px; height:40px; border-radius:50%; background:var(--clr-brand-pale); display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:.75rem; font-weight:700; color:var(--clr-brand); flex-shrink:0; }
.testimonial-card__name { font-size:.875rem; font-weight:600; color:var(--clr-dark); }
.testimonial-card__company { font-size:.75rem; color:var(--clr-gray-400); }

/* PRICING */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:start; }
.pricing-card { background:#fff; border:1px solid var(--clr-gray-200); border-radius:var(--radius-lg); padding:2rem; transition:all var(--transition); position:relative; }
.pricing-card--featured { border-color:var(--clr-brand); border-width:2px; transform:scale(1.02); box-shadow:var(--shadow-xl); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--clr-brand); color:#fff; font-size:.75rem; font-weight:600; padding:4px 14px; border-radius:var(--radius-full); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.pricing-card__name { font-size:1rem; font-weight:600; color:var(--clr-dark); margin-bottom:.5rem; }
.pricing-card__price { display:flex; align-items:baseline; gap:4px; margin:1rem 0; }
.pricing-card__currency { font-family:var(--ff-display); font-size:1.25rem; font-weight:700; color:var(--clr-dark); }
.pricing-card__amount { font-family:var(--ff-display); font-size:3rem; font-weight:700; color:var(--clr-dark); line-height:1; letter-spacing:-.04em; }
.pricing-card__period { font-size:.875rem; color:var(--clr-muted); }
.pricing-card__desc { font-size:.875rem; color:var(--clr-muted); margin-bottom:1.5rem; line-height:1.6; }
.pricing-card__features { margin-bottom:1.75rem; }
.pricing-feature { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.875rem; color:var(--clr-muted); border-bottom:1px solid var(--clr-gray-100); }
.pricing-feature:last-child { border:none; }
.pricing-feature svg { width:16px; height:16px; stroke:var(--clr-teal); fill:none; flex-shrink:0; }
.pricing-card .btn { width:100%; justify-content:center; }

/* CTA */
.cta-section { position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%); pointer-events:none; }
.cta-inner { position:relative; z-index:1; text-align:center; }
.cta-inner h2 { color:#fff; margin-bottom:1rem; }
.cta-inner > p { color:rgba(255,255,255,.75); font-size:1.125rem; max-width:500px; margin-inline:auto; margin-bottom:2.5rem; }
.cta-form { display:flex; gap:.75rem; max-width:480px; margin-inline:auto; }
.cta-form input { flex:1; padding:.875rem 1.25rem; border-radius:var(--radius-md); border:none; background:rgba(255,255,255,.15); color:#fff; font-size:.875rem; outline:none; transition:background var(--transition); }
.cta-form input::placeholder { color:rgba(255,255,255,.5); }
.cta-form input:focus { background:rgba(255,255,255,.22); }
.cta-trust { font-size:.75rem; color:rgba(255,255,255,.5); margin-top:1rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }

/* FOOTER */
.site-footer { background:var(--clr-dark-bg); }
.footer-main { padding-top:4rem; padding-bottom:3rem; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; }
.footer-brand__tagline { font-size:.875rem; color:rgba(255,255,255,.4); line-height:1.7; margin-top:1rem; margin-bottom:1.5rem; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:36px; height:36px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.footer-social a:hover { background:var(--clr-brand); border-color:var(--clr-brand); }
.footer-social svg { width:16px; height:16px; stroke:rgba(255,255,255,.6); fill:none; }
.footer-social a:hover svg { stroke:#fff; }
.footer-col h4 { font-size:.75rem; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.25rem; }
.footer-col ul li { margin-bottom:.625rem; }
.footer-col ul li a { font-size:.875rem; color:rgba(255,255,255,.45); transition:color var(--transition); }
.footer-col ul li a:hover { color:#fff; }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:.875rem; }
.footer-contact-item svg { width:15px; height:15px; stroke:var(--clr-brand-light); fill:none; flex-shrink:0; margin-top:3px; }
.footer-contact-item span { font-size:.875rem; color:rgba(255,255,255,.45); line-height:1.5; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding-block:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.25); }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { font-size:.75rem; color:rgba(255,255,255,.25); transition:color var(--transition); }
.footer-bottom-links a:hover { color:rgba(255,255,255,.6); }

/* PAGE HERO */
.page-hero { background:var(--clr-dark-bg); padding:8rem 0 5rem; text-align:center; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:radial-gradient(circle,rgba(37,99,196,.15) 0%,transparent 70%); }
.page-hero h1 { color:#fff; position:relative; }
.page-hero__sub { color:rgba(255,255,255,.55); font-size:1.125rem; margin-top:1rem; position:relative; }
.breadcrumbs { display:flex; align-items:center; gap:6px; font-size:.75rem; color:rgba(255,255,255,.4); justify-content:center; margin-bottom:1.25rem; position:relative; }
.breadcrumbs a { color:rgba(255,255,255,.4); transition:color var(--transition); }
.breadcrumbs a:hover { color:#fff; }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:start; }
.contact-info__item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.75rem; }
.contact-info__icon { width:44px; height:44px; background:var(--clr-brand-pale); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info__icon svg { width:20px; height:20px; stroke:var(--clr-brand); fill:none; }
.contact-info__label { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--clr-gray-400); margin-bottom:3px; }
.contact-info__value { font-size:.875rem; color:var(--clr-dark); font-weight:500; }

/* FORMS */
.wpcf7-form, .contact-form { display:grid; gap:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:.75rem; font-weight:600; color:var(--clr-dark); text-transform:uppercase; letter-spacing:.06em; }
.form-field input, .form-field select, .form-field textarea,
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"], .wpcf7-form select, .wpcf7-form textarea {
  width:100%; padding:.75rem 1rem; border:1.5px solid var(--clr-gray-200); border-radius:var(--radius-md);
  font-size:.875rem; font-family:var(--ff-body); color:var(--clr-dark); background:#fff; outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  border-color:var(--clr-brand); box-shadow:0 0 0 3px rgba(37,99,196,.12);
}
.form-field textarea, .wpcf7-form textarea { resize:vertical; min-height:120px; }
.form-field--full { grid-column:1/-1; }

/* ABOUT */
.about-intro { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-image__main { border-radius:var(--radius-xl); overflow:hidden; background:linear-gradient(135deg,var(--clr-brand) 0%,var(--clr-brand-light) 100%); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; font-size:5rem; }
.about-image__badge { position:absolute; bottom:-20px; right:-20px; background:#fff; border-radius:var(--radius-lg); padding:1rem 1.5rem; box-shadow:var(--shadow-lg); text-align:center; }
.about-image__badge .num { font-family:var(--ff-display); font-size:2rem; font-weight:700; color:var(--clr-brand); }
.about-image__badge .lbl { font-size:.75rem; color:var(--clr-muted); text-transform:uppercase; letter-spacing:.08em; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.team-card { text-align:center; }
.team-card__photo { width:100%; aspect-ratio:1; border-radius:var(--radius-lg); margin-bottom:1rem; overflow:hidden; background:var(--clr-brand-pale); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.team-card__name { font-size:1rem; font-weight:600; color:var(--clr-dark); margin-bottom:3px; }
.team-card__role { font-size:.75rem; color:var(--clr-brand); text-transform:uppercase; letter-spacing:.08em; }

/* BLOG */
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.post-card { background:#fff; border:1px solid var(--clr-gray-200); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition-slow); }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--clr-brand); }
.post-card__thumb { height:180px; overflow:hidden; background:var(--clr-brand-pale); }
.post-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover .post-card__thumb img { transform:scale(1.04); }
.post-card__body { padding:1.25rem 1.5rem; }
.post-card__cat { font-size:10px; font-weight:600; color:var(--clr-brand); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.post-card__title { font-size:1rem; font-weight:600; color:var(--clr-dark); margin-bottom:8px; line-height:1.4; letter-spacing:-.02em; }
.post-card__excerpt { font-size:.875rem; color:var(--clr-muted); line-height:1.6; margin-bottom:1rem; }
.post-card__meta { font-size:.75rem; color:var(--clr-gray-400); display:flex; align-items:center; gap:8px; }

/* POST CONTENT */
.post-content { max-width:740px; margin-inline:auto; }
.post-content h2,.post-content h3,.post-content h4 { margin-block:1.5rem .75rem; }
.post-content p { margin-bottom:1.25rem; }
.post-content ul,.post-content ol { margin:1rem 0 1.25rem 1.5rem; }
.post-content ul { list-style:disc; }
.post-content ol { list-style:decimal; }
.post-content li { margin-bottom:.5rem; color:var(--clr-muted); }
.post-content blockquote { border-left:3px solid var(--clr-brand); padding-left:1.5rem; margin:2rem 0; font-style:italic; font-size:1.125rem; color:var(--clr-muted); }
.post-content img { border-radius:var(--radius-lg); margin-block:2rem; }
.post-content a { color:var(--clr-brand); text-decoration:underline; text-decoration-color:rgba(91,63,212,.3); }
.post-content pre { background:var(--clr-dark-bg); color:var(--clr-brand-light); border-radius:var(--radius-md); padding:1.5rem; overflow-x:auto; font-family:var(--ff-mono); font-size:.875rem; margin-block:1.5rem; }
.post-content code { background:var(--clr-brand-pale); color:var(--clr-brand-dark); padding:2px 6px; border-radius:4px; font-family:var(--ff-mono); font-size:.875em; }

/* SCROLL TOP */
.scroll-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:var(--clr-brand); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:all var(--transition); z-index:500; }
.scroll-top.visible { opacity:1; pointer-events:auto; }
.scroll-top:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.scroll-top svg { width:18px; height:18px; stroke:#fff; fill:none; }

/* PAGINATION */
.pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:3rem; }
.page-numbers { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); font-size:.875rem; font-weight:500; color:var(--clr-muted); border:1px solid var(--clr-gray-200); transition:all var(--transition); }
.page-numbers.current, .page-numbers:hover { background:var(--clr-brand); color:#fff; border-color:var(--clr-brand); }

/* WIDGETS */
.widget-area { display:flex; flex-direction:column; gap:2rem; }
.widget { background:#fff; border:1px solid var(--clr-gray-200); border-radius:var(--radius-lg); padding:1.5rem; }
.widget-title { font-size:.875rem; font-weight:600; color:var(--clr-dark); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--clr-gray-200); }
.widget ul li { padding:6px 0; border-bottom:1px solid var(--clr-gray-100); }
.widget ul li:last-child { border:none; }
.widget ul li a { font-size:.875rem; color:var(--clr-muted); transition:color var(--transition); }
.widget ul li a:hover { color:var(--clr-brand); }

/* FADE ANIMATIONS */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:1fr; }
  .pricing-card--featured { transform:none; }
  .process-steps { grid-template-columns:repeat(2,1fr); gap:2rem; }
  .process-steps::before { display:none; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .hero__inner { grid-template-columns:1fr; }
  .hero__visual { display:none; }
  .about-intro { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .section { padding-block:3.5rem; }
  .primary-nav, .nav-actions .btn { display:none; }
  .nav-toggle { display:flex; }
  .services-grid,.testimonials-grid,.portfolio-grid,.process-steps { grid-template-columns:1fr; }
  .hero__stats { flex-wrap:wrap; gap:1.5rem; }
  .cta-form { flex-direction:column; }
  .footer-main { grid-template-columns:1fr; gap:2rem; }
  .form-row { grid-template-columns:1fr; }
  .posts-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   LIKHA BRAND OVERRIDES — Real Logo Colors
   ========================================================= */

/* Dark sections use deep navy, not near-black */
.section--dark,
.site-footer,
.footer-main,
.process { background: var(--clr-dark-bg) !important; }

.page-hero { background: linear-gradient(160deg, var(--clr-dark-bg) 0%, var(--clr-dark-mid) 100%) !important; }

/* Hero gradient glow */
.hero::before {
  background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(37,99,196,.12) 0%, transparent 70%) !important;
}
.hero::after {
  background: radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0,201,200,.08) 0%, transparent 70%) !important;
}

/* Hero badge uses teal */
.hero__badge {
  background: linear-gradient(90deg, rgba(0,201,200,.1), rgba(37,99,196,.1));
  border-color: rgba(37,99,196,.25);
}

/* Hero title highlight — gradient text */
.hero__title mark {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Primary button — gradient */
.btn--primary {
  background: var(--gradient-brand) !important;
  border: none;
}
.btn--primary:hover {
  background: var(--gradient-brand-r) !important;
  box-shadow: 0 8px 32px rgba(37,99,196,.35) !important;
}

/* Outline button uses brand blue */
.btn--outline {
  color: var(--clr-brand);
  border-color: var(--clr-brand);
}
.btn--outline:hover {
  background: var(--clr-brand-pale);
  color: var(--clr-brand-dark);
}

/* Logo mark — gradient */
.site-logo__mark {
  background: var(--gradient-brand) !important;
}

/* Section label line */
.section-label::before { background: var(--clr-brand); }
.section--dark .section-label { color: var(--clr-teal); }
.section--dark .section-label::before { background: var(--clr-teal); }

/* Service icon hover */
.service-card:hover .service-card__icon { background: var(--gradient-brand) !important; }
.service-card__icon { background: var(--clr-brand-pale) !important; }
.service-card__icon svg { stroke: var(--clr-brand) !important; }
.service-card:hover .service-card__icon svg { stroke: #fff !important; }
.service-card__link { color: var(--clr-brand) !important; }
.service-card__link svg { stroke: var(--clr-brand) !important; }
.service-card:hover { border-color: var(--clr-brand) !important; }
.service-card::before { background: var(--clr-brand-faint) !important; }

/* Process step numbers */
.process-step__num {
  background: var(--gradient-brand) !important;
  box-shadow: 0 0 0 6px rgba(37,99,196,.2) !important;
}

/* Process connector line */
.process-steps::before {
  background: linear-gradient(90deg, transparent, rgba(0,201,200,.4) 20%, rgba(37,99,196,.4) 80%, transparent) !important;
}

/* Portfolio hover */
.portfolio-card:hover { border-color: var(--clr-brand) !important; }

/* Testimonial hover */
.testimonial-card:hover { border-color: var(--clr-brand) !important; }

/* Testimonial avatar */
.testimonial-card__avatar {
  background: var(--clr-brand-pale) !important;
  color: var(--clr-brand) !important;
}

/* Pricing featured */
.pricing-card--featured { border-color: var(--clr-brand) !important; }
.pricing-badge { background: var(--gradient-brand) !important; }
.pricing-feature svg { stroke: var(--clr-teal) !important; }

/* CTA section — gradient brand background */
.cta-section { background: var(--gradient-brand) !important; }
.cta-section::before {
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%) !important;
}

/* CTA white button text in gradient brand context */
.btn--white { background: #fff !important; color: var(--clr-brand) !important; }
.btn--white:hover { box-shadow: 0 8px 32px rgba(0,0,0,.18) !important; }

/* Footer brand accent */
.footer-contact-item svg { stroke: var(--clr-teal) !important; }
.footer-social a:hover { background: var(--gradient-brand) !important; border-color: transparent !important; }
.footer-bottom { border-top-color: rgba(255,255,255,.08) !important; }

/* Hero badge dot — teal pulse */
.hero__badge-dot { background: var(--clr-teal) !important; }

/* Hero floats */
.hero__float--1 { color: var(--clr-teal) !important; }
.hero__float--2 { color: var(--clr-brand) !important; }
.hero__float--1 .hero__float-icon { background: rgba(0,201,200,.1) !important; }
.hero__float--2 .hero__float-icon { background: var(--clr-brand-pale) !important; }

/* Browser mockup colors */
.b-bar { background: var(--clr-brand) !important; }
.b-bar--short { background: var(--clr-teal) !important; }
.b-btn { background: var(--gradient-brand) !important; }
.hero__browser { background: var(--clr-dark-bg) !important; }
.browser__bar { background: var(--clr-dark-mid) !important; }

/* Trusted pills hover */
.trusted__pill:hover { border-color: var(--clr-brand) !important; color: var(--clr-brand) !important; background: var(--clr-brand-pale) !important; }

/* About image */
.about-image__main { background: var(--gradient-brand) !important; }
.about-image__badge .num { color: var(--clr-brand) !important; }

/* Contact icon */
.contact-info__icon { background: var(--clr-brand-pale) !important; }
.contact-info__icon svg { stroke: var(--clr-brand) !important; }

/* Focus / selection */
:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 3px; }
::selection { background: var(--clr-brand-pale); color: var(--clr-brand-dark); }

/* Scroll to top */
.scroll-top { background: var(--gradient-brand) !important; }

/* Mobile nav active link */
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
  color: var(--clr-brand) !important;
  background: var(--clr-brand-pale) !important;
}

/* Post card category */
.post-card__cat { color: var(--clr-brand) !important; }
.post-card:hover { border-color: var(--clr-brand) !important; }

/* Portfolio tag */
.portfolio-card__tag { color: var(--clr-brand) !important; }

/* Pagination active */
.page-numbers.current,
.page-numbers:hover { background: var(--clr-brand) !important; border-color: var(--clr-brand) !important; }

/* Team card role */
.team-card__role { color: var(--clr-brand) !important; }

/* Widget title */
.widget-title { color: var(--clr-dark) !important; }
.widget ul li a:hover { color: var(--clr-brand) !important; }

/* Blockquote accent */
.post-content blockquote { border-left-color: var(--clr-brand) !important; }
.post-content a { color: var(--clr-brand) !important; }
.post-content code { background: var(--clr-brand-pale) !important; color: var(--clr-brand-dark) !important; }

/* Form focus */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--clr-brand) !important; box-shadow: 0 0 0 3px rgba(37,99,196,.12) !important; }

/* Trusted bg */
.trusted { background: var(--clr-gray-50) !important; }

/* Hero stats border */
.hero__stats { border-top-color: var(--clr-gray-200) !important; }

/* Gray section */
.section--gray,
.portfolio,
.portfolio-grid ~ .section { background: var(--clr-gray-50) !important; }

/* Nav CTA button */
.nav-actions .btn--primary { background: var(--gradient-brand) !important; }