/* ===================== HOC GROUP — clone stylesheet ===================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=DM+Serif+Text:ital@0;1&display=swap');

:root{
  --primary-color:#223035;
  --secondary-color:#38464A;
  --third-color:#20282D;
  --dark-color:#01062e;
  --body-bg:#fff;
  --accent:#97BAC7;
  --accent-track:#E1F2F2;
  --link-hover:#0b3f66;
  --muted:#6b787c;
  --border:#e7ebec;
  --font:'DM Sans', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--third-color);
  background:var(--body-bg);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;transition:.25s;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font);color:var(--primary-color);font-weight:700;}
p{margin:0;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
section{position:relative;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 32px;border-radius:50px;
  font-weight:600;font-size:15px;letter-spacing:.2px;
  border:1px solid var(--primary-color);color:var(--primary-color);
  background:transparent;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--primary-color);color:#fff;}
.btn.solid{background:var(--primary-color);color:#fff;}
.btn.solid:hover{background:var(--link-hover);border-color:var(--link-hover);}
.btn.light{border-color:rgba(255,255,255,.4);color:#fff;}
.btn.light:hover{background:#fff;color:var(--primary-color);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  text-transform:uppercase;font-weight:700;font-size:13px;
  letter-spacing:2px;color:var(--accent);margin-bottom:14px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);display:inline-block;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:40px;line-height:1.2;}
.section-head p{color:var(--muted);margin-top:16px;font-size:16px;}
.section-head.center{margin:0 auto 48px;text-align:center;}
.section-pad{padding:100px 0;}

/* ---------- Topbar ---------- */
.topbar{background:var(--primary-color);color:#cfd7d9;font-size:14px;}
.topbar .container{display:flex;align-items:center;justify-content:flex-end;gap:24px;height:44px;}
.topbar a{color:#cfd7d9;}
.topbar .phone{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;}
.topbar .phone svg{width:15px;height:15px;fill:var(--accent);}

/* ---------- Header ---------- */
header.site-header{
  position:absolute;top:44px;left:0;right:0;z-index:50;transition:.35s;
  background:rgba(1,6,46,0);
}
header.site-header.is-sticky{
  position:fixed;top:0;
  background:rgba(2,10,20,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:0;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:22px 0;}
.logo img{height:34px;width:auto;}
.logo .logo-dark{display:none;}
nav.main-nav ul{display:flex;gap:36px;}
nav.main-nav a{font-weight:600;font-size:15px;color:#fff;position:relative;}
nav.main-nav a.active,nav.main-nav a:hover{color:var(--accent);}
.header-cta{display:flex;align-items:center;gap:18px;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px;}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--dark-color);}
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease;
  background-size:cover;background-position:center;
}
.hero-slide.active{opacity:1;visibility:visible;z-index:2;}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(1,6,20,.82) 0%, rgba(1,6,20,.55) 55%, rgba(1,6,20,.35) 100%);
}
.hero-slide-content{
  position:absolute;z-index:3;left:24px;top:50%;transform:translateY(-50%);
  max-width:640px;
}
.hero .container.hero-inner{position:relative;height:100%;}
.hero-slide-content h1{
  color:#fff;font-size:76px;line-height:1.05;font-weight:800;
  opacity:0;transform:translateY(30px);transition:.9s ease .2s;
}
.hero-slide.active .hero-slide-content h1{opacity:1;transform:translateY(0);}
.hero-slide-content .tagline{
  color:var(--accent);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:14px;margin:26px 0 14px;
  opacity:0;transform:translateY(20px);transition:.9s ease .35s;
}
.hero-slide.active .tagline{opacity:1;transform:translateY(0);}
.hero-slide-content p{
  color:rgba(255,255,255,.75);font-size:17px;max-width:520px;
  opacity:0;transform:translateY(20px);transition:.9s ease .5s;
}
.hero-slide.active p{opacity:1;transform:translateY(0);}
.hero-slide-content .btn{
  margin-top:34px;width:max-content;
  opacity:0;transform:translateY(20px);transition:.9s ease .65s;
}
.hero-slide.active .btn{opacity:1;transform:translateY(0);}

.hero-counter{
  position:absolute;right:40px;bottom:40px;z-index:5;color:#fff;
  display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px;
}
.hero-counter .line{width:60px;height:1px;background:rgba(255,255,255,.35);position:relative;}
.hero-counter .line::after{
  content:"";position:absolute;left:0;top:0;height:100%;background:var(--accent);width:var(--p,20%);
}
.hero-dots{position:absolute;left:40px;bottom:44px;z-index:5;display:flex;gap:10px;}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:transparent;cursor:pointer;padding:0;}
.hero-dots button.active{background:var(--accent);border-color:var(--accent);}
.hero-arrows{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:14px;}
.hero-arrows button{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:18px;
}
.hero-arrows button:hover{background:var(--accent);border-color:var(--accent);color:var(--primary-color);}

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  background:linear-gradient(rgba(1,6,20,.75),rgba(1,6,20,.75)), url('../assets/img/New-Project-36.jpg') center/cover;
  padding:220px 0 110px;color:#fff;
}
.page-hero h1{color:#fff;font-size:48px;}
.breadcrumb{margin-top:16px;color:rgba(255,255,255,.7);font-weight:600;}
.breadcrumb a{color:var(--accent);}

/* ---------- Services ---------- */
.services{background:var(--primary-color);color:#fff;}
.services-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px;}
.services-top .section-head{margin-bottom:0;}
.services-top .section-head h2{color:#fff;}
.services-top .section-head p{color:rgba(255,255,255,.6);}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);}
.service-item{
  background:var(--primary-color);padding:30px 34px;display:flex;align-items:center;gap:20px;
  transition:.3s;
}
.service-item:hover{background:#1a262b;}
.service-item .num{font-weight:800;color:rgba(255,255,255,.35);font-size:15px;min-width:30px;}
.service-item h4{color:#fff;font-size:19px;font-weight:600;flex:1;}
.service-item .arrow{color:var(--accent);font-size:18px;opacity:0;transition:.3s;transform:translateX(-6px);}
.service-item:hover .arrow{opacity:1;transform:translateX(0);}

/* ---------- Intro banner ---------- */
.intro-banner{padding:90px 0;text-align:center;}
.intro-banner p{max-width:820px;margin:0 auto 30px;font-size:20px;color:var(--primary-color);font-weight:500;line-height:1.6;}

/* ---------- Feature strip ---------- */
.feature-strip{background:#f4f6f6;padding:60px 0;}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.feature-item{display:flex;gap:20px;align-items:flex-start;}
.feature-item .icon{
  width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-size:24px;
}
.feature-item h4{font-size:18px;margin-bottom:8px;}
.feature-item p{color:var(--muted);font-size:15px;}

/* ---------- Stats ---------- */
.stats{background:var(--dark-color);color:#fff;padding:70px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-item .value{font-size:52px;font-weight:800;color:#fff;}
.stat-item .value .suffix{color:var(--accent);}
.stat-item .label{margin-top:10px;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:rgba(255,255,255,.6);}
.stats-grid .stat-item:not(:last-child){border-right:1px solid rgba(255,255,255,.12);}

/* ---------- About ---------- */
.about{padding:110px 0;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.about-media{position:relative;}
.about-media .bg-shape{
  position:absolute;top:-30px;left:-30px;width:100%;height:100%;
  background:url('../assets/img/bg-about-1-776x591.png') no-repeat center/contain;z-index:0;
}
.about-media .stack{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.about-media img{border-radius:10px;}
.about-media .stack img:first-child{margin-top:40px;}
.about-text p{color:var(--muted);margin-bottom:16px;font-size:16px;}
.about-tabs{display:flex;gap:10px;margin:26px 0;flex-wrap:wrap;}
.about-tabs span{
  padding:10px 18px;border-radius:30px;background:#f2f5f5;font-size:14px;font-weight:600;color:var(--primary-color);
}
.about-tabs span.on{background:var(--primary-color);color:#fff;}

/* ---------- Gurus / percentages ---------- */
.gurus{background:#f4f6f6;padding:110px 0;}
.gurus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center;}
.gurus-item{background:#fff;border-radius:16px;padding:44px 24px;box-shadow:0 10px 40px rgba(15,30,35,.05);}
.circle-wrap{position:relative;width:150px;height:150px;margin:0 auto 24px;}
.circle-wrap svg{transform:rotate(-90deg);width:150px;height:150px;}
.circle-wrap circle{fill:none;stroke-width:9;}
.circle-wrap .track{stroke:var(--accent-track);}
.circle-wrap .bar{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1.4s ease;}
.circle-wrap .pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:var(--primary-color);
}
.gurus-item h4{font-size:18px;}

/* ---------- Brands / portfolio ---------- */
.brands{padding:110px 0;}
.brands-panel{
  position:relative;overflow:hidden;border-radius:28px;
  background:radial-gradient(120% 140% at 85% -10%, rgba(151,186,199,.18), transparent 55%),
             linear-gradient(160deg, var(--dark-color) 0%, #0b2233 100%);
  padding:72px 44px 54px;
}
.brands .section-head.center .eyebrow{color:var(--accent);}
.brands .section-head.center h2{color:#fff;}
.brands .section-head.center p{color:rgba(255,255,255,.55);}
.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;z-index:1;}
.brand-tile{
  position:relative;text-align:center;border-radius:18px;padding:32px 18px 24px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:.35s;
}
.brand-tile:hover{
  background:rgba(255,255,255,.075);
  border-color:var(--tile-accent, var(--accent));
  transform:translateY(-7px);
  box-shadow:0 22px 44px rgba(0,0,0,.35);
}
.brand-tile .index{
  position:absolute;top:14px;right:18px;font-size:11px;font-weight:800;
  color:rgba(255,255,255,.22);letter-spacing:.5px;
}
.brand-badge{
  width:100%;aspect-ratio:8/3;border-radius:12px;background:#fff;margin:0 0 18px;
  overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.3);transition:.35s;
}
.brand-tile:hover .brand-badge{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.4);}
.brand-badge img{width:100%;height:100%;object-fit:cover;object-position:center;transition:.4s;}
.brand-tile:hover .brand-badge img{transform:scale(1.06);}
.brand-tile h4{color:#fff;font-size:15.5px;margin-bottom:8px;}
.brand-cat{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.5);
}
.brand-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tile-accent, var(--accent));flex-shrink:0;}
a.brand-tile{display:block;}
a.brand-tile::after{
  content:"\2197";position:absolute;bottom:16px;right:18px;font-size:16px;font-weight:800;
  color:var(--tile-accent, var(--accent));opacity:0;transform:translate(-4px,4px);transition:.3s;
}
a.brand-tile:hover::after{opacity:1;transform:translate(0,0);}

.brand-marquee{
  margin-top:52px;overflow:hidden;position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brand-marquee-track{display:flex;gap:28px;width:max-content;align-items:center;animation:brandScroll 30s linear infinite;}
.brand-marquee-track img{
  height:44px;width:140px;object-fit:cover;object-position:center;border-radius:8px;
  filter:grayscale(1) brightness(1.3);opacity:.55;transition:.3s;
}
.brand-marquee-track img:hover{filter:grayscale(0) brightness(1);opacity:1;transform:scale(1.05);}
@keyframes brandScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Values (about page) ---------- */
.values{padding:110px 0;background:#f4f6f6;}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.value-card{background:#fff;border-radius:14px;padding:36px 28px;}
.value-card .num{
  width:46px;height:46px;border-radius:50%;background:var(--primary-color);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:20px;
}
.value-card h4{font-size:19px;margin-bottom:10px;}
.value-card p{color:var(--muted);font-size:15px;}

.experience{padding:100px 0;}
.experience-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:center;}
.experience .big-num{font-size:110px;font-weight:800;color:var(--primary-color);line-height:1;}
.experience .big-num span{display:block;font-size:16px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-top:10px;}
.experience-text p{font-size:18px;color:var(--muted);}

/* ---------- Timeline (company history) ---------- */
.timeline{padding:110px 0;}
.timeline-item{display:grid;grid-template-columns:80px 1fr;gap:30px;margin-bottom:50px;position:relative;}
.timeline-item .step{
  width:56px;height:56px;border-radius:50%;background:var(--primary-color);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;z-index:1;
}
.timeline-item::before{
  content:"";position:absolute;left:27px;top:56px;bottom:-50px;width:2px;background:var(--border);
}
.timeline-item:last-child::before{display:none;}
.timeline-item p{color:var(--muted);font-size:16px;}

/* ---------- Newsletter ---------- */
.newsletter{
  background:url('../assets/img/bg-newsletter-gray.png') center/cover, #eef2f2;
  padding:70px 0;
}
.newsletter-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
.newsletter-inner h3{font-size:28px;max-width:480px;}
.newsletter-form{display:flex;gap:0;max-width:440px;width:100%;}
.newsletter-form input{
  flex:1;padding:16px 20px;border:1px solid var(--border);border-radius:50px 0 0 50px;
  font-family:var(--font);font-size:15px;outline:none;background:#fff;
}
.newsletter-form button{
  border-radius:0 50px 50px 0;padding:16px 30px;background:var(--primary-color);color:#fff;
  border:1px solid var(--primary-color);font-weight:700;cursor:pointer;
}
.newsletter-form button:hover{background:var(--link-hover);}

/* ---------- Footer ---------- */
footer.site-footer{
  background:linear-gradient(rgba(1,6,20,.92),rgba(1,6,20,.92)), url('../assets/img/bg-footer.jpg') center/cover;
  color:rgba(255,255,255,.7);padding-top:90px;
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-grid h4{color:#fff;font-size:19px;margin-bottom:18px;}
.footer-grid .logo img{height:32px;margin-bottom:20px;}
.footer-contact li{display:flex;gap:12px;margin-bottom:16px;font-size:15px;}
.footer-contact li b{color:#fff;display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:700;}
.footer-links li{margin-bottom:12px;}
.footer-links a:hover{color:var(--accent);}
.footer-newsletter p{font-size:14px;margin-bottom:20px;}
.footer-newsletter form{display:flex;}
.footer-newsletter input{
  flex:1;padding:13px 16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  border-radius:50px 0 0 50px;color:#fff;outline:none;font-family:var(--font);
}
.footer-newsletter button{
  padding:13px 22px;border-radius:0 50px 50px 0;background:var(--accent);border:1px solid var(--accent);
  color:var(--dark-color);font-weight:700;cursor:pointer;
}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:14px;flex-wrap:wrap;gap:10px;}
.footer-bottom .legal{display:flex;gap:22px;}
.footer-bottom a:hover{color:var(--accent);}

/* ---------- Contact page ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:-140px;position:relative;z-index:5;}
.contact-card{
  background:#fff;border-radius:14px;padding:36px 30px;box-shadow:0 20px 50px rgba(15,30,35,.1);text-align:center;
}
.contact-card .icon{
  width:58px;height:58px;border-radius:50%;background:var(--accent-track);color:var(--primary-color);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:24px;
}
.contact-card h4{font-size:16px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:8px;}
.contact-card p{font-size:18px;font-weight:700;}
.contact-form-wrap{padding:110px 0;}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.contact-form{display:grid;gap:18px;}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.contact-form input,.contact-form textarea{
  padding:16px 18px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);
  font-size:15px;outline:none;background:#f8f9f9;
}
.contact-form textarea{min-height:140px;resize:vertical;}
.contact-form button{justify-self:start;}
.map-frame{border-radius:14px;overflow:hidden;height:100%;min-height:360px;}
.map-frame iframe{width:100%;height:100%;border:0;min-height:360px;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .about-grid,.experience-grid,.contact-form-grid{grid-template-columns:1fr;}
  .feature-grid,.gurus-grid,.values-grid{grid-template-columns:repeat(2,1fr);}
  .brand-grid{grid-template-columns:repeat(3,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid .stat-item:nth-child(2){border-right:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-slide-content h1{font-size:56px;}
  .contact-cards{grid-template-columns:1fr;margin-top:-100px;}
}
@media (max-width:780px){
  nav.main-nav{
    position:fixed;top:0;right:-320px;width:300px;height:100vh;background:var(--primary-color);
    padding:100px 30px;transition:.35s;z-index:100;
  }
  nav.main-nav.open{right:0;}
  nav.main-nav ul{flex-direction:column;gap:22px;}
  .burger{display:flex;}
  .logo img{height:44px;}
  .logo{margin-left:20px;}
  .header-cta .btn{display:none;}
  .topbar .container{justify-content:center;}
  .service-grid,.feature-grid,.gurus-grid,.values-grid,.brand-grid{grid-template-columns:1fr;}
  .brand-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:1fr;}
  .stats-grid .stat-item{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:24px;}
  .hero-slide-content h1{font-size:40px;}
  .hero-arrows{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .contact-form .row2{grid-template-columns:1fr;}
  .experience .big-num{font-size:70px;}
  .brands-panel{padding:48px 20px 36px;border-radius:20px;}
  .hero-slide-content{max-width:calc(100% - 48px);}
}