/* ===========================================================
   Smartlink Technologies — site stylesheet
   =========================================================== */

:root{
  --navy: #16233f;
  --navy-dark: #0e1830;
  --orange: #ef6c1f;
  --orange-dark: #d3590f;
  --gold: #d9a400;
  --gold-dark: #b98700;
  --grey-bg: #eef0f2;
  --text: #26313f;
  --text-light: #6b7785;
  --white: #ffffff;
  --border: #e3e6ea;
  --radius: 8px;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  line-height:1.65;
  background:var(--white);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.25;font-weight:700;color:var(--navy);}
p{margin:0 0 1em;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--gold);
  color:var(--white);
  padding:13px 30px;
  border-radius:30px;
  font-weight:700;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:none;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{background:var(--gold-dark);transform:translateY(-1px);}
.btn-outline{
  background:transparent;
  border:2px solid var(--navy);
  color:var(--navy);
}
.btn-outline:hover{background:var(--navy);color:var(--white);}

/* ---------- Header ---------- */
.site-header{
  background:var(--white);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 14px rgba(20,30,50,.08);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:800;
  color:var(--navy);
  letter-spacing:.3px;
}
.logo span{color:var(--orange);}
.logo img{height:48px;width:auto;}

nav.main-nav{display:flex;}
nav.main-nav > ul{display:flex;align-items:center;gap:2px;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
  display:block;
  padding:12px 15px;
  color:var(--navy);
  font-size:14.5px;
  font-weight:600;
  border-radius:4px;
  transition:color .2s;
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.active > a{
  color:var(--orange);
}
.has-sub > .sub-menu{
  display:none;
  position:absolute;
  top:100%;left:0;
  background:var(--white);
  min-width:200px;
  border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(20,30,50,.16);
  padding:8px 0;
  overflow:hidden;
  border:1px solid var(--border);
}
.has-sub:hover > .sub-menu{display:block;}
.sub-menu li a{
  display:block;
  padding:10px 18px;
  color:var(--text);
  font-size:14px;
  font-weight:500;
}
.sub-menu li a:hover{background:var(--grey-bg);color:var(--orange);}
.sub-menu li span{
  display:block;
  padding:10px 18px;
  color:var(--text-light);
  font-size:14px;
  font-weight:500;
  cursor:default;
}
.nav-cta{margin-left:8px;}
.nav-cta a{padding:10px 22px;font-size:13px;background:var(--gold);}
.nav-cta a:hover{background:var(--gold-dark);}

.menu-toggle{display:none;background:none;border:none;color:var(--navy);font-size:26px;cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  background:#f5f4ef;
  color:var(--navy);
  padding:100px 0 90px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.hero .container{max-width:760px;}
.hero.hero-home{padding:0;border-bottom:1px solid var(--border);background:#fff;}

.hero-inner{
  max-width:var(--max);margin:0 auto;padding:90px 24px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
}
.hero-home .hero-text{max-width:540px;}
.hero-home .hero-image{display:flex;align-items:center;justify-content:center;}

.hero-panel{
  position:relative;width:100%;max-width:380px;height:340px;
  border-radius:32px;
  background:linear-gradient(135deg,#fbf3dd 0%,#f5e2ae 55%,#eccf85 100%);
  box-shadow:0 30px 60px rgba(217,164,0,.22);
  overflow:hidden;
}
.hero-panel::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(22,35,63,.08) 1.4px, transparent 1.4px);
  background-size:20px 20px;
  opacity:.5;
}
.panel-sweep{
  position:absolute;
  top:-40%;left:-60%;
  width:60%;height:220%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%, transparent 100%);
  transform:rotate(12deg);
  animation:panelSweep 4.5s ease-in-out infinite;
}
@keyframes panelSweep{
  0%{left:-60%;}
  55%,100%{left:130%;}
}
.panel-dot{position:absolute;border-radius:6px;}
.d1{width:10px;height:10px;background:var(--orange);top:9%;left:10%;animation:dotPulse 2.6s ease-in-out infinite;}
.d2{width:8px;height:8px;background:var(--navy);opacity:.5;bottom:12%;right:14%;animation:dotPulse 2.6s ease-in-out infinite .5s;}
.d3{width:7px;height:7px;background:#fff;opacity:.8;top:44%;right:8%;animation:dotPulse 2.6s ease-in-out infinite 1s;}
@keyframes dotPulse{
  0%,100%{transform:scale(1);opacity:.6;}
  50%{transform:scale(1.6);opacity:1;}
}

.panel-phone{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:44%;max-width:165px;
  filter:drop-shadow(0 22px 26px rgba(20,30,50,.32));
  z-index:2;
  animation:panelPhoneFloat 4.5s ease-in-out infinite;
}
@keyframes panelPhoneFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-12px);}
}
.panel-watch{
  position:absolute;left:6%;top:10%;
  width:28%;max-width:100px;
  filter:drop-shadow(0 16px 18px rgba(20,30,50,.28)) rotate(-9deg);
  z-index:3;
  animation:panelWatchFloat 5s ease-in-out infinite;
}
@keyframes panelWatchFloat{
  0%,100%{transform:translateY(0) rotate(-9deg);}
  50%{transform:translateY(-10px) rotate(-6deg);}
}
.panel-buds{
  position:absolute;right:5%;bottom:7%;
  width:26%;max-width:96px;
  filter:drop-shadow(0 16px 18px rgba(20,30,50,.28)) rotate(8deg);
  z-index:3;
  animation:panelBudsFloat 4.2s ease-in-out infinite .3s;
}
@keyframes panelBudsFloat{
  0%,100%{transform:translateY(0) rotate(8deg);}
  50%{transform:translateY(-9px) rotate(5deg);}
}

.hero h1{color:var(--navy);font-size:44px;font-weight:800;line-height:1.18;margin-bottom:.45em;}
.hero h3{color:#4a5568;font-weight:500;font-size:19px;margin-bottom:1.6em;}
.hero.page-hero{padding:64px 0;text-align:center;}
.hero.page-hero .container{max-width:var(--max);}
.hero.page-hero h1{font-size:34px;}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;text-align:center;padding:60px 24px;}
  .hero-home .hero-text{margin:0 auto;}
  .hero-home .hero-image{order:-1;}
  .hero-panel{max-width:300px;height:280px;}
}
@media (max-width:520px){
  .hero h1{font-size:30px;}
}

section{padding:70px 0;}
.section-tight{padding:50px 0;}
.section-alt{background:var(--grey-bg);}
.section-title{text-align:center;max-width:640px;margin:0 auto 46px;}
.section-title h2{font-size:30px;}
.section-title p{color:var(--text-light);}

/* ---------- Card grid (services / partners / blog) ---------- */
.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:0 14px 30px rgba(14,35,64,.1);transform:translateY(-3px);}
.card h3{font-size:19px;}
.card p{color:var(--text-light);margin-bottom:0;}

.partner-badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:36px;margin-top:40px;
}
.partner-badge{display:flex;flex-direction:column;align-items:center;gap:12px;width:110px;}
.badge-ring{
  width:130px;height:130px;border-radius:50%;
  padding:5px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.badge-ring::before{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--orange), var(--gold), transparent 35%, transparent 65%, var(--orange));
  animation:ringSpin 4s linear infinite;
}
.badge-ring::after{
  content:"";
  position:absolute;inset:5px;
  border-radius:50%;
  background:var(--white);
}
@keyframes ringSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.badge-circle{
  width:120px;height:120px;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  position:relative;
  z-index:1;
  transition:transform .25s ease;
}
.partner-badge{width:130px;}
.partner-badge:hover .badge-circle{transform:scale(1.08);}
.partner-badge:hover .badge-ring::before{animation-duration:1.6s;}
.badge-circle img{max-width:100%;max-height:100%;object-fit:contain;}
.partner-badge span{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--navy);display:block;margin-top:2px;}

.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:20px;}
.eco-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;padding:18px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.eco-card:hover{box-shadow:0 14px 30px rgba(20,30,50,.1);transform:translateY(-3px);}
.eco-card img{max-height:100%;max-width:100%;object-fit:contain;}
.eco-card.wide{grid-column:span 2;grid-row:span 2;}
@media (max-width:720px){
  .eco-grid{grid-template-columns:repeat(2,1fr);}
  .eco-card.wide{grid-column:span 2;grid-row:span 1;height:200px;}
}

.blog-card img{border-radius:var(--radius) var(--radius) 0 0;height:190px;width:100%;object-fit:cover;}
.blog-card{padding:0;overflow:hidden;display:block;color:inherit;}
.blog-card .blog-body{padding:22px;}
.blog-card h3{font-size:17px;}
.blog-card .readmore{color:var(--orange);font-weight:700;font-size:13.5px;}

/* ---------- Two column ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}

/* ---------- Policy boxes (home strip) ---------- */
.policy-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:920px;margin:0 auto;}
.policy-box{background:var(--grey-bg);border-radius:14px;padding:30px 26px;text-align:center;}
.policy-box .icon-circle{
  width:52px;height:52px;border-radius:50%;
  background:var(--orange);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin:0 auto 16px;
}
.policy-box h4{font-size:17px;margin-bottom:14px;}
.policy-box ul{margin-bottom:20px;list-style:none;padding:0;text-align:center;}
.policy-box li{color:var(--text-light);font-size:14.5px;margin-bottom:4px;}
.policy-box .btn{padding:11px 26px;font-size:12.5px;}

/* ---------- Testimonials ---------- */
.testimonial{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:34px;}
.testimonial p{font-style:italic;color:var(--text-light);}
.testimonial h4{margin:0;font-size:16px;}
.testimonial span{color:var(--orange);font-size:13px;font-weight:600;}

/* ---------- Content page ---------- */
.content-page{max-width:840px;margin:0 auto;}
.content-page h2{font-size:26px;margin-top:1.6em;}
.content-page ul{margin:0 0 1.2em;padding-left:20px;list-style:disc;}
.content-page li{margin-bottom:6px;color:var(--text);}
.content-page table{width:100%;border-collapse:collapse;margin-bottom:1.4em;font-size:14px;}
.content-page table th,.content-page table td{border:1px solid var(--border);padding:8px 10px;text-align:left;}
.content-page table th{background:var(--grey-bg);}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.contact-info h4{color:var(--text-light);text-transform:uppercase;font-size:12.5px;letter-spacing:.06em;margin-bottom:4px;}
.contact-info p{margin-bottom:1.4em;}
.social-row{display:flex;gap:12px;margin-top:20px;}
.social-row a{
  width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
}
.social-row a:hover{background:var(--orange);}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);height:100%;min-height:340px;}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;}
.form-box{background:var(--grey-bg);border-radius:var(--radius);padding:30px;}
.form-box input,.form-box textarea{
  width:100%;padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--border);border-radius:4px;font-family:inherit;font-size:14.5px;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#b9c3d1;padding:60px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-grid h4{color:var(--white);font-size:15px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em;}
.footer-grid li{margin-bottom:9px;font-size:14.5px;}
.footer-grid li a:hover{color:var(--orange);}
.footer-about p{color:#9aa6b6;font-size:14.5px;}
.footer-bottom{
  max-width:var(--max);margin:0 auto;padding:20px 24px;
  display:flex;justify-content:center;align-items:center;
  font-size:13.5px;color:#8592a3;
}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--white);
}
.footer-social a:hover{background:var(--orange);}

/* ---------- Breadcrumb-ish page hero label ---------- */
.eyebrow{color:var(--orange);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .policy-strip{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  nav.main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);
    flex-direction:column;
    display:none;
    box-shadow:0 12px 20px rgba(20,30,50,.15);
    border-top:1px solid var(--border);
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav > ul{flex-direction:column;width:100%;align-items:stretch;}
  nav.main-nav > ul > li > a{padding:14px 24px;}
  .has-sub > .sub-menu{position:static;box-shadow:none;background:var(--grey-bg);border-radius:0;border:none;}
  .sub-menu li a{padding:10px 40px;}
  .menu-toggle{display:block;}
  .eco-grid{grid-template-columns:1fr 1fr;}
  .grid-4,.grid-3{grid-template-columns:1fr;}
  .policy-strip{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
}