/* ==========================================================================
   mavi11.com — Digital Çözümler  •  Frontend Skin
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css');

:root{
  --m-deep:      #0a3d8f;
  --m-blue:      #1d8ce0;
  --m-bright:    #5fb8e8;
  --m-cyan:      #66c7f4;
  --m-ink:       #0b1220;
  --m-ink-2:     #1c2536;
  --m-muted:     #5b6478;
  --m-line:      #e6ecf5;
  --m-bg:        #ffffff;
  --m-soft:      #f3f8ff;
  --m-soft-2:    #eaf3ff;
  --m-grad:      linear-gradient(135deg,#0a3d8f 0%,#1d8ce0 55%,#5fb8e8 100%);
  --m-grad-soft: linear-gradient(180deg,#f3f8ff 0%,#ffffff 100%);
  --m-shadow:    0 10px 30px rgba(10,61,143,.08);
  --m-shadow-lg: 0 24px 60px rgba(10,61,143,.18);
  --m-radius:    14px;
  --m-radius-lg: 22px;
  --m-trans:     .25s cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Poppins","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--m-ink);
  background:var(--m-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--m-blue); text-decoration:none; transition:color var(--m-trans); }
a:hover{ color:var(--m-deep); }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4,h5,h6{
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  color:var(--m-ink);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2rem, 4.2vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 2.8vw, 2.4rem); }
h3{ font-size:clamp(1.2rem, 1.8vw, 1.5rem); }

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

.text-grad{
  background:var(--m-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--m-blue);
  padding:.45rem .8rem;
  background:var(--m-soft);
  border:1px solid var(--m-soft-2);
  border-radius:999px;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--m-blue);
  box-shadow:0 0 0 4px rgba(29,140,224,.15);
}

/* ----- Buttons ----- */
.m-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem;
  font-weight:700; font-size:.95rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--m-trans), box-shadow var(--m-trans), background var(--m-trans), color var(--m-trans);
  white-space:nowrap;
}
.m-btn i{ font-size:1.05em; }
.m-btn:hover{ transform:translateY(-2px); }

.m-btn-primary{
  background:var(--m-grad);
  color:#fff;
  box-shadow:0 10px 24px rgba(29,140,224,.32);
}
.m-btn-primary:hover{
  color:#fff;
  box-shadow:0 14px 32px rgba(29,140,224,.45);
}

.m-btn-outline{
  background:transparent;
  color:var(--m-deep);
  border-color:var(--m-deep);
}
.m-btn-outline:hover{
  background:var(--m-deep); color:#fff;
}

.m-btn-light{
  background:#fff; color:var(--m-deep);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.m-btn-light:hover{ color:var(--m-deep); }

.m-btn-ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.5);
}
.m-btn-ghost:hover{ background:#fff; color:var(--m-deep); }


/* ===== References page ===== */
.m-refs-page .m-section-head{
  max-width:780px;
  margin-inline:auto;
  text-align:center;
}
.m-refs-page .m-section-head p{
  margin-top:.55rem;
  color:var(--m-muted);
}
.m-ref-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem;
  margin:1rem 0 1.35rem;
}
.m-ref-chip{
  border:1px solid #d5deed;
  background:#fff;
  color:var(--m-ink);
  border-radius:999px;
  padding:.42rem .85rem;
  font-weight:700;
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s ease;
}
.m-ref-chip:hover{
  border-color:#7caeff;
  color:#0a3d8f;
}
.m-ref-chip.is-active{
  border-color:#0a3d8f;
  background:#0a3d8f;
  color:#fff;
}
.m-ref-group{
  margin-top:1rem;
}
.m-ref-group + .m-ref-group{
  margin-top:1.6rem;
}
.m-ref-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.75rem;
}
.m-ref-group-head h2{
  margin:0;
  font-size:1.15rem;
  color:var(--m-ink);
}
.m-ref-group-head span{
  font-size:.8rem;
  color:var(--m-muted);
  border:1px solid #dde5f2;
  border-radius:999px;
  padding:.22rem .65rem;
}
.m-refs-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.m-ref-card{
  background:#fff;
  border:1px solid var(--m-line);
  border-radius:16px;
  min-height:220px;
  padding:.9rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition:transform var(--m-trans), box-shadow var(--m-trans), border-color var(--m-trans);
}
.m-ref-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--m-shadow-lg);
  border-color:#c8dfff;
}
.m-ref-inner{
  width:100%;
  min-height:160px;
  flex:1;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #f8fbff 0%, #f0f4fa 100%);
  overflow:hidden;
  text-decoration:none;
}
.m-ref-inner img{
  max-width:78%;
  max-height:78%;
  object-fit:contain;
  filter:grayscale(1) contrast(1.1) brightness(.92);
  opacity:.94;
  transition:filter .28s ease, opacity .28s ease, transform .28s ease;
}
.m-ref-card:hover .m-ref-inner img{
  filter:none;
  opacity:1;
  transform:scale(1.04);
}
.m-ref-title{
  font-size:.9rem;
  font-weight:600;
  text-align:center;
  color:var(--m-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.m-ref-link{
  display:block;
  text-align:center;
  text-decoration:none;
  font-size:.78rem;
  font-weight:700;
  color:#0a3d8f;
}
.m-ref-link:hover{
  text-decoration:underline;
}
.m-ref-link.is-muted{
  color:var(--m-muted);
}
.m-ref-empty{
  margin:1.3rem auto 0;
  max-width:600px;
  text-align:center;
  background:#f8fbff;
  border:1px dashed #cfe0fb;
  border-radius:14px;
  padding:1.2rem;
  color:var(--m-muted);
}
.m-ref-empty i{ font-size:1.3rem; color:var(--m-blue); }

@media (max-width: 900px){
  .m-ref-group-head h2{ font-size:1.02rem; }
  .m-refs-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .m-ref-group-head{ flex-direction:column; align-items:flex-start; }
  .m-refs-grid{ grid-template-columns:1fr; }
}


/* ----- Header / Nav ----- */
.m-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--m-line);
  transition:box-shadow var(--m-trans);
}
.m-header.is-stuck{ box-shadow:0 8px 24px rgba(10,61,143,.08); }
.m-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; gap:1rem;
  position:relative;
}
.m-brand{
  display:inline-flex; align-items:center; gap:.7rem;
  font-weight:800; color:var(--m-ink); font-size:1.15rem;
  letter-spacing:-.01em;
}
.m-brand img{height: 28px;width:auto;image-rendering:-webkit-optimize-contrast;}
.m-brand .brand-fallback{
  font-weight:900; font-size:1.55rem;
  background:var(--m-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-brand small{
  display:block; font-size:.72rem; color:var(--m-muted);
  font-weight:600; letter-spacing:.04em;
}

/* Text-only logo */
.m-brand-text{ text-decoration:none; }
.m-brand-text:hover{ color:var(--m-ink); }
.m-brand-mark{
  flex:0 0 auto;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--m-grad);
  color:#fff; font-weight:900; font-size:1.35rem;
  border-radius:12px;
  box-shadow:0 8px 18px rgba(29,140,224,.32), inset 0 1px 0 rgba(255,255,255,.25);
  letter-spacing:-.02em;
  font-family:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
}
.m-brand-text-wrap{ display:inline-flex; flex-direction:column; line-height:1.05; }
.m-brand-name{
  font-weight:900; font-size:1.35rem; letter-spacing:-.02em;
}
.m-brand-name .m-brand-accent{
  background:var(--m-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-brand-name .m-brand-tld{
  color:var(--m-muted); font-weight:700;
}
.m-brand-text small{
  display:block; font-size:.7rem; color:var(--m-muted);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  margin-top:.15rem;
}

.m-menu{
  display:flex; gap:.2rem; align-items:center; list-style:none; margin:0; padding:0;
}
.m-menu a{
  position:relative;
  color:var(--m-ink-2);
  font-weight:600; font-size:.95rem;
  padding:.6rem .95rem; border-radius:8px;
  transition:color var(--m-trans), background var(--m-trans);
}
.m-menu a:hover,
.m-menu a.active{ color:var(--m-deep); background:var(--m-soft); }
.m-menu a.active::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:18px; height:3px; border-radius:3px; background:var(--m-grad);
}

.m-nav-cta{ display:flex; gap:.5rem; align-items:center; }

.m-burger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:var(--m-soft); border:1px solid var(--m-line); border-radius:10px;
  color:var(--m-deep); cursor:pointer;
}
.m-burger:hover{ background:var(--m-soft-2); }

body.menu-open{ overflow:hidden; }

.m-menu-backdrop{
  position:fixed;
  inset:0;
  background:transparent;
  backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--m-trans), visibility var(--m-trans);
  z-index:40;
}
.m-menu-backdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.m-menu .m-menu-mobile-only{ display:none; }

@media (max-width: 992px){
  .m-menu{
    position:fixed;
    top:0;
    right:-110%;
    left:auto;
    height:100dvh;
    max-height:none;
    width:min(82vw, 300px);
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:calc(4.6rem + env(safe-area-inset-top)) .9rem calc(.9rem + env(safe-area-inset-bottom));
    box-shadow:-18px 0 38px rgba(0,0,0,.16);
    border-left:1px solid #e5edf9;
    transform:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:right var(--m-trans), opacity var(--m-trans), visibility var(--m-trans);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:59;
  }
  .m-menu.open{
    right:0;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .m-menu li{ list-style:none; }
  .m-menu a{
    display:block;
    padding:.9rem .7rem;
    border-radius:8px;
    font-size:1rem;
    font-weight:700;
    color:var(--m-ink);
    background:transparent;
    border-bottom:1px solid #edf2fb;
  }
  .m-menu li:last-child a{ border-bottom:0; }
  .m-menu a:hover,
  .m-menu a.active{
    background:#eef4ff;
    color:var(--m-deep);
  }
  .m-menu a.active::after{ display:none; }
  .m-burger{
    display:inline-flex;
    position:relative;
    z-index:60;
  }
  .m-nav-cta .m-btn:not(.m-burger){ display:none; }
}

/* ----- Hero ----- */
.m-hero{
  position:relative; overflow:hidden;
  background:var(--m-grad-soft);
  padding:5rem 0 4rem;
}
.m-hero::before,
.m-hero::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.45; z-index:0;
}
.m-hero::before{
  width:520px; height:520px;
  background:radial-gradient(circle, #5fb8e8 0%, transparent 70%);
  top:-180px; right:-120px;
}
.m-hero::after{
  width:420px; height:420px;
  background:radial-gradient(circle, #0a3d8f 0%, transparent 70%);
  bottom:-160px; left:-100px; opacity:.25;
}
.m-hero .container{ position:relative; z-index:1; }
.m-hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.m-hero h1{ margin-top:1rem; }
.m-hero h1 span{ display:inline-block; }
.m-hero p.lead{
  font-size:1.1rem; color:var(--m-muted); max-width:560px; margin:1rem 0 1.8rem;
}
.m-hero-cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
.m-hero-trust{
  display:flex; align-items:center; gap:1.5rem; margin-top:2.4rem;
  font-size:.88rem; color:var(--m-muted); flex-wrap:wrap;
}
.m-hero-trust strong{ color:var(--m-ink); font-weight:800; font-size:1.4rem; display:block; }

.m-hero-visual{
  position:relative; aspect-ratio:1/1; width:100%; max-width:520px; margin-left:auto;
}
.m-hero-visual .hero-photo{
  position:absolute; inset:0;
  border-radius:38% 62% 55% 45% / 45% 40% 60% 55%;
  overflow:hidden;
  box-shadow:var(--m-shadow-lg);
  animation:blob 12s ease-in-out infinite;
  background:var(--m-grad);
}
.m-hero-visual .hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(10,61,143,.15), transparent 50%);
  pointer-events:none;
}
.m-hero-visual .hero-photo img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.m-hero-visual .hero-video{
  position:absolute; inset:0;
  border-radius:38% 62% 55% 45% / 45% 40% 60% 55%;
  overflow:hidden;
  box-shadow:var(--m-shadow-lg);
  animation:blob 12s ease-in-out infinite;
  background:var(--m-grad);
}
.m-hero-visual .hero-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(10,61,143,.15), transparent 50%);
  pointer-events:none;
}
.m-hero-visual .hero-video video{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.m-hero-visual .blob{
  position:absolute; inset:0; border-radius:38% 62% 55% 45% / 45% 40% 60% 55%;
  background:var(--m-grad);
  animation:blob 12s ease-in-out infinite;
  box-shadow:var(--m-shadow-lg);
}
.m-hero-visual .blob::before,
.m-hero-visual .blob::after{
  content:""; position:absolute; border-radius:30px; background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.m-hero-visual .blob::before{
  width:60%; height:42%; top:18%; left:14%; transform:rotate(-6deg);
  background:linear-gradient(180deg,#fff,#f3f8ff);
}
.m-hero-visual .blob::after{
  width:48%; height:30%; bottom:14%; right:8%; transform:rotate(4deg);
  background:linear-gradient(180deg,#fff,#eaf3ff);
}
.m-hero-visual .badge-card{
  position:absolute; background:#fff; padding:.7rem .9rem; border-radius:14px;
  box-shadow:var(--m-shadow); display:flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:.85rem; color:var(--m-ink); z-index:2;
}
.m-hero-visual .badge-card i{ color:var(--m-blue); font-size:1.2rem; }
.m-hero-visual .badge-card.b1{ top:8%; left:-6%; animation:floaty 6s ease-in-out infinite; }
.m-hero-visual .badge-card.b2{ bottom:14%; right:-4%; animation:floaty 7s ease-in-out -2s infinite; }
.m-hero-visual .badge-card.b3{ bottom:-2%; left:8%; animation:floaty 8s ease-in-out -4s infinite; }

@keyframes blob{
  0%,100%{ border-radius:38% 62% 55% 45% / 45% 40% 60% 55%; }
  50%{ border-radius:55% 45% 38% 62% / 60% 55% 45% 40%; }
}
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

@media (max-width: 900px){
  .m-hero-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .m-hero-visual{ max-width:380px; margin:0 auto; }
}

/* ----- Section base ----- */
.m-section{ padding:5rem 0; }
.m-section.alt{ background:var(--m-soft); }
.m-section-head{ text-align:center; max-width:760px; margin:0 auto 3rem; }
.m-section-head p{ color:var(--m-muted); font-size:1.05rem; margin:0 auto; }

/* ----- Service cards ----- */
.m-services{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
}
.m-svc{
  position:relative;
  background:#fff;
  border:1px solid var(--m-line);
  border-radius:var(--m-radius-lg);
  padding:2rem 1.6rem;
  transition:transform var(--m-trans), box-shadow var(--m-trans), border-color var(--m-trans);
  overflow:hidden;
}
.m-svc::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:2px; background:var(--m-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--m-trans);
  pointer-events:none;
}
.m-svc:hover{ transform:translateY(-6px); box-shadow:var(--m-shadow-lg); border-color:transparent; }
.m-svc:hover::before{ opacity:1; }
.m-svc .ic{
  width:58px; height:58px; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--m-soft); color:var(--m-deep);
  font-size:1.7rem; margin-bottom:1.1rem;
  transition:background var(--m-trans), color var(--m-trans);
}
.m-svc:hover .ic{ background:var(--m-grad); color:#fff; }
.m-svc h3{ font-size:1.15rem; margin-bottom:.5rem; }
.m-svc p{ color:var(--m-muted); margin:0 0 1rem; font-size:.95rem; }
.m-svc .more{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:700; font-size:.88rem; color:var(--m-deep);
}
.m-svc .more i{ transition:transform var(--m-trans); }
.m-svc:hover .more i{ transform:translateX(4px); }

@media (max-width: 900px){ .m-services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .m-services{ grid-template-columns:1fr; } }

/* ----- Why us / Features ----- */
.m-why{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.m-why .image{
  background:var(--m-grad); border-radius:var(--m-radius-lg);
  aspect-ratio:1/1; max-width:480px; width:100%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:8rem; box-shadow:var(--m-shadow-lg);
  overflow:hidden; position:relative;
}
.m-why .image .why-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.m-features{ display:grid; gap:1.2rem; }
.m-feat{
  display:flex; gap:1rem; padding:1.2rem;
  background:#fff; border:1px solid var(--m-line); border-radius:var(--m-radius);
  transition:transform var(--m-trans), border-color var(--m-trans);
}
.m-feat:hover{ transform:translateX(4px); border-color:var(--m-bright); }
.m-feat .ic{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px;
  background:var(--m-soft); color:var(--m-deep);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.m-feat h4{ margin:0 0 .25rem; font-size:1.02rem; }
.m-feat p{ margin:0; color:var(--m-muted); font-size:.9rem; }

@media (max-width: 900px){ .m-why{ grid-template-columns:1fr; } .m-why .image{ margin:0 auto; } }

/* ----- Stats strip ----- */
.m-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  padding:2rem; background:var(--m-grad); border-radius:var(--m-radius-lg);
  color:#fff; box-shadow:var(--m-shadow-lg);
}
.m-stats .item{ text-align:center; }
.m-stats .num{ font-size:2.4rem; font-weight:800; letter-spacing:-.02em; }
.m-stats .lbl{ font-size:.85rem; opacity:.85; }
@media (max-width: 700px){ .m-stats{ grid-template-columns:repeat(2,1fr); } }

/* ----- References ----- */
.m-refs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.m-ref{
  background:#fff; border:1px solid var(--m-line); border-radius:var(--m-radius-lg);
  overflow:hidden; transition:transform var(--m-trans), box-shadow var(--m-trans);
  display:flex; flex-direction:column;
}
.m-ref:hover{ transform:translateY(-6px); box-shadow:var(--m-shadow-lg); }
.m-ref .media{
  aspect-ratio:16/10;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:2.2rem; font-weight:800; letter-spacing:.02em;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--m-line);
}
.m-ref .media img{
  max-width:78%; max-height:70%; width:auto; height:auto; object-fit:contain;
  display:block; filter:drop-shadow(0 2px 6px rgba(15,23,42,.08));
  transition:transform var(--m-trans);
}
.m-ref:hover .media img{ transform:scale(1.04); }
.m-ref .m-ref-logo{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  text-align:center; padding:1rem;
  background:var(--m-grad);
  position:absolute; inset:0;
  justify-content:center;
}
.m-ref .m-ref-logo .mono{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:50%;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.45);
  backdrop-filter:blur(6px);
  font-size:1.85rem; font-weight:800; color:#fff; letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.m-ref .m-ref-logo .name{
  font-size:1rem; font-weight:700; color:#fff; letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.2);
}
.m-ref .media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
}
.m-ref .body{ padding:1.2rem 1.4rem 1.4rem; }
.m-ref .tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--m-blue);
  padding:.25rem .55rem; background:var(--m-soft); border-radius:6px;
  margin-bottom:.5rem;
}
.m-ref h4{ margin:0 0 .3rem; font-size:1.1rem; }
.m-ref p{ margin:0; color:var(--m-muted); font-size:.92rem; }
@media (max-width: 900px){ .m-refs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .m-refs{ grid-template-columns:1fr; } }

/* ----- Process steps ----- */
.m-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step; }
.m-step{
  position:relative; padding:2rem 1.4rem 1.6rem;
  background:#fff; border:1px solid var(--m-line); border-radius:var(--m-radius-lg);
  counter-increment:step; transition:transform var(--m-trans), box-shadow var(--m-trans);
}
.m-step::before{
  content: counter(step, decimal-leading-zero);
  position:absolute; top:-20px; left:1.4rem;
  width:48px; height:48px; border-radius:14px;
  background:var(--m-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem;
  box-shadow:0 8px 20px rgba(29,140,224,.35);
}
.m-step:hover{ transform:translateY(-4px); box-shadow:var(--m-shadow); }
.m-step h4{ margin:.6rem 0 .4rem; font-size:1.05rem; }
.m-step p{ margin:0; color:var(--m-muted); font-size:.9rem; }
@media (max-width: 900px){ .m-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 540px){ .m-steps{ grid-template-columns:1fr; } }

/* ----- Tech stack chips ----- */
.m-stack{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
}
.m-stack span{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .95rem; background:#fff; border:1px solid var(--m-line);
  border-radius:999px; font-weight:600; font-size:.88rem; color:var(--m-ink-2);
  transition:transform var(--m-trans), border-color var(--m-trans), color var(--m-trans);
}
.m-stack span:hover{ transform:translateY(-3px); border-color:var(--m-blue); color:var(--m-deep); }
.m-stack i{ color:var(--m-blue); }

/* ----- Blog cards ----- */
.m-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.m-post{
  background:#fff; border:1px solid var(--m-line); border-radius:var(--m-radius-lg);
  overflow:hidden; transition:transform var(--m-trans), box-shadow var(--m-trans);
  display:flex; flex-direction:column;
}
.m-post:hover{ transform:translateY(-5px); box-shadow:var(--m-shadow-lg); }
.m-post .thumb{
  aspect-ratio:16/9; background:var(--m-grad-soft);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.m-post .thumb img{ width:100%; height:100%; object-fit:cover; }
.m-post .thumb .ph{ font-size:3rem; color:var(--m-bright); }
.m-post .body{ padding:1.2rem 1.4rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.m-post .meta{
  display:flex; gap:.8rem; font-size:.78rem; color:var(--m-muted);
  margin-bottom:.6rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.m-post h3{ font-size:1.1rem; margin:0 0 .6rem; }
.m-post p{ color:var(--m-muted); font-size:.92rem; margin:0 0 1rem; flex:1; }
.m-post .more{ color:var(--m-deep); font-weight:700; font-size:.88rem; }
@media (max-width: 900px){ .m-posts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .m-posts{ grid-template-columns:1fr; } }

/* ----- Testimonials ----- */
.m-testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.m-tm{
  background:#fff; border:1px solid var(--m-line);
  border-radius:var(--m-radius-lg); padding:1.6rem;
  position:relative;
}
.m-tm::before{
  content:"\201C"; position:absolute; top:-10px; left:18px;
  font-size:5rem; line-height:1; color:var(--m-bright); font-family:Georgia,serif;
}
.m-tm p{ margin:1rem 0 1.2rem; color:var(--m-ink-2); }
.m-tm .who{ display:flex; align-items:center; gap:.8rem; }
.m-tm .av{
  width:42px; height:42px; border-radius:50%; background:var(--m-grad);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
}
.m-tm strong{ display:block; font-size:.95rem; }
.m-tm small{ color:var(--m-muted); font-size:.8rem; }
@media (max-width: 900px){ .m-testimonials{ grid-template-columns:1fr; } }

/* ----- CTA Band ----- */
.m-cta{
  position:relative; overflow:hidden;
  background:var(--m-grad); color:#fff;
  border-radius:var(--m-radius-lg);
  padding:3rem 2.5rem;
  display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; align-items:center;
  box-shadow:var(--m-shadow-lg);
}
.m-cta::after{
  content:""; position:absolute; right:-80px; top:-80px;
  width:340px; height:340px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.m-cta h2{ color:#fff; margin:0; }
.m-cta p{ color:rgba(255,255,255,.85); margin:.5rem 0 0; font-size:1.05rem; }
.m-cta .actions{ display:flex; gap:.7rem; justify-content:flex-end; flex-wrap:wrap; position:relative; z-index:1; }
@media (max-width: 800px){ .m-cta{ grid-template-columns:1fr; padding:2rem 1.5rem; } .m-cta .actions{ justify-content:flex-start; } }

/* ----- Page hero (alt sayfalar) ----- */
.m-page-hero{
  background:var(--m-grad);
  color:#fff;
  padding:3.5rem 0 3rem;
  position:relative; overflow:hidden;
}
.m-page-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 40%);
}
.m-page-hero .inner{ position:relative; z-index:1; text-align:center; }
.m-page-hero h1{ color:#fff; margin:0; }
.m-page-hero p{ color:rgba(255,255,255,.85); margin:.7rem 0 0; }
.m-crumbs{
  display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap;
  font-size:.85rem; margin-top:.8rem; color:rgba(255,255,255,.8);
}
.m-crumbs a{ color:#fff; opacity:.85; }
.m-crumbs a:hover{ opacity:1; }
.m-crumbs i{ font-size:.7rem; opacity:.6; }

/* ----- Article (blog/page show) ----- */
.m-article{
  max-width:820px; margin:0 auto;
  font-size:1.05rem; line-height:1.85; color:var(--m-ink-2);
}
.m-article img{ border-radius:var(--m-radius); margin:1.5rem 0; box-shadow:var(--m-shadow); }
.m-article h2,
.m-article h3{ margin-top:2rem; color:var(--m-ink); }
.m-article ul,
.m-article ol{ padding-left:1.4rem; }
.m-article blockquote{
  border-left:4px solid var(--m-bright); padding:.6rem 1.2rem;
  background:var(--m-soft); color:var(--m-ink-2); border-radius:0 12px 12px 0;
  margin:1.5rem 0; font-style:italic;
}
.m-article-meta{
  display:flex; gap:1rem; font-size:.85rem; color:var(--m-muted);
  margin-bottom:1.5rem; padding-bottom:1.2rem; border-bottom:1px solid var(--m-line);
}

/* ----- Contact ----- */
.m-contact-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2.4rem;
}
.m-contact-info{ display:grid; gap:1rem; }
.m-info-card{
  display:flex; gap:1rem; padding:1.3rem; background:#fff;
  border:1px solid var(--m-line); border-radius:var(--m-radius);
  transition:transform var(--m-trans), border-color var(--m-trans);
}
.m-info-card:hover{ transform:translateY(-3px); border-color:var(--m-bright); }
.m-info-card .ic{
  flex:0 0 auto; width:50px; height:50px; border-radius:12px;
  background:var(--m-grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.m-info-card h4{ margin:0 0 .25rem; font-size:1rem; }
.m-info-card p,
.m-info-card a{ margin:0; color:var(--m-ink-2); font-size:.95rem; }

.m-form{
  background:#fff; border:1px solid var(--m-line); border-radius:var(--m-radius-lg);
  padding:2rem; box-shadow:var(--m-shadow);
}
.m-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.m-form .field{ margin-bottom:1rem; }
.m-form label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem; color:var(--m-ink-2); }
.m-form input,
.m-form textarea,
.m-form select{
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--m-line); border-radius:10px;
  font-family:inherit; font-size:.95rem; color:var(--m-ink);
  background:#fff; transition:border-color var(--m-trans), box-shadow var(--m-trans);
}
.m-form input:focus,
.m-form textarea:focus,
.m-form select:focus{
  outline:none; border-color:var(--m-blue);
  box-shadow:0 0 0 4px rgba(29,140,224,.15);
}
.m-form textarea{ resize:vertical; min-height:140px; }
.m-form .hp{ position:absolute; left:-9999px; }
.m-alert{
  padding:.9rem 1.2rem; border-radius:10px; margin-bottom:1.2rem; font-size:.92rem;
}
.m-alert-ok{ background:#e8f7ee; color:#1f7a3e; border:1px solid #b8e5c8; }
.m-alert-err{ background:#fdecec; color:#a52828; border:1px solid #f5c2c2; }

@media (max-width: 900px){
  .m-contact-grid{ grid-template-columns:1fr; }
  .m-form .row{ grid-template-columns:1fr; }
}

/* ----- Footer ----- */
.m-footer{
  background:var(--m-ink);
  color:#aab5cb;
  padding:4rem 0 1.5rem;
}
.m-footer a{ color:#cdd6e6; }
.m-footer a:hover{ color:#fff; }
.m-foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem;
  padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.m-foot-brand .b{
  font-size:1.6rem; font-weight:900;
  background:linear-gradient(135deg,#fff,#9fd3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-foot-brand small{ display:block; color:#7d8ba6; margin-top:.2rem; }
.m-foot-brand p{ margin:1rem 0 1.2rem; color:#aab5cb; font-size:.93rem; }
.m-foot-soc{ display:flex; gap:.5rem; }
.m-foot-soc a{
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.06); display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--m-trans), transform var(--m-trans);
}
.m-foot-soc a:hover{ background:var(--m-blue); color:#fff; transform:translateY(-3px); }

.m-foot-col h5{
  color:#fff; font-size:.95rem; font-weight:700; margin:0 0 1rem;
  text-transform:uppercase; letter-spacing:.08em;
}
.m-foot-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:.92rem; }
.m-foot-col li i{ color:var(--m-bright); margin-right:.4rem; }

.m-news input{
  width:100%; padding:.8rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:#fff; font-family:inherit; font-size:.92rem;
  margin-bottom:.7rem;
}
.m-news input::placeholder{ color:#7d8ba6; }
.m-news input:focus{ outline:none; border-color:var(--m-blue); }
.m-news small{ color:#7d8ba6; font-size:.8rem; }

.m-foot-bot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.5rem; font-size:.85rem; color:#7d8ba6; flex-wrap:wrap; gap:.5rem;
}
.m-foot-bot a{ color:#aab5cb; }

@media (max-width: 900px){
  .m-foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .m-foot-grid{ grid-template-columns:1fr; }
}

/* ----- Back to top ----- */
.m-totop{
  position:fixed; bottom:24px; right:24px;
  width:46px; height:46px; border-radius:12px;
  background:var(--m-grad); color:#fff;
  display:none; align-items:center; justify-content:center;
  cursor:pointer; z-index:60; border:0;
  box-shadow:0 10px 24px rgba(29,140,224,.35);
  transition:transform var(--m-trans);
}
.m-totop:hover{ transform:translateY(-3px); }
.m-totop.show{ display:inline-flex; }

/* ----- WhatsApp float ----- */
.m-wa{
  position:fixed; bottom:24px; left:24px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(37,211,102,.4);
  font-size:1.7rem;
  transition:transform var(--m-trans);
}
.m-wa:hover{ transform:translateY(-3px); color:#fff; }
.m-wa::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:#25D366; opacity:.4; animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.4; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* ----- Reveal animations ----- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s, transform .7s; }
.reveal.in{ opacity:1; transform:none; }

/* ----- 404 ----- */
.m-404{
  text-align:center; padding:5rem 1rem;
}
.m-404 .big{
  font-size:clamp(6rem, 14vw, 11rem);
  font-weight:900; line-height:1;
  background:var(--m-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.05em;
}

/* ----- Utility ----- */
.text-center{ text-align:center; }
.mt-3{ margin-top:1rem; } .mt-4{ margin-top:1.5rem; } .mb-4{ margin-bottom:1.5rem; }

/* ----- Service card image variant ----- */
.m-svc .m-svc-img{
  display:block; width:100%; aspect-ratio:16/10;
  border-radius:14px; overflow:hidden;
  margin-bottom:1rem; background:var(--m-soft);
  position:relative;
}
.m-svc .m-svc-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.m-svc.has-img:hover .m-svc-img img{ transform:scale(1.05); }
.m-svc .m-svc-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(10,61,143,.18));
  pointer-events:none;
}

/* ----- Process step icon ----- */
.m-step .m-step-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--m-soft); color:var(--m-deep);
  font-size:1.2rem; margin-top:1rem;
  transition:background var(--m-trans), color var(--m-trans);
}
.m-step:hover .m-step-ic{ background:var(--m-grad); color:#fff; }

/* ----- Projects ----- */
.m-projects{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.m-project{
  background:#fff; border:1px solid var(--m-line); border-radius:var(--m-radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--m-trans), box-shadow var(--m-trans), border-color var(--m-trans);
}
.m-project:hover{ transform:translateY(-6px); box-shadow:var(--m-shadow-lg); border-color:var(--m-bright); }
.m-project-media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--m-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--m-deep); font-size:3rem;
}
.m-project-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.m-project:hover .m-project-media img{ transform:scale(1.05); }
.m-project-status{
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
  background:#fff; box-shadow:0 4px 12px rgba(15,23,42,.12);
}
.m-project.is-live .m-project-status{ color:#15803d; }
.m-project.is-live .m-project-status i{ color:#22c55e; }
.m-project.is-progress .m-project-status{ color:#a16207; }
.m-project.is-progress .m-project-status i{ color:#f59e0b; }
.m-project-body{ padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.m-project-meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.m-project-meta .tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--m-blue);
  padding:.25rem .55rem; background:var(--m-soft); border-radius:6px;
}
.m-project-meta .year{ font-size:.78rem; color:var(--m-muted); display:inline-flex; align-items:center; gap:.3rem; }
.m-project h3{ margin:.2rem 0 0; font-size:1.12rem; line-height:1.3; }
.m-project p{ margin:0; color:var(--m-muted); font-size:.93rem; line-height:1.55; }
.m-project-stack{
  margin-top:auto; padding-top:.6rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; color:var(--m-deep); font-weight:600;
  border-top:1px dashed var(--m-line);
}
@media (max-width: 992px){ .m-projects{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .m-projects{ grid-template-columns:1fr; } }

/* ===== Hakkimizda page ===== */
.m-about-timeline{
  position:relative; max-width:880px; margin:0 auto;
  padding:1rem 0 1rem 1.2rem; border-left:2px solid var(--m-line, #e6ecf3);
}
.m-about-tl{ position:relative; padding:0 0 1.6rem 1.4rem; }
.m-about-tl:last-child{ padding-bottom:0; }
.m-about-tl::before{
  content:""; position:absolute; left:-1.45rem; top:.35rem;
  width:.9rem; height:.9rem; border-radius:50%;
  background:var(--m-blue, #1e6ff5);
  box-shadow:0 0 0 4px rgba(30,111,245,.15);
}
.m-about-tl-year{
  display:inline-block; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(90deg,var(--m-blue,#1e6ff5),var(--m-deep,#0b3a8a));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:1.05rem; margin-bottom:.2rem;
}
.m-about-tl-body h4{ margin:.1rem 0 .25rem; font-size:1.05rem; }
.m-about-tl-body p{ margin:0; color:var(--m-muted); font-size:.95rem; }

.m-about-faq{ max-width:880px; margin:0 auto; display:grid; gap:.7rem; }
.m-about-faq-item{
  background:#fff; border:1px solid var(--m-line, #e6ecf3);
  border-radius:var(--m-radius, 14px); padding:.2rem .2rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.m-about-faq-item[open]{ border-color:var(--m-blue,#1e6ff5); box-shadow:var(--m-shadow, 0 8px 24px rgba(15,42,86,.06)); }
.m-about-faq-item > summary{
  list-style:none; cursor:pointer; padding:1rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:600; color:var(--m-ink,#0d1b2a);
}
.m-about-faq-item > summary::-webkit-details-marker{ display:none; }
.m-about-faq-item > summary i{
  transition:transform .2s ease; color:var(--m-blue,#1e6ff5); font-size:1.1rem;
}
.m-about-faq-item[open] > summary i{ transform:rotate(45deg); }
.m-about-faq-body{ padding:0 1.1rem 1.1rem; color:var(--m-muted); line-height:1.6; }

/* ===== Contact branches ===== */
.m-branches-head{text-align:center;max-width:620px;margin:0 auto 36px;}
.m-branches-head h2{font-size:clamp(24px,3vw,32px);margin:0 0 8px;}
.m-branches-head p{color:var(--m-muted,#6b7280);margin:0;}
.m-branches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;}
.m-branch-card{background:var(--m-card,#fff);border:1px solid rgba(0,0,0,.07);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.m-branch-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.10);}
.m-branch-map{position:relative;width:100%;aspect-ratio:16/10;background:#eef1f4;}
.m-branch-map iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;}
.m-branch-body{padding:20px 22px;}
.m-branch-body h3{display:flex;align-items:center;gap:8px;font-size:18px;margin:0 0 10px;}
.m-branch-body h3 i{color:var(--m-primary,#2563eb);}
.m-branch-addr{color:var(--m-muted,#6b7280);margin:0 0 14px;line-height:1.6;font-size:14.5px;}
.m-branch-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.m-branch-links li{display:flex;align-items:center;gap:10px;font-size:14.5px;}
.m-branch-links li i{color:var(--m-primary,#2563eb);width:18px;text-align:center;}
.m-branch-links a{color:inherit;text-decoration:none;}
.m-branch-links a:hover{color:var(--m-primary,#2563eb);}

/* ===== Quote page ===== */
.tq-wrap{
  position:relative;
  padding:5rem 0 6rem;
  overflow:hidden;
}
.tq-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(95,184,232,.18), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(10,61,143,.12), transparent 60%),
    linear-gradient(180deg, #f5faff 0%, #ffffff 70%);
  z-index:0;
}
.tq-wrap > .container{ position:relative; z-index:1; }

.tq-grid{
  display:block;
  max-width:920px;
  margin:0 auto;
}
.tq-intro{ text-align:left; margin-bottom:2.4rem; }
.tq-intro .tq-lead{ max-width:60ch; }
.tq-perks{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.tq-intro h1{ margin:.9rem 0 1rem; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.tq-intro .tq-lead{ color:var(--m-muted); font-size:1.05rem; margin:0 0 1.6rem; max-width:42ch; }
.tq-perks{
  list-style:none; padding:0; margin:0 0 1.8rem;
  display:grid; gap:.6rem;
}
.tq-perks li{
  display:flex; align-items:center; gap:.7rem;
  font-weight:600; color:var(--m-ink-2); font-size:.95rem;
}
.tq-perks i{
  width:32px; height:32px; border-radius:10px;
  background:var(--m-soft); color:var(--m-blue);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem;
}
.tq-quick{ display:flex; flex-wrap:wrap; gap:.8rem; }
.tq-quick-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.7rem 1rem;
  background:#fff; border:1px solid var(--m-line);
  border-radius:14px;
  color:var(--m-ink); transition:all var(--m-trans);
  box-shadow:var(--m-shadow);
}
.tq-quick-btn:hover{ transform:translateY(-2px); border-color:var(--m-bright); color:var(--m-ink); }
.tq-quick-btn i{
  width:38px; height:38px; border-radius:11px;
  background:var(--m-grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.tq-quick-btn.wa i{ background:#25D366; }
.tq-quick-btn small{ display:block; font-size:.72rem; color:var(--m-muted); line-height:1; margin-bottom:.2rem; text-transform:uppercase; letter-spacing:.08em; }
.tq-quick-btn b{ display:block; font-size:.95rem; }

.tq-card{
  background:#fff;
  border:1px solid var(--m-line);
  border-radius:24px;
  padding:2rem;
  box-shadow:var(--m-shadow-lg);
  position:relative;
}
.tq-card::before{
  content:""; position:absolute; inset:0;
  border-radius:24px; padding:1.5px;
  background:linear-gradient(135deg, rgba(29,140,224,.35), transparent 40%, transparent 60%, rgba(95,184,232,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.tq-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.4rem;
}
.tq-card-head h2{ margin:0; font-size:1.35rem; }
.tq-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  background:#eaf7ee; color:#1f7a3e;
  padding:.4rem .7rem; border-radius:999px;
  border:1px solid #c7ebd2;
}

.tq-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.tq-alert{
  display:flex; align-items:center; gap:.55rem;
  padding:.85rem 1.1rem; border-radius:12px; font-size:.92rem;
  margin-bottom:1rem;
}
.tq-alert.ok{ background:#e8f7ee; color:#1f7a3e; border:1px solid #b8e5c8; }
.tq-alert.err{ background:#fdecec; color:#a52828; border:1px solid #f5c2c2; }

.tq-step{ padding:1.1rem 0; border-top:1px dashed var(--m-line); }
.tq-step:first-of-type{ border-top:0; padding-top:.2rem; }
.tq-step-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.tq-step-num{
  width:30px; height:30px; border-radius:50%;
  background:var(--m-grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem;
  box-shadow:0 6px 14px rgba(29,140,224,.32);
}
.tq-step-head h3{ margin:0; font-size:1.05rem; }
.tq-step-head em{ color:#dc3545; font-style:normal; }

.tq-field-label{
  font-size:.82rem; font-weight:700; color:var(--m-muted);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:.55rem;
}
.tq-field-label.mt{ margin-top:1rem; }

.tq-chips{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.6rem;
}
.tq-chip{
  position:relative;
  display:flex; align-items:center; gap:.6rem;
  min-height:54px;
  padding:.7rem .9rem;
  background:#fff;
  border:1.5px solid var(--m-line);
  border-radius:12px;
  cursor:pointer;
  font-size:.9rem; font-weight:600;
  color:var(--m-ink-2);
  transition:all var(--m-trans);
  user-select:none;
  line-height:1.25;
}
.tq-chip:hover{ border-color:var(--m-bright); transform:translateY(-1px); }
.tq-chip input{ position:absolute; opacity:0; pointer-events:none; }
.tq-chip > i:first-of-type{
  color:var(--m-blue);
  font-size:1.05rem;
  flex:0 0 auto;
}
.tq-chip .tq-check{
  margin-left:auto;
  opacity:0;
  color:#fff;
  background:var(--m-blue);
  width:20px; height:20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem;
  transition:opacity var(--m-trans);
}
.tq-chip.is-on,
.tq-chip:has(input:checked){
  background:linear-gradient(135deg, rgba(29,140,224,.08), rgba(95,184,232,.08));
  border-color:var(--m-blue);
  color:var(--m-ink);
  box-shadow:0 6px 16px rgba(29,140,224,.18);
}
.tq-chip:has(input:checked) .tq-check,
.tq-chip.is-on .tq-check{ opacity:1; }

.tq-seg{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.35rem;
  background:var(--m-soft);
  border:1px solid var(--m-soft-2);
  border-radius:14px;
}
.tq-seg label{
  flex:1 1 auto;
  position:relative;
  text-align:center;
  padding:.6rem .9rem;
  border-radius:10px;
  cursor:pointer;
  font-size:.85rem; font-weight:600;
  color:var(--m-ink-2);
  transition:all var(--m-trans);
  min-width:100px;
}
.tq-seg label:hover{ background:rgba(255,255,255,.6); }
.tq-seg input{ position:absolute; opacity:0; pointer-events:none; }
.tq-seg label.is-on,
.tq-seg label:has(input:checked){
  background:#fff;
  color:var(--m-deep);
  box-shadow:0 4px 12px rgba(10,61,143,.12);
}

.tq-row{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-bottom:1rem;
}
.tq-input{ margin-bottom:1rem; }
.tq-input > label{
  display:block;
  font-size:.82rem; font-weight:700;
  color:var(--m-ink-2);
  margin-bottom:.4rem;
  letter-spacing:.01em;
}
.tq-input > label em{ color:#dc3545; font-style:normal; margin-left:.15rem; }
.tq-ctrl{ position:relative; }
.tq-ctrl > i{
  position:absolute; left:.95rem; top:50%;
  transform:translateY(-50%);
  color:var(--m-muted); font-size:1rem;
  pointer-events:none;
  transition:color var(--m-trans);
}
.tq-ctrl.area > i{ top:1rem; transform:none; }
.tq-ctrl input,
.tq-ctrl textarea{
  width:100%;
  padding:.85rem 1rem .85rem 2.55rem;
  border:1.5px solid var(--m-line);
  border-radius:12px;
  background:#fff;
  font-family:inherit; font-size:.95rem;
  color:var(--m-ink);
  transition:border-color var(--m-trans), box-shadow var(--m-trans);
}
.tq-ctrl textarea{ resize:vertical; min-height:130px; padding-top:.85rem; }
.tq-ctrl input::placeholder,
.tq-ctrl textarea::placeholder{ color:#b3bccc; }
.tq-ctrl input:focus,
.tq-ctrl textarea:focus{
  outline:none;
  border-color:var(--m-blue);
  box-shadow:0 0 0 4px rgba(29,140,224,.15);
}
.tq-ctrl input:focus ~ i,
.tq-ctrl textarea:focus ~ i,
.tq-ctrl:focus-within > i{ color:var(--m-blue); }

.tq-submit{
  margin-top:1.4rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.tq-go{
  width:100%; justify-content:center;
  padding:1.05rem 1.4rem;
  font-size:1rem;
}
.tq-submit small{ color:var(--m-muted); font-size:.78rem; }
.tq-submit small i{ color:#1f7a3e; }

@media (max-width: 980px){
  .tq-wrap{ padding:3rem 0 4rem; }
  .tq-card{ padding:1.5rem; }
  .tq-row{ grid-template-columns:1fr; }
  .tq-seg label{ min-width:0; }
}
@media (max-width: 520px){
  .tq-chips{ grid-template-columns:1fr 1fr; }
  .tq-card{ padding:1.2rem; border-radius:18px; }
  .tq-card-head h2{ font-size:1.15rem; }
}

/* ===== Project detail ===== */
:root{
  --mp-ink:#0f172a; --mp-ink-2:#334155; --mp-muted:#64748b;
  --mp-bg:#f8fafc; --mp-card:#fff; --mp-border:#e5e7eb;
  --mp-accent:#2563eb; --mp-accent-2:#1d4ed8;
  --mp-live:#16a34a; --mp-wip:#d97706;
  --mp-shadow:0 10px 30px -10px rgba(15,23,42,.18);
}

.mp-hero{position:relative;color:#fff;padding:5rem 0 7rem;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0b1220 100%);}
.mp-hero__bg{position:absolute;inset:0;background-image:var(--mp-cover,none);background-size:cover;background-position:center;opacity:.22;filter:blur(2px) saturate(1.1);z-index:-1;}
.mp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.35) 0%,rgba(15,23,42,.85) 100%);z-index:-1;}
.mp-hero,.mp-hero *{color:#fff;}
.mp-hero__inner{position:relative;}
.mp-crumbs{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:rgba(255,255,255,.7)!important;margin-bottom:1.25rem;flex-wrap:wrap;}
.mp-crumbs a{color:rgba(255,255,255,.85)!important;text-decoration:none;}
.mp-crumbs a:hover{color:#fff!important;text-decoration:underline;}
.mp-crumbs span{color:#fff!important;}
.mp-crumbs i{font-size:.7rem;opacity:.6;color:rgba(255,255,255,.6)!important;}
.mp-hero__badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.mp-hero__title{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:.25rem 0 1rem;max-width:900px;color:#fff!important;}
.mp-hero__lead{font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6;color:rgba(255,255,255,.85)!important;max-width:780px;margin:0 0 1.75rem;}
.mp-hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;}
.mp-cta{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:999px;background:#fff;color:var(--mp-ink)!important;font-weight:600;text-decoration:none;box-shadow:0 8px 22px -10px rgba(0,0,0,.4);transition:transform .2s ease,box-shadow .2s ease,color .2s ease;}
.mp-cta *{color:inherit!important;}
.mp-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.55);color:var(--mp-accent)!important;}

.mp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);font-size:.78rem;font-weight:600;letter-spacing:.01em;color:#fff;border:1px solid rgba(255,255,255,.18);}
.mp-pill i{font-size:.85rem;}
.mp-pill--live{background:rgba(22,163,74,.18);border-color:rgba(22,163,74,.4);color:#bbf7d0;}
.mp-pill--wip{background:rgba(217,119,6,.18);border-color:rgba(217,119,6,.4);color:#fde68a;}
.mp-side .mp-pill{background:#ecfdf5;color:var(--mp-live);border-color:#bbf7d0;}
.mp-side .mp-pill--wip{background:#fffbeb;color:var(--mp-wip);border-color:#fde68a;}

.mp-section{padding:0 0 5rem;background:var(--mp-bg);}
.mp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.5rem;align-items:start;}
.mp-main{min-width:0;}

.mp-cover{position:relative;display:block;border-radius:22px;overflow:hidden;margin:-5rem 0 2rem;box-shadow:var(--mp-shadow);background:#0f172a;}
.mp-cover img{display:block;width:100%;height:auto;}
.mp-cover__zoom{position:absolute;top:1rem;right:1rem;width:42px;height:42px;border-radius:50%;background:rgba(15,23,42,.7);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease,transform .25s ease;}
.mp-cover:hover .mp-cover__zoom{opacity:1;transform:scale(1.05);}

.mp-rich{font-size:1.04rem;line-height:1.75;color:var(--mp-ink-2);background:#fff;padding:2rem;border-radius:18px;border:1px solid var(--mp-border);box-shadow:var(--mp-shadow);}
.mp-rich h2,.mp-rich h3{color:var(--mp-ink);margin-top:2rem;letter-spacing:-.01em;}
.mp-rich h2:first-child,.mp-rich h3:first-child,.mp-rich p:first-child{margin-top:0;}
.mp-rich p{margin:0 0 1.1rem;}
.mp-rich a{color:var(--mp-accent);text-decoration:underline;text-underline-offset:3px;}
.mp-rich img{max-width:100%;height:auto;border-radius:14px;margin:1rem 0;}
.mp-rich ul,.mp-rich ol{padding-left:1.25rem;}
.mp-rich li{margin:.35rem 0;}
.mp-rich blockquote{border-left:4px solid var(--mp-accent);background:#eff6ff;padding:1rem 1.25rem;border-radius:0 12px 12px 0;color:var(--mp-ink);margin:1.25rem 0;}

.mp-gallery-head{display:flex;align-items:baseline;justify-content:space-between;margin:2.5rem 0 1rem;}
.mp-gallery-head h3{font-size:1.4rem;font-weight:700;color:var(--mp-ink);margin:0;letter-spacing:-.01em;}
.mp-muted{color:var(--mp-muted);font-size:.88rem;}
.mp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;}
.mp-gallery__item{position:relative;display:block;border-radius:14px;overflow:hidden;background:#0f172a;aspect-ratio:4/3;box-shadow:0 4px 14px -6px rgba(15,23,42,.18);transition:transform .35s ease,box-shadow .35s ease;}
.mp-gallery__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .35s ease;}
.mp-gallery__item:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(15,23,42,.32);}
.mp-gallery__item:hover img{transform:scale(1.06);filter:brightness(.92);}
.mp-gallery__zoom{position:absolute;inset:auto auto 12px 12px;width:36px;height:36px;border-radius:50%;background:rgba(15,23,42,.78);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(6px);}
.mp-gallery__item:hover .mp-gallery__zoom{opacity:1;transform:translateY(0);}

.mp-side{position:sticky;top:96px;margin-top:-5rem;}
.mp-card{background:var(--mp-card);border:1px solid var(--mp-border);border-radius:18px;padding:1.5rem;box-shadow:var(--mp-shadow);}
.mp-card__title{margin:0 0 1.25rem;font-size:1.05rem;font-weight:700;color:var(--mp-ink);padding-bottom:.85rem;border-bottom:1px solid var(--mp-border);letter-spacing:-.01em;}
.mp-meta{margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.95rem;}
.mp-meta>div{display:flex;flex-direction:column;gap:.3rem;}
.mp-meta dt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mp-muted);margin:0;}
.mp-meta dd{margin:0;font-size:.94rem;color:var(--mp-ink);font-weight:500;}
.mp-chips{display:flex;flex-wrap:wrap;gap:.35rem;}
.mp-chip{display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:6px;background:#f1f5f9;color:var(--mp-ink-2);font-size:.78rem;font-weight:500;border:1px solid var(--mp-border);}
.mp-link{color:var(--mp-accent);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:.3rem;}
.mp-link:hover{color:var(--mp-accent-2);text-decoration:underline;}
.mp-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1rem;border-radius:12px;font-weight:600;font-size:.94rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;}
.mp-btn--primary{background:var(--mp-accent);color:#fff;box-shadow:0 6px 18px -8px rgba(37,99,235,.5);}
.mp-btn--primary:hover{background:var(--mp-accent-2);transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(29,78,216,.6);color:#fff;}
.mp-btn--ghost{margin-top:.6rem;background:#f8fafc;color:var(--mp-ink);border:1px solid var(--mp-border);}
.mp-btn--ghost:hover{background:#fff;border-color:var(--mp-accent);color:var(--mp-accent);}

@media (max-width:900px){
  .mp-grid{grid-template-columns:1fr;gap:1.5rem;}
  .mp-side{position:static;margin-top:0;}
  .mp-cover{margin-top:-4rem;border-radius:16px;}
  .mp-hero{padding:3.5rem 0 6rem;}
  .mp-rich{padding:1.5rem;}
  .mp-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .mp-gallery__item{aspect-ratio:1/1;}
}
@media (max-width:560px){
  .mp-hero__badges{gap:.35rem;}
  .mp-pill{padding:.28rem .6rem;font-size:.72rem;}
  .mp-cta{padding:.75rem 1.1rem;font-size:.92rem;}
  .mp-rich{padding:1.25rem;border-radius:14px;}
}

/* ===== Footer ===== */
html{ background:#060a18; }
body{ overflow-x:hidden; }

.m-footer{
  position:relative;
  color:#aab5cb;
  padding:0 !important;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(29,140,224,.15), transparent 60%),
    radial-gradient(700px 500px at -10% 100%, rgba(95,184,232,.10), transparent 60%),
    linear-gradient(180deg, #0a1226 0%, #060a18 100%);
  overflow:hidden;
}
.m-footer::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  pointer-events:none;
  opacity:.6;
}
.m-footer .container{ position:relative; z-index:1; }
.m-footer a{ color:#cdd6e6; transition:color var(--m-trans); }
.m-footer a:hover{ color:#fff; }

.m-foot-cta-wrap{ padding:2rem 0 .5rem; }
.m-foot-cta{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding:1.6rem 2rem;
  border-radius:20px;
  background:
    linear-gradient(135deg, rgba(29,140,224,.20), rgba(10,61,143,.30) 60%, rgba(95,184,232,.15)),
    rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.m-foot-cta::before{
  content:""; position:absolute; right:-60px; top:-80px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(95,184,232,.25), transparent 70%);
  pointer-events:none;
}
.m-foot-cta-text{ flex:1 1 360px; min-width:0; }
.m-foot-cta-text .badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(95,184,232,.15);
  border:1px solid rgba(95,184,232,.3);
  color:#9fd3ff;
  padding:.35rem .75rem; border-radius:999px;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  margin-bottom:.8rem;
}
.m-foot-cta-text h3{
  color:#fff; margin:0 0 .35rem;
  font-size:clamp(1.3rem, 2vw, 1.7rem);
}
.m-foot-cta-text .grad{
  background:linear-gradient(135deg,#9fd3ff,#5fb8e8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-foot-cta-text p{ margin:0; color:#aab5cb; font-size:.95rem; }
.m-foot-cta-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.m-foot-wa{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem;
  background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.35);
  border-radius:999px;
  color:#fff !important;
  transition:all var(--m-trans);
}
.m-foot-wa:hover{
  background:#25D366; border-color:#25D366;
  transform:translateY(-2px);
}
.m-foot-wa i{
  width:34px; height:34px; border-radius:50%;
  background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.m-foot-wa span{ display:flex; flex-direction:column; line-height:1.1; }
.m-foot-wa small{ font-size:.7rem; color:#b9d9c6; letter-spacing:.04em; text-transform:uppercase; }
.m-foot-wa b{ font-size:.92rem; }

.m-foot-main{ padding:2.2rem 0 2rem; }
.m-foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:2.5rem;
}

.m-foot-logo{
  display:inline-flex; align-items:center; gap:.7rem;
  text-decoration:none; margin-bottom:.4rem;
}
.m-foot-logo img{
  max-height:56px;
  width:auto;
  object-fit:contain;
}
.m-foot-logo .mark{
  width:42px; height:42px; border-radius:12px;
  background:var(--m-grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.2rem;
  box-shadow:0 10px 24px rgba(29,140,224,.45);
}
.m-foot-logo .name{
  font-size:1.5rem; font-weight:900; color:#fff; letter-spacing:-.01em;
}
.m-foot-logo .accent{
  background:linear-gradient(135deg,#fff,#9fd3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-foot-logo .tld{ color:#5fb8e8; }
.m-foot-brand .slogan{
  display:block; color:#7d8ba6; font-size:.85rem;
  margin:.2rem 0 1rem;
}
.m-foot-brand .desc{
  margin:0 0 1.1rem; color:#aab5cb; font-size:.92rem; line-height:1.65;
}
.m-foot-trust{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-bottom:1rem;
}
.m-foot-trust span{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600;
  color:#cdd6e6;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:.35rem .7rem; border-radius:999px;
}
.m-foot-trust i{ color:#5fb8e8; }

.m-foot-soc{ display:flex; gap:.5rem; }
.m-foot-soc a{
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:#cdd6e6;
  transition:all var(--m-trans);
  position:relative; overflow:hidden;
}
.m-foot-soc a::before{
  content:""; position:absolute; inset:0;
  background:var(--m-grad);
  opacity:0; transition:opacity var(--m-trans);
}
.m-foot-soc a i{ position:relative; z-index:1; }
.m-foot-soc a:hover{ color:#fff; transform:translateY(-3px); border-color:transparent; }
.m-foot-soc a:hover::before{ opacity:1; }

.m-foot-col h5{
  color:#fff; font-size:.85rem; font-weight:800;
  margin:0 0 1.2rem;
  text-transform:uppercase; letter-spacing:.14em;
  position:relative; padding-bottom:.8rem;
}
.m-foot-col h5::after{
  content:""; position:absolute; left:0; bottom:0;
  width:32px; height:2px; border-radius:2px;
  background:var(--m-grad);
}
.m-foot-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.m-foot-col ul a{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.92rem; color:#aab5cb;
  transition:all var(--m-trans);
}
.m-foot-col ul a i{
  color:#5fb8e8; font-size:1rem;
  transition:transform var(--m-trans);
}
.m-foot-col ul a:hover{ color:#fff; }
.m-foot-col ul a:hover i{ transform:translateX(3px); }

.m-foot-contact ul{ gap:1rem; }
.m-foot-contact ul li{
  display:flex; gap:.8rem; align-items:flex-start;
  font-size:.92rem;
}
.m-foot-contact ul li > i{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:10px;
  background:rgba(95,184,232,.12);
  color:#5fb8e8;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem;
}
.m-foot-contact ul li div{ display:flex; flex-direction:column; min-width:0; }
.m-foot-contact ul li small{
  font-size:.7rem; color:#7d8ba6;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:.15rem;
}
.m-foot-contact ul li span,
.m-foot-contact ul li a{
  color:#cdd6e6; font-size:.92rem; line-height:1.4;
  word-break:break-word;
}
.m-foot-contact ul li a:hover{ color:#fff; }

.m-foot-bot{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
}
.m-foot-bot-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0; flex-wrap:wrap; gap:.8rem;
  font-size:.85rem; color:#7d8ba6;
}
.m-foot-bot-inner strong{ color:#cdd6e6; font-weight:700; }
.m-foot-legal{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.m-foot-legal a{ color:#aab5cb; }
.m-foot-legal a:hover{ color:#fff; }
.m-foot-legal span{ color:#3b455a; }
.m-foot-bot-inner .made i{ color:#ff5577; margin:0 .15rem; }

@media (max-width: 1000px){
  .m-foot-grid{ grid-template-columns:1fr 1fr; gap:2.2rem; }
  .m-foot-brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .m-foot-cta{ padding:1.6rem; border-radius:18px; }
  .m-foot-main{ padding:2rem 0; }
  .m-foot-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .m-foot-bot-inner{ justify-content:center; text-align:center; }
  .m-foot-legal{ justify-content:center; }
}