/* root variables */
:root{
  --color-bg:#ffffff;
  --color-fg:#000000;
  --color-accent:#0055dd;
  --color-muted:#555;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,0.1);
  --spacing:1.5rem;
  --bgBlur:0px;
}

/* basic resets */
*{box-sizing:border-box;margin:0;padding:0;}
html{font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth;}
body{color:var(--color-fg);background:var(--color-bg);line-height:1.6;}
a{color:var(--color-accent);text-decoration:none;}
a:focus{outline:2px dashed var(--color-accent);outline-offset:2px;}
.skip-link{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:0.5rem;z-index:100;}
.skip-link:focus{left:1rem;}

/* loader overlay */
.loader{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.3s ease;}
.loader-content{text-align:center;}
.loader-logo{max-width:160px;height:auto;margin:0 auto 1rem;display:block;}
.loader h2{margin-bottom:1rem;color:var(--color-fg);}
.spinner{width:50px;height:50px;border:5px solid var(--color-accent);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}

/* background layers */
.bg-layer{position:fixed;inset:0;z-index:-2;background:#ffffff;}
.frost-layer{position:fixed;inset:0;z-index:-1;background:rgba(0,85,221,0);backdrop-filter:blur(var(--bgBlur)) saturate(120%);will-change:backdrop-filter;pointer-events:none;transition:background 0.1s ease;}

/* navbar */
.navbar{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(255,255,255,0.9);padding:0.75rem 1rem;z-index:50;transition:backdrop-filter 0.3s,border-bottom 0.3s;border-bottom:1px solid rgba(0,0,0,0.05);}
.navbar.scrolled{backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.1);}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1rem;position:relative;}
.brand-logo{height:64px;width:auto;display:block}
.navbar ul{display:flex;gap:1.5rem;list-style:none;justify-content:flex-end;flex-wrap:wrap;}
.navbar a{padding:0.5rem 0;position:relative;font-size:0.95rem;font-weight:500;transition:color 0.3s ease;}
.nav-toggle{display:none;background:transparent;border:none;font-size:1.4rem;cursor:pointer;padding:0.25rem 0.5rem}

@media (max-width:768px){
  .brand-logo{height:54px}
  .nav-toggle{display:block}
  .navbar nav ul{display:none}
  .navbar.open nav ul{display:flex;flex-direction:column;position:absolute;right:1rem;top:100%;background:#fff;padding:1rem;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.12);width:calc(100% - 2rem);max-width:320px;}
  .navbar.open nav ul li{margin:0.5rem 0}
}

@media (max-width:480px){
  .brand-logo{height:48px}
}
.navbar a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--color-accent);transition:width 0.3s ease;}
.navbar a:hover{color:var(--color-accent);}
.navbar a:hover::after{width:100%;}
.navbar a.active{color:var(--color-accent);border-bottom:none;}
.navbar a.active::after{width:100%;}

/* sections */
.section{
  padding:6rem 1rem;
  max-width:960px;
  margin:0 auto;
  opacity:0;
  transform:translateY(16px);
  filter:blur(10px);
  transition:opacity 0.7s ease,transform 0.7s ease,filter 0.7s ease;
}
.section.visible{opacity:1;transform:translateY(0);filter:blur(0);}

/* ===== PREMIUM HERO (matches black/white/blue) ===== */
.hero{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 90vh;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(0,85,221,0.14), transparent 60%),
    #ffffff;
}

.hero-container{
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem;
  border-radius: calc(var(--radius) + 14px);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 22px 70px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
}

.hero-badge{
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

.hero-title{
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin: 0;
}
.hero-title span{color: var(--color-accent);}

.hero-subtitle{
  margin-top: 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-fg);
}

.hero-description{
  margin-top: 1.1rem;
  font-size: 1.05rem;
  color: var(--color-muted);
  line-height: 1.8;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons{
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-primary{
  padding: 0.85rem 1.8rem;
  font-weight: 700;
}

.hero-secondary{
  background: #ffffff;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow);
}

.hero-secondary:hover{
  background: var(--color-accent);
  color: #ffffff;
}

.hero-trust{
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.hero-trust span{
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(0,85,221,0.06);
  border: 1px solid rgba(0,85,221,0.20);
}

/* ===== ADDED: WhatsApp + contact premium copy (as requested) ===== */
.hero-response{
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.contact-note{
  max-width: 62ch;
  margin: 0 auto 1.25rem;
  text-align: center;
  color: var(--color-muted);
}
.contact-cta{
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* About */
.about{background:#f9f9f9;}
.about-content{max-width:600px;margin:0 auto;line-height:1.8;color:var(--color-fg);}
.about-content p{margin-bottom:1.5rem;}

/* About page hero */
.about-hero{display:flex;align-items:center;justify-content:center;text-align:center;min-height:70vh;background:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%);}
.about-hero h1{font-size:3rem;margin-bottom:1rem;}
.about-hero .subtitle{font-size:1.5rem;color:var(--color-muted);}

/* About story section */
.about-story{background:#fff;}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.story-text{max-width:500px;}
.story-text h2{font-size:2rem;margin-bottom:1.5rem;}
.story-text p{font-size:1.05rem;line-height:1.8;color:var(--color-fg);margin-bottom:1.5rem;}
.story-visual{display:flex;align-items:center;justify-content:center;}
.visual-box{width:200px;height:200px;background:linear-gradient(135deg,#0055dd 0%,#003399 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:5rem;box-shadow:0 10px 40px rgba(0,0,0,0.1);color:#fff;}

/* About values section */
.about-values h2{font-size:2rem;margin-bottom:3rem;text-align:center;}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;}
.value-card{background:#f9f9f9;padding:2rem;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);transition:transform 0.3s,box-shadow 0.3s;}
.value-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,0.15);}
.value-icon{font-size:2.5rem;margin-bottom:1rem;}
.value-card h3{font-size:1.25rem;margin-bottom:0.75rem;}
.value-card p{color:var(--color-muted);font-size:0.95rem;}

/* About expertise section */
.about-expertise{background:#fff;}
.about-expertise h2{font-size:2rem;margin-bottom:3rem;text-align:center;}
.expertise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;}
.expertise-item{padding:2rem;border-left:4px solid var(--color-accent);background:#f9f9f9;border-radius:var(--radius);}
.expertise-item h3{font-size:1.25rem;margin-bottom:0.75rem;}
.expertise-item p{color:var(--color-muted);line-height:1.6;}

/* Portfolio Showcase */
.portfolio-showcase{background:#f9f9f9;}
.case-study{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;max-width:800px;margin:0 auto;}
.case-image{display:flex;align-items:center;justify-content:center;}
.case-image img{max-width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);}
.case-content h3{font-size:1.75rem;margin-bottom:1rem;}
.case-content p{color:var(--color-muted);line-height:1.8;margin-bottom:1.5rem;}
.case-rating{background:#fff;padding:1.5rem;border-radius:var(--radius);margin-bottom:1.5rem;border-left:4px solid var(--color-accent);}
.stars{font-size:1.5rem;color:#ffc107;letter-spacing:0.25rem;}
.case-rating p{margin-top:0.75rem;font-size:0.95rem;margin-bottom:0;}
.btn-case{display:inline-block;background:var(--color-accent);color:#fff;padding:0.75rem 1.5rem;border-radius:var(--radius);transition:opacity 0.3s ease;}
.btn-case:hover{opacity:0.85;}

/* About CTA section */
.about-cta{text-align:center;background:linear-gradient(135deg,#0055dd 0%,#0044bb 100%);color:#fff;}
.about-cta h2{font-size:2.5rem;margin-bottom:1rem;color:#fff;}
.about-cta p{font-size:1.15rem;margin-bottom:2rem;color:#fff;}

/* buttons */
.btn{
  background:var(--color-accent);
  color:#fff;
  padding:0.75rem 1.5rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.btn:hover{opacity:0.85;transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--color-accent);border:2px solid var(--color-accent);}

/* legacy cards/grids (kept) */
.services .cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.card{background:#fff;padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;}

.portfolio .grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.project{background:#eee;border-radius:var(--radius);overflow:hidden;}
.project svg{width:100%;height:auto;display:block;}

.process .steps{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;}
.step{flex:1 1 120px;text-align:center;}
.step span{display:inline-block;width:40px;height:40px;border-radius:50%;background:var(--color-accent);color:#fff;line-height:40px;margin-bottom:0.5rem;}

.testimonials .cards{display:flex;flex-direction:column;gap:1rem;}
.testimonials blockquote{background:#fafafa;padding:1rem;border-left:4px solid var(--color-accent);}
.testimonials cite{display:block;margin-top:0.5rem;font-size:0.875rem;color:var(--color-muted);}

.faq .accordion{max-width:600px;margin:0 auto;}
.accordion-item{width:100%;text-align:left;padding:1rem;border:none;border-bottom:1px solid #ddd;background:none;cursor:pointer;font-size:1rem;position:relative;}
.accordion-item:focus{outline:2px dashed var(--color-accent);}
.accordion-item::after{content:'+';position:absolute;right:1rem;}
.accordion-item[aria-expanded="true"]::after{content:'-';}
.panel{max-height:0;overflow:hidden;transition:max-height 0.3s ease;padding:0 1rem;}
.panel p{margin:1rem 0;}

.contact form{display:flex;flex-direction:column;gap:1rem;max-width:400px;margin:0 auto;}
.contact input,.contact textarea{padding:0.75rem;border:1px solid #ddd;border-radius:var(--radius);font-family:inherit;font-size:1rem;}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--color-accent);border-color:var(--color-accent);}
.contact .socials{margin-top:1rem;text-align:center;color:var(--color-muted);}
.contact .socials a{color:var(--color-accent);margin:0 0.5rem;}

footer{padding:2rem 1rem;text-align:center;font-size:0.875rem;color:#fff;background:#000;position:relative;border-top:1px solid #333;}
.footer-nav{margin-bottom:1.5rem;}
.footer-nav ul{display:flex;gap:1.5rem;list-style:none;justify-content:center;flex-wrap:wrap;}
.footer-nav a{color:#fff;font-size:0.9rem;transition:color 0.3s ease;}
.footer-nav a:hover{color:var(--color-accent);}
footer .hamburger{position:absolute;right:1rem;top:1rem;font-size:1.5rem;cursor:pointer;transition:color 0.3s;}
footer .hamburger:hover{color:var(--color-accent);}

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25D366;
  color:#fff;
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:var(--shadow);
  z-index:100;
  transition:transform 0.2s;
}
.whatsapp-float:hover{transform:scale(1.1);}

/* cookie banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#212121;color:#fff;padding:1.5rem;display:flex;justify-content:center;z-index:98;box-shadow:0 -2px 10px rgba(0,0,0,0.2);}
.cookie-content{display:flex;align-items:center;gap:2rem;max-width:900px;flex-wrap:wrap;justify-content:space-between;}
.cookie-content p{margin:0;font-size:0.95rem;}
.cookie-content a{color:#fff;text-decoration:underline;}
.btn-cookie{background:#fff;color:#212121;padding:0.5rem 1rem;border:none;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:opacity 0.2s;}
.btn-cookie:hover{opacity:0.9;}
.cookie-banner.hidden{display:none;}

/* ===== Premium Services styles (black/white/blue) ===== */
.premium-services{
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.06);
}

.ps-header{
  text-align: center;
  margin-bottom: 2.25rem;
}

.ps-eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.ps-title{
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.ps-subtitle{
  color: var(--color-muted);
  max-width: 60ch;
  margin: 0 auto;
}

.ps-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ps-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: calc(var(--radius) + 8px);
  padding: 1.5rem;
  box-shadow: 0 12px 35px rgba(0,0,0,0.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}

.ps-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 220px at 15% 0%,
    rgba(0,85,221,0.16),
    transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
}

.ps-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,85,221,0.22);
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
}

.ps-card:hover::before{ opacity: 1; }

.ps-card-top{
  position: relative;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ps-card h3{
  margin: 0;
  font-size: 1.1rem;
}

.ps-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--color-accent);
  border: 1px solid rgba(0,85,221,0.25);
  background: rgba(0,85,221,0.06);
  white-space: nowrap;
}

.ps-card p{
  position: relative;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.ps-card ul{
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.ps-card li{
  padding-left: 18px;
  color: var(--color-muted);
  position: relative;
}

.ps-card li::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0.55em;
}

.ps-cta{
  margin-top: 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

.ps-cta-text h3{
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

.ps-cta-text p{
  margin: 0;
  color: var(--color-muted);
}

.ps-cta-btn{
  border-radius: calc(var(--radius) + 6px);
}

/* responsive tweaks */
@media (max-width:768px){
  .navbar ul{gap:1rem;padding:0;}
  .navbar a{font-size:0.85rem;padding:0.4rem;}
  .story-grid{grid-template-columns:1fr;}
  .about-hero h1{font-size:2rem;}
  .about-hero .subtitle{font-size:1.1rem;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .expertise-grid{grid-template-columns:1fr;}
  .services .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .portfolio .grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}
  .process .steps{gap:1rem;}
  .section{padding:4rem 1rem;}
  .about-cta h2{font-size:1.75rem;}
  .case-study{grid-template-columns:1fr;gap:2rem;margin:0 auto;}
}

@media (max-width:480px){
  .navbar{padding:0.75rem 0.5rem;}
  .navbar ul{gap:0.5rem;justify-content:space-around;}
  .navbar a{font-size:0.75rem;padding:0.3rem 0.25rem;}
  .hero{min-height:70vh;}
  .hero-container{padding: 2.2rem 1.2rem;}
  .hero-subtitle{font-size:1.05rem;}
  .hero-buttons{flex-direction:column;gap:0.75rem;}
  .btn{padding:0.6rem 1.2rem;font-size:0.9rem;}
  .section{padding:3rem 1rem;}
  .story-text h2{font-size:1.5rem;}
  .story-text p{font-size:0.95rem;}
  .about-hero h1{font-size:1.75rem;}
  .values-grid{grid-template-columns:1fr;}
  .value-card{padding:1.5rem;}
  .expertise-item{padding:1.5rem;}
  .process .steps{flex-direction:column;}
  .testimonials blockquote{padding:0.75rem;}
  .contact form{max-width:100%;}
  .cookie-banner{padding:1rem;}
  .cookie-content{gap:1rem;}
  .whatsapp-float{width:45px;height:45px;bottom:15px;right:15px;}
  .footer-nav ul{gap:0.75rem;}
  .footer-nav a{font-size:0.8rem;}
  .case-study{grid-template-columns:1fr;}
  .case-content h3{font-size:1.5rem;}
}

/* services+hero mobile stacking */
@media (max-width: 900px){
  .ps-grid{ grid-template-columns: 1fr; }
  .ps-cta{ flex-direction: column; align-items: flex-start; }
}

/* prefers reduced motion */
@media (prefers-reduced-motion){
  *{transition:none!important;animation:none!important;scroll-behavior:auto;}
}