/* ITTM COMPANY LTD — Light/Dark themes + icons + animations */
:root{
  /* Light theme (default) */
  --bg:#ffffff;         /* page base */
  --bg-alt:#f8fafc;
  --hero-footer-bg:#0f172a; /* darker section bg */
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#0ea5e9; /* light blue */
  --brand:#4f46e5;  /* indigo */
  --border:#e2e8f0;
  --shadow:0 8px 24px rgba(2,6,23,.08);
}
html[data-theme="dark"]{
  --bg:#0b1020;
  --bg-alt:#0f172a;
  --hero-footer-bg:#0b1020; /* also dark */
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#06b6d4;
  --brand:#4f46e5;
  --border:#1f2937;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,var(--bg),var(--bg-alt) 40%,var(--bg));
  color:var(--text); line-height:1.6;
}
.container{width:min(1100px,92%);margin-inline:auto}

.header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 86%, transparent);backdrop-filter: blur(8px);border-bottom:1px solid var(--border)}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{width:40px;height:40px;object-fit:contain;filter: drop-shadow(0 2px 8px color-mix(in srgb,var(--accent) 50%, transparent)); animation: logoFloat 6s ease-in-out infinite}
.logo-text{color:var(--text);font-weight:800;letter-spacing:.4px}
.logo-text strong{color:var(--accent)}

.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px}
.theme-toggle{background:none;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer}

.nav-list{display:flex;gap:20px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-list a:hover{background:color-mix(in srgb,var(--accent) 8%, transparent)}
.theme-li{margin-left:6px}

.hero{padding:64px 0 36px;border-bottom:1px solid var(--border);background:var(--hero-footer-bg); color:#e5e7eb}
.hero h1, .hero .lead{color:#e5e7eb}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:0 0 12px}
.hero .lead{margin:0 0 18px}
.cta-group{display:flex;gap:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid var(--border);color:var(--text)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:white;border-color:transparent}
.btn-outline:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.hero-visual{display:flex;justify-content:center}
.hero-logo{width:clamp(180px,40vw,360px);animation: logoFloat 6s ease-in-out infinite; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--brand) 30%, transparent))}

.section{padding:56px 0;border-bottom:1px solid var(--border)}
.section.alt{background:color-mix(in srgb,var(--bg-alt) 70%, var(--bg))}
.section-title{font-size:clamp(22px,2.4vw,30px);margin:0 0 18px}
.section-intro{color:var(--muted)}

/* Services with icons */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);padding:20px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px}
.card p{margin:0;color:var(--muted)}
.services .card .icon{width:36px;height:36px;color:var(--accent)}
.services .card .icon svg{width:100%;height:100%}

.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.project{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr}
.project-img{width:100%;height:100%;object-fit:cover}
.project-body{padding:20px;background-color: cyan}
.project h3{margin:0 0 6px}
.project p{margin:0 0 10px;color:var(--muted)}


.team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.member{background:var(--card);padding:20px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.avatar-wrap{width:84px;height:84px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.avatar{width:100%;height:100%;object-fit:cover}
.member h4{margin:0 0 6px}
.member .role{margin:0;color:var(--muted)}
.member .responsibilities{margin:10px 0 0 18px;color:var(--muted)}

.member{display:block}
.member-top{display:grid;grid-template-columns:84px 1fr;gap:14px}
.member .responsibilities{margin:14px 0 0 0;padding-left:18px}
.footer .slogan{opacity:.9;margin:0}

.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.contact-form{background:var(--card);padding:20px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.contact-form label{display:block;margin-bottom:12px}
.contact-form label span{display:block;margin-bottom:6px;color:var(--muted);font-size:.95rem}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:color-mix(in srgb,var(--bg) 96%, black 4%);color:var(--text)}
.contact-form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.privacy-note{font-size:.9rem;color:var(--muted)}
.contact-details{background:var(--card);padding:20px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.icon-row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;margin-bottom:12px}
.icon-row .icon{width:28px;height:28px;color:var(--accent)}
.icon-row .icon svg{width:100%;height:100%}
.icon-row a {text-decoration: none}
.map-wrap{margin-top:14px;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.map-wrap iframe{width:100%;height:280px;border:0;display:block}

.footer{padding:28px 0; background:var(--hero-footer-bg); color:#e5e7eb}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding-top:14px}
.footer a{color:#e5e7eb}
.footer .to-top{color:#e5e7eb;text-decoration:none;border:1px solid var(--border);padding:6px 10px;border-radius:8px}
.footer .to-top:hover{background:color-mix(in srgb,#ffffff 10%, transparent)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.in-view{opacity:1;transform:none}

/* Animations */
@keyframes logoFloat{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes logoSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.brand:hover .logo-img{animation: logoSpin 0.9s ease-in-out}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo-img,.hero-logo{animation:none}
  .brand:hover .logo-img{animation:none}
  .reveal{transition:none}
}

/* Responsive */
@media (max-width: 980px){
  .project{grid-template-columns:1fr}
}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .hero-visual{display:none;}
}
@media (max-width: 640px){
  .nav-toggle{display:inline-block}
  .nav-list{display:none;position:absolute;right:12px;top:56px;background:color-mix(in srgb,var(--bg) 98%, transparent);border:1px solid var(--border);border-radius:12px;padding:10px 8px;flex-direction:column;min-width:220px}
  .nav-list.show{display:flex}
  .cards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
}

/* === Team member photo hover animation === */

/* Ensure the avatar container outlines the image nicely */
.avatar-wrap {
  display: inline-block;
  border-radius: 14px;               /* match your card rounding if any */
  overflow: hidden;                  /* clips the scaled image corners */
  box-shadow: 0 0 0 rgba(0,0,0,0);   /* base shadow for transition */
  transform: translateZ(0);          /* promote to its own layer for smoother anims */
  transition:
    box-shadow 300ms ease,
    transform 300ms ease;
}

/* The image itself */
.avatar {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  filter: grayscale(20%);            /* slight desaturation by default (optional) */
  transition:
    transform 400ms cubic-bezier(.2,.7,.2,1),
    filter 400ms ease;
  will-change: transform, filter;
}

/* Hover / focus-within state */
.member:hover .avatar-wrap,
.member:focus-within .avatar-wrap {
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

.member:hover .avatar,
.member:focus-within .avatar {
  transform: scale(1.06);
  filter: grayscale(0%);             /* fade back to full color (optional) */
}

/* Keyboard focus support—if the image gets focus */
.avatar:focus {
  outline: none;
}

/* Prefer-reduced-motion: keep it subtle for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .avatar-wrap,
  .avatar {
    transition: none;
  }
  .member:hover .avatar-wrap,
  .member:focus-within .avatar-wrap {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .member:hover .avatar,
  .member:focus-within .avatar {
    transform: none;
    filter: none;
  }
}

/* Optional: add a neat border glow on hover that matches your accent color */
.member:hover .avatar-wrap::after,
.member:focus-within .avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent, #4f46e5); /* uses your CSS var if present */
  opacity: 0.75;
}

/* Ensure .avatar-wrap can position the ::after pseudo-element */
.avatar-wrap {
  position: relative;
}


/* ===== Back-to-top button ===== */
.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 999;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent, #4f46e5);   /* uses your existing --accent if set */
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.to-top:hover,
.to-top:focus-visible {
  background: color-mix(in oklab, var(--accent, #4f46e5) 88%, white);
  box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.14);
  outline: none;
}

/* Visible state toggled by JS */
.to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}