/* CobexTech — shared stylesheet (mobile-first) */

:root{
  --bg:#ffffff;
  --bg-alt:#f4f3f0;
  --text:#111111;
  --text-muted:#6b6b6b;
  --border:#e5e3de;
  --accent:#cf4520;
  --card-ph-1:#e9e7e1;
  --card-ph-2:#dedad0;
  --font-display:'Montserrat', serif;
  --font-body:'Lora', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
html[data-theme="dark"]{
  /* --bg:#0b0b0c;  */
  --bg:#0b0b0c; 
  --bg-alt:#161617;
  --text:#f2f1ee;
  --text-muted:#9a9a95;
  --border:#2a2a2b;
  --card-ph-1:#1e1e1f;
  --card-ph-2:#242425;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  transition:background .25s ease, color .25s ease;
  line-height:1.55; font-size:15px;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px;}
::selection{background:var(--accent); color:#fff;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
ul{list-style:none;}

/* ---------- HEADER / NAV ---------- */
header{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border);}
.header-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:10px;}
.logo{font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.01em; flex-shrink:0;}
.logo span{color:var(--accent);}

.header-right{display:flex; align-items:center; gap:8px; flex-shrink:0;}

.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; background:none; border:1px solid var(--border);
  border-radius:6px; color:var(--text); cursor:pointer; flex-shrink:0;
}
.menu-toggle svg{width:18px; height:18px;}

nav.main-nav{
  display:none; flex-basis:100%; order:5;
  flex-direction:column;
  border-top:1px solid var(--border);
  padding:12px 0 14px; margin-top:6px;
}
nav.main-nav.open{display:flex;}
nav.main-nav ul{
  display:flex; flex-direction:column; width:100%;
  margin:0; padding:0; list-style:none;
}
nav.main-nav li{display:flex; flex-direction:column;}
nav.main-nav a{
  font-size:14.5px; color:var(--text-muted);
  padding:14px 6px; line-height:1.4;
  border-bottom:1px solid var(--border);
}
nav.main-nav li:last-child a{border-bottom:none;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--text);}
nav.main-nav a.active{color:var(--accent);}

.controls{display:flex; align-items:center; gap:8px;}
.ctrl-btn{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
  border:1px solid var(--border); background:transparent; color:var(--text);
  padding:6px 10px; border-radius:100px; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  transition:border-color .15s ease;
}
.ctrl-btn:hover{border-color:var(--text-muted);}
#theme-toggle{justify-content:center; padding:6px 12px;}
#theme-toggle #theme-icon{font-size:16px; line-height:1; font-family:var(--font-body);}
.lang-toggle{display:flex; border:1px solid var(--border); border-radius:100px; overflow:hidden;}
.lang-toggle button{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  background:transparent; border:none; color:var(--text-muted);
  padding:6px 10px; cursor:pointer; transition:.15s ease;
}
.lang-toggle button.active{background:var(--text); color:var(--bg);}

/* ---------- HERO ---------- */
.hero{padding:48px 0 36px; border-bottom:1px solid var(--border);}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--accent); margin-bottom:16px; display:block;}
.hero h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(28px, 8vw, 64px); line-height:1.08; letter-spacing:-0.01em;
  max-width:820px; margin-bottom:18px;
}
.hero p{font-size:15px; color:var(--text-muted); max-width:560px; margin-bottom:26px;}
.cta-row{display:flex; flex-direction:column; gap:10px;}
.btn{
  font-size:13.5px; font-weight:500; padding:12px 20px; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, opacity .15s ease; width:100%;
}
.btn-primary{background:var(--text); color:var(--bg);}
.btn-secondary{border:1px solid var(--border); color:var(--text);}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{padding:40px 0 32px; border-bottom:1px solid var(--border);}
.page-hero h1{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,7vw,48px); letter-spacing:-0.01em; margin-bottom:12px;}
.page-hero p{color:var(--text-muted); font-size:14.5px; max-width:520px;}

/* ---------- SECTIONS ---------- */
section{padding:44px 0; border-bottom:1px solid var(--border);}
.section-head{display:flex; flex-direction:column; margin-bottom:30px; gap:8px;}
.section-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--text-muted); display:block;}
.section-head h2{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,6vw,38px); letter-spacing:-0.01em;}
.section-head .desc{color:var(--text-muted); font-size:14px; max-width:340px;}
.section-foot{margin-top:30px;}

/* ---------- SERVICES ---------- */
.services-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border);}
.service-card{background:var(--bg); padding:22px 18px;}
.service-num{font-family:var(--font-mono); font-size:11px; color:var(--accent); display:block; margin-bottom:14px;}
.service-card h3{font-family:var(--font-display); font-weight:500; font-size:18px; margin-bottom:8px;}
.service-card p{color:var(--text-muted); font-size:13.5px;}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid; grid-template-columns:1fr; gap:20px;}
.price-card{border:1px solid var(--border); padding:26px 20px; border-radius:2px; display:flex; flex-direction:column; position:relative; background:var(--bg);}
.price-card.featured{border-color:var(--accent);}
.price-badge{position:absolute; top:-1px; right:14px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; background:var(--accent); color:#fff; padding:5px 10px;}
.price-card h3{font-family:var(--font-display); font-weight:500; font-size:20px; margin-bottom:10px;}
.price-value{font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); margin-bottom:18px; line-height:1.4;}
.price-value strong{font-size:21px; color:var(--text); font-weight:600;}
.price-from{font-size:11px; color:var(--text-muted);}
.price-feats{display:flex; flex-direction:column; gap:8px; margin-bottom:24px;}
.price-feats li{font-size:13.5px; color:var(--text); padding-left:18px; position:relative;}
.price-feats li::before{content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:100px; background:var(--accent);}
.price-cta{margin-top:auto;}
.pricing-note{margin-top:26px; font-size:12.5px; color:var(--text-muted); border-left:2px solid var(--accent); padding-left:14px; max-width:720px;}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px;}
.faq-item{border:1px solid var(--border); border-radius:2px; background:var(--bg);}
.faq-item summary{cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:14.5px; padding:16px 18px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-family:var(--font-mono); color:var(--accent); font-size:16px;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{padding:0 18px 16px; color:var(--text-muted); font-size:13.5px;}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1fr; gap:26px;}
.about-grid h2{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,6vw,36px); letter-spacing:-0.01em; line-height:1.15;}
.about-grid .body p{color:var(--text-muted); font-size:14.5px; margin-bottom:14px;}
.about-grid .body p:last-child{margin-bottom:0;}
.stat-row{display:flex; gap:24px; margin-top:24px; flex-wrap:wrap;}
.stat b{font-family:var(--font-display); font-size:24px; display:block; font-weight:500;}
.stat span{font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.04em;}

.process-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:8px;}
.process-card{background:var(--bg); padding:22px 18px;}
.process-card .service-num{margin-bottom:10px;}
.process-card h3{font-family:var(--font-display); font-weight:500; font-size:16.5px; margin-bottom:6px;}
.process-card p{color:var(--text-muted); font-size:13px;}

/* ---------- FOUNDER ---------- */
.founder-card{display:flex; flex-direction:column; gap:20px; align-items:flex-start;}
.founder-avatar{
  width:160px; height:160px; border-radius:50%; flex-shrink:0;
  background:var(--bg-alt); border:1px solid var(--border);
  overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.founder-avatar img{
  width:100%; height:100%; object-fit:cover; object-position:center 25%;
}
.founder-avatar svg{width:40px; height:40px;}
.founder-name{font-family:var(--font-display); font-weight:500; font-size:19px; margin-bottom:2px;}
.founder-role{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--accent); display:block; margin-bottom:12px;}
.founder-bio{color:var(--text-muted); font-size:14px;}

@media(min-width:640px){
  .founder-card{flex-direction:row; align-items:flex-start; gap:24px;}
}

/* ---------- PORTFOLIO ---------- */
.portfolio-grid{display:grid; grid-template-columns:1fr; gap:20px;}
.pf-card{border:1px solid var(--border); padding:18px; border-radius:2px; cursor:pointer; transition:border-color .15s ease;}
.pf-card:hover{border-color:var(--text-muted);}
.pf-link{display:block; color:inherit; text-decoration:none;}
.pf-thumb{
  aspect-ratio:4/3; border-radius:2px; margin-bottom:12px;
  background:linear-gradient(135deg, var(--card-ph-1), var(--card-ph-2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:14px; color:var(--text-muted);
}
.pf-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--accent); text-transform:uppercase; margin-bottom:6px; display:block;}
.pf-card h4{font-family:var(--font-display); font-weight:500; font-size:16px; margin-bottom:5px;}
.pf-card p{color:var(--text-muted); font-size:13px;}

/* ---------- BLOG ---------- */
.blog-list{display:flex; flex-direction:column;}
.blog-item-wrap{display:flex; flex-direction:column;}
.blog-item{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--border); gap:14px;}
.blog-item-wrap:last-child .blog-item{border-bottom:1px solid var(--border);}
.blog-item .left{display:flex; gap:14px; align-items:center; min-width:0;}
.blog-thumb{width:48px; height:48px; border-radius:2px; flex-shrink:0; background:linear-gradient(135deg, var(--card-ph-1), var(--card-ph-2)); border:1px solid var(--border);}
.blog-item h4{font-family:var(--font-display); font-weight:500; font-size:14.5px; margin-bottom:4px; line-height:1.3;}
.blog-meta{font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.03em;}
.blog-arrow{font-size:16px; color:var(--text-muted); flex-shrink:0;}
.blog-item:hover h4{color:var(--accent);}

/* ---------- PAGINATION ---------- */
.pagination{display:flex; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.pagination ul{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.pagination li{display:flex;}
.pagination a{display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--border); border-radius:100px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); transition:border-color .15s ease, color .15s ease;}
.pagination a:hover{border-color:var(--text-muted); color:var(--text);}
.pagination a.active{background:var(--text); color:var(--bg); border-color:var(--text);}
.pagination a.disabled{opacity:.4; pointer-events:none;}

/* ---------- BLOG DETAIL ---------- */
.blog-back{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--text-muted); display:inline-block; margin-bottom:20px;}
.blog-back:hover{color:var(--accent);}
.blog-detail-grid{display:grid; grid-template-columns:1fr; gap:40px;}
.blog-article{order:1;}
.blog-side{order:2;}
.blog-article h1{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,6vw,40px); line-height:1.15; letter-spacing:-0.01em; margin-bottom:14px;}
.blog-article .blog-meta{font-family:var(--font-mono); font-size:11px; color:var(--text-muted); letter-spacing:.04em; margin-bottom:24px; display:flex; gap:10px; flex-wrap:wrap;}
.blog-article .lead{font-size:16.5px; line-height:1.6; color:var(--text); margin-bottom:18px;}
.blog-article p{font-size:15px; line-height:1.75; color:var(--text-muted); margin-bottom:18px;}
.blog-article h2{font-family:var(--font-display); font-weight:500; font-size:22px; margin:30px 0 12px; letter-spacing:-0.01em;}
.blog-article blockquote{border-left:2px solid var(--accent); padding:6px 18px; margin:22px 0; color:var(--text); font-style:italic; font-size:15.5px; line-height:1.7;}
.author-box{display:flex; gap:14px; align-items:flex-start; border:1px solid var(--border); padding:18px; border-radius:2px; margin-top:30px;}
.author-avatar{width:52px; height:52px; border-radius:100px; background:linear-gradient(135deg,var(--card-ph-1),var(--card-ph-2)); border:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:16px; color:var(--text-muted);}
.author-box h6{font-family:var(--font-display); font-weight:500; font-size:15px; margin-bottom:4px;}
.author-box p{font-size:13px; color:var(--text-muted); margin:0;}
.blog-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px;}
.blog-tags a{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; border:1px solid var(--border); padding:6px 12px; border-radius:100px; color:var(--text-muted); transition:color .15s ease, border-color .15s ease;}
.blog-tags a:hover{color:var(--text); border-color:var(--text-muted);}

.side-block{border:1px solid var(--border); padding:20px; border-radius:2px; margin-bottom:20px;}
.side-block h5{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; color:var(--text-muted); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.side-block ul{display:flex; flex-direction:column; gap:10px;}
.side-block li{font-size:13.5px;}
.side-block li a{display:flex; justify-content:space-between; align-items:center;}
.side-block li a:hover{color:var(--accent);}
.side-block .count{font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);}
.side-post{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border);}
.side-post:last-child{border-bottom:none;}
.side-thumb{width:44px; height:44px; border-radius:2px; background:linear-gradient(135deg,var(--card-ph-1),var(--card-ph-2)); border:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:9px; color:var(--text-muted);}
.side-post h6{font-family:var(--font-display); font-weight:500; font-size:13px; line-height:1.35;}
.side-post span{font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); letter-spacing:.03em;}
.side-post:hover h6{color:var(--accent);}

/* ---------- SHOP ---------- */
.shop-grid{display:grid; grid-template-columns:1fr; gap:20px;}
.shop-card{border:1px solid var(--border); padding:18px; border-radius:2px; cursor:pointer; transition:border-color .15s ease;}
.shop-card:hover{border-color:var(--text-muted);}
.shop-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--accent); text-transform:uppercase; margin-bottom:6px; display:block;}
.shop-thumb{
  aspect-ratio:16/10; margin-bottom:14px; border-radius:2px;
  background:linear-gradient(135deg, var(--card-ph-1), var(--card-ph-2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted); text-align:center; padding:0 10px;
}
.shop-card h4{font-family:var(--font-display); font-weight:500; font-size:15.5px; margin-bottom:5px;}
.shop-card p{color:var(--text-muted); font-size:12.5px; margin-bottom:14px;}
.shop-foot{display:flex; justify-content:space-between; align-items:center;}
.price{font-family:var(--font-mono); font-size:13px; font-weight:500;}
.buy-btn{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; border:1px solid var(--text); padding:6px 12px; border-radius:100px; cursor:pointer; background:none; color:var(--text);}
.buy-btn:hover{background:var(--text); color:var(--bg);}

/* ---------- PRODUCT MODAL ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal.open{display:flex;}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55);}
.modal-panel{position:relative; width:100%; max-width:480px; max-height:90vh; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:26px; animation:modalIn .18s ease; scrollbar-width:none;}
.modal-panel::-webkit-scrollbar{display:none;}
@keyframes modalIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.modal-close{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:100px; border:1px solid var(--border); background:none; color:var(--text); cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;}
.modal-close:hover{border-color:var(--text-muted);}
.modal-thumb{aspect-ratio:16/9; margin-bottom:16px; border-radius:2px; background:linear-gradient(135deg, var(--card-ph-1), var(--card-ph-2)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--text-muted); text-align:center; padding:0 16px;}
.modal-panel h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:8px 0 8px; letter-spacing:-0.01em;}
.modal-panel > p{color:var(--text-muted); font-size:14px; margin-bottom:20px;}
.modal-feats-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; color:var(--text-muted); margin-bottom:10px;}
.modal-feats{display:flex; flex-direction:column; gap:8px; margin-bottom:24px;}
.modal-feats li{font-size:13.5px; color:var(--text); padding-left:18px; position:relative;}
.modal-feats li::before{content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:100px; background:var(--accent);}
.modal-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:18px;}
.modal-foot .btn{width:auto; flex:1; min-width:170px;}
body.modal-open{overflow:hidden;}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  z-index:200; display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px); padding:12px 16px; border-radius:6px;
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-size:13.5px; box-shadow:0 12px 30px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.toast:not([hidden]){opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.toast[hidden]{display:none;}
.toast-icon{flex-shrink:0; width:22px; height:22px; border-radius:100px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;}
.toast.success{border-color:var(--accent);}
.toast.success .toast-icon{background:var(--accent); color:var(--bg);}
.toast.error{border-color:#e5484d;}
.toast.error .toast-icon{background:#e5484d; color:#fff;}

/* ---------- CONTACT ---------- */
.contact-inner{display:flex; flex-direction:column; gap:22px;}
.contact-inner h2{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,7vw,42px); max-width:520px; letter-spacing:-0.01em;}
.contact-email{font-family:var(--font-mono); font-size:14px; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; display:inline-block;}
.contact-grid{display:grid; grid-template-columns:1fr; gap:32px; margin-top:8px;}
.contact-info-row{display:flex; flex-direction:column; gap:16px; font-size:14px; font-style:normal;}
.contact-info-row .label{font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); letter-spacing:.05em; margin-bottom:4px; display:block;}
.form-field{margin-bottom:16px;}
.form-field label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--text-muted); margin-bottom:6px; display:block;}
.form-field input, .form-field textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
  padding:11px 12px; font-family:var(--font-body); font-size:14px; border-radius:2px;
}
.form-field textarea{resize:vertical; min-height:100px;}
.form-submit{width:100%;}

/* ---------- FOOTER ---------- */
footer{padding:40px 0 26px; background:var(--bg-alt);}
.footer-grid{display:grid; grid-template-columns:1fr; gap:26px; padding-bottom:28px;}
.footer-col h5{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; color:var(--text-muted); margin-bottom:12px;}
.footer-col a, .footer-col p{display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col a:hover{color:var(--text);}
.footer-brand{font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:8px;}
.footer-brand span{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border); padding-top:18px; display:flex; flex-direction:column; gap:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);}
.footer-social{display:flex; gap:10px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.footer-social li{display:flex;}
.footer-social a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border); border-radius:100px; margin:0; color:var(--text-muted); transition:color .15s ease, border-color .15s ease;}
.footer-social a:hover{color:var(--text); border-color:var(--text-muted);}
.footer-social svg{width:16px; height:16px;}

/* =====================================================
   TABLET  (>= 640px)
===================================================== */
@media(min-width:640px){
  body{font-size:15.5px;}
  .wrap{padding:0 28px;}
  .cta-row{flex-direction:row;}
  .btn{width:auto; font-size:14px; padding:13px 24px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .price-card:nth-child(3){grid-column:1/-1;}
  .process-grid{grid-template-columns:repeat(3,1fr);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr); gap:24px;}
  .shop-grid{grid-template-columns:repeat(2,1fr); gap:24px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:row; justify-content:space-between;}
  .contact-grid{grid-template-columns:1.1fr 1fr;}
  section{padding:64px 0;}
  .hero{padding:76px 0 60px;}
  .page-hero{padding:56px 0 44px;}
}

/* =====================================================
   DESKTOP  (>= 860px) — nav becomes inline, hamburger hides
===================================================== */
@media(min-width:860px){
  .logo{font-size:22px;}
  .menu-toggle{display:none;}
  .header-right{order:2;}
  nav.main-nav{
    display:flex !important; order:1; flex-basis:auto; flex-direction:row; width:auto;
    border-top:none; padding:0; margin:0 auto;
  }
  nav.main-nav ul{flex-direction:row; gap:26px; width:auto;}
  nav.main-nav li{flex-direction:row;}
  nav.main-nav a{padding:12px 0; border-bottom:none; font-size:14px;}
  .header-inner{padding-top:24px; padding-bottom:24px; flex-wrap:nowrap;}
  .ctrl-btn{padding:7px 12px; font-size:11px;}
  .lang-toggle button{padding:7px 11px; font-size:11px;}
  .hero h1{margin-bottom:24px;}
  .about-grid{grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
  .portfolio-grid{grid-template-columns:repeat(3,1fr);}
  .pricing-grid{grid-template-columns:repeat(3,1fr);}
  .price-card:nth-child(3){grid-column:auto;}
  .shop-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
  .section-head{flex-direction:row; justify-content:space-between; align-items:flex-end;}
  .contact-inner{flex-direction:row; justify-content:space-between; align-items:center;}
  .blog-detail-grid{grid-template-columns:1fr 300px; gap:48px;}
  .blog-side{position:sticky; top:96px; align-self:start;}
  section{padding:84px 0;}
}

@media(min-width:1024px){
  .wrap{padding:0 28px;}
  section{padding:92px 0;}
}