/*
Theme Name: قالب النسيم لصيانة وتنظيف المكيفات
Theme URI: https://example.com
Author: السيد أسامة
Author URI: https://example.com
Description: قالب ووردبريس عربي (RTL) لشركات صيانة وتنظيف المكيفات: صيانة دورية، تنظيف وتعقيم، تركيب، شحن غاز، وكشف وإصلاح الأعطال. شريط قائمة موحّد يظهر في كل صفحات القالب والمقالات، بدون أزرار اتصال/واتساب عائمة وبدون أي فورم تواصل.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alnaseem-ac
*/

/* ==========================================================================
   0. الخطوط
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700;800;900&family=Tajawal:wght@300;400;500;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ==========================================================================
   1. المتغيرات — نظام الألوان: "طيف البرودة"
   خلفية ليلية زرقاء داكنة + تدرّج يمزج أزرق الثلج والنعناعي المنعش
   والبنفسجي البارد كعنصر توقيع بصري واحد، يعبّر عن التبريد والنظافة.
   ========================================================================== */
:root{
  --ink:#071826;
  --ink-2:#0b2436;
  --panel:#0e2c40;
  --panel-2:#123449;
  --line:rgba(255,255,255,.09);
  --text:#eef9fc;
  --text-dim:#9bc0cf;
  --text-faint:#5f8494;

  --c-blue:#38bdf8;
  --c-teal:#2dd4bf;
  --c-amber:#818cf8;
  --c-navy:#0ea5e9;
  --c-coral:#7dd3fc;

  --grad-signature:linear-gradient(95deg,var(--c-blue) 0%,var(--c-teal) 50%,var(--c-amber) 100%);
  --grad-panel:linear-gradient(160deg,rgba(56,189,248,.14),rgba(45,212,191,.06) 60%,transparent);

  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;

  --font-display:'Cairo',sans-serif;
  --font-body:'Tajawal',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --ease:cubic-bezier(.19,1,.22,1);
}

/* ==========================================================================
   2. إعادة ضبط أساسية
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;width:100%;}
body{
  direction:rtl;
  text-align:right;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.8;
  width:100%;
  position:relative;
}
.page-scroll-wrap{overflow-x:hidden;width:100%;position:relative;}
img,svg{max-width:100%;}
img{display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.25;color:var(--text);}
::selection{background:var(--c-teal);color:#04121b;}

body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(60vw 60vw at 12% -10%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(50vw 50vw at 110% 15%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(45vw 45vw at 80% 100%, rgba(129,140,248,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.container{width:92%;max-width:1220px;margin:0 auto;position:relative;z-index:2;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--c-blue);
  background:rgba(45,199,255,.08);border:1px solid rgba(45,199,255,.25);
  padding:6px 16px;border-radius:99px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-blue);box-shadow:0 0 10px var(--c-blue);}

.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px;}
.section-head p{color:var(--text-dim);font-size:16.5px;}

/* لون الجملة المميزة الموحّد — لون صلب متوافق مع كل الأجهزة كخط أساس،
   ويتحول إلى تدرّج "طيف البرودة" فقط في المتصفحات التي تدعمه فعلياً،
   حتى لا يختفي النص أبداً على أي هاتف أو جهاز */
.grad-text{color:var(--c-blue);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{
    background:var(--grad-signature);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

section{position:relative;z-index:2;padding:110px 0;}
.section-alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02) 15%,rgba(255,255,255,.02) 85%,transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ==========================================================================
   3. الهيدر — شريط قائمة موحّد يظهر في كل صفحات القالب (الرئيسية/الصفحات/المقالات)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  padding:16px 0;
  backdrop-filter:blur(16px);
  background:rgba(8,21,33,.78);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);flex:none;max-width:70%;}

/* شعار كامل مرفوع فعلياً — بدون أي صندوق/علامة صغيرة بديلة */
.site-logo{display:flex;align-items:center;max-width:100%;}
.site-logo img,.site-logo .custom-logo{max-height:46px;width:auto;max-width:100%;object-fit:contain;display:block;}

/* اسم الشركة نصاً فقط — يظهر بدلاً من الشعار إن لم يوجد شعار مرفوع */
.brand-name-text{
  font-weight:800;font-size:16.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;
}
.brand-name-text small{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--text-faint);white-space:normal;overflow:visible;text-overflow:clip;}

.main-nav ul{display:flex;gap:4px;align-items:center;}
.main-nav a{
  font-size:14.5px;color:var(--text-dim);
  padding:9px 15px;border-radius:99px;
  transition:.25s var(--ease);display:block;
}
.main-nav a:hover{color:var(--text);background:var(--panel);}

.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);
  align-items:center;justify-content:center;flex:none;
  cursor:pointer;
}
.nav-toggle .bar{display:block;width:20px;height:2px;background:var(--text);position:relative;transition:.25s var(--ease);}
.nav-toggle .bar::before,.nav-toggle .bar::after{content:"";position:absolute;right:0;width:20px;height:2px;background:var(--text);transition:.25s var(--ease);}
.nav-toggle .bar::before{top:-6px;}
.nav-toggle .bar::after{top:6px;}
.nav-toggle[aria-expanded="true"] .bar{background:transparent;}
.nav-toggle[aria-expanded="true"] .bar::before{transform:rotate(45deg);top:0;}
.nav-toggle[aria-expanded="true"] .bar::after{transform:rotate(-45deg);top:0;}

/* ==========================================================================
   4. الهيرو
   ========================================================================== */
.hero{padding:86px 0 60px;overflow:visible;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-copy h1{font-size:clamp(36px,5.2vw,60px);margin-bottom:20px;}
.hero-copy h1 em{font-style:normal;}
.hero-role{font-family:var(--font-mono);font-size:15px;color:var(--text-dim);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:10px 18px;}
.hero-role b{color:var(--c-blue);font-weight:600;}
.hero-desc{color:var(--text-dim);font-size:17px;max-width:520px;margin-bottom:34px;}

.hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero-stats .stat b{display:block;font-family:var(--font-mono);font-size:26px;color:var(--text);}
.hero-stats .stat b em{font-style:normal;}
.hero-stats .stat span{font-size:13px;color:var(--text-faint);}

.hero-visual{position:relative;height:520px;}
.hero-visual .float-card{
  position:absolute;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  animation:floaty 7s ease-in-out infinite;
}
.hero-visual .img-main{width:78%;height:78%;top:0;right:0;animation-delay:0s;}
.hero-visual .img-secondary{width:52%;height:46%;bottom:0;left:0;animation-delay:1.4s;z-index:3;}
.hero-visual .img-main img,.hero-visual .img-secondary img{width:100%;height:100%;object-fit:cover;}
.img-placeholder{
  width:100%;height:100%;
  background:var(--grad-panel), var(--panel-2);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:var(--text-faint);text-align:center;padding:20px;
}
.img-placeholder .ph-mark{
  width:56px;height:56px;border-radius:16px;background:var(--grad-signature);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;color:#04121b;font-size:20px;
}
.img-placeholder small{font-size:12px;line-height:1.6;}

.badge-float{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;
  background:rgba(15,34,55,.9);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:10px 16px;border-radius:99px;font-size:13px;
  box-shadow:0 15px 30px -10px rgba(0,0,0,.5);animation:floaty 6s ease-in-out infinite;
}
.badge-1{top:8%;left:-4%;animation-delay:.4s;}
.badge-2{bottom:22%;right:-6%;animation-delay:2s;}
.badge-3{top:46%;left:-10%;animation-delay:3.2s;}
.badge-dot{width:9px;height:9px;border-radius:50%;flex:none;}

.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.32;z-index:1;}
.blob-a{width:340px;height:340px;background:var(--c-teal);top:-80px;left:-60px;animation:drift 14s ease-in-out infinite;}
.blob-b{width:260px;height:260px;background:var(--c-amber);bottom:-60px;right:0;animation:drift 18s ease-in-out infinite reverse;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}

/* ==========================================================================
   5. الشريط المتحرك التوقيعي
   ========================================================================== */
.ticker-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:16px 0;overflow:hidden;position:relative;z-index:2;}
.ticker-track{display:flex;width:max-content;animation:marquee 30s linear infinite;}
.ticker-item{display:flex;align-items:center;gap:10px;padding:0 34px;font-family:var(--font-mono);font-size:14px;color:var(--text-dim);white-space:nowrap;border-left:1px solid var(--line);}
.ticker-item b{color:var(--text);font-weight:600;}
.ticker-item .dot{width:7px;height:7px;border-radius:50%;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   6. من نحن
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
.about-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:420px;}
.about-visual img,.about-visual .img-placeholder{width:100%;height:100%;object-fit:cover;}
.about-copy h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:20px;}
.about-copy p{color:var(--text-dim);margin-bottom:16px;font-size:16px;}
.about-points{margin-top:26px;display:grid;gap:14px;}
.about-points li{display:flex;align-items:flex-start;gap:12px;color:var(--text-dim);font-size:15px;}
.about-points svg{flex:none;margin-top:3px;}

/* ==========================================================================
   7. الخدمات
   ========================================================================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.service-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:32px 28px;transition:.35s var(--ease);position:relative;overflow:hidden;
}
.service-card::after{content:"";position:absolute;inset:0;opacity:0;background:var(--grad-panel);transition:.35s var(--ease);}
.service-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.2);box-shadow:0 26px 50px -20px rgba(0,0,0,.55);}
.service-card:hover::after{opacity:1;}
.service-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;}
.service-card h3{font-size:19px;margin-bottom:10px;position:relative;z-index:1;}
.service-card p{color:var(--text-dim);font-size:14.5px;position:relative;z-index:1;}
.service-card .service-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1;}
.service-card .service-tags span{font-size:11.5px;font-family:var(--font-mono);color:var(--text-faint);border:1px solid var(--line);padding:4px 10px;border-radius:99px;}

/* ==========================================================================
   8. لماذا نحن
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.why-card{padding:26px 22px;border-radius:var(--radius-md);background:transparent;border:1px solid var(--line);}
.why-card .n{font-family:var(--font-mono);font-size:13px;color:var(--c-blue);margin-bottom:14px;display:block;}
.why-card h4{font-size:16.5px;margin-bottom:8px;}
.why-card p{font-size:14px;color:var(--text-dim);}

/* ==========================================================================
   9. خطوات العمل — شبكة بطاقات متصلة بخط تسلسلي واحد
   ========================================================================== */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;margin-top:10px;}
.process-grid::before{
  content:"";position:absolute;top:36px;right:10%;left:10%;height:2px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-teal),var(--c-amber));opacity:.4;z-index:0;
}
.process-card{
  position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:28px 20px 24px;text-align:center;transition:.35s var(--ease);
}
.process-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.22);box-shadow:0 20px 40px -18px rgba(0,0,0,.5);}
.process-icon{
  width:56px;height:56px;border-radius:50%;background:var(--ink);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:.3s var(--ease);
}
.process-card:hover .process-icon{border-color:var(--c-blue);}
.process-step-num{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--c-blue);margin-bottom:8px;}
.process-card h4{font-size:16px;margin-bottom:9px;}
.process-card p{color:var(--text-dim);font-size:13.5px;line-height:1.85;}

/* ==========================================================================
   10. أنواع الأجهزة — بطاقات احترافية
   ========================================================================== */
.material-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.material-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px 22px 22px;background:var(--panel);transition:.3s var(--ease);overflow:hidden;
}
.material-card::after{content:"";position:absolute;inset:0;opacity:0;background:var(--grad-panel);transition:.3s var(--ease);z-index:0;}
.material-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22);box-shadow:0 22px 44px -20px rgba(0,0,0,.55);}
.material-card:hover::after{opacity:1;}

.material-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.material-warranty-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:6px 12px;border-radius:99px;color:var(--text-dim);white-space:nowrap;
}
.material-warranty-badge b{color:var(--c-teal);font-weight:700;}
.material-warranty-badge .live-dot{width:6px;height:6px;border-radius:50%;background:var(--c-teal);box-shadow:0 0 8px var(--c-teal);flex:none;}

.material-identity{position:relative;z-index:1;display:flex;align-items:center;gap:12px;}
.material-logo{width:48px;height:48px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.material-logo img{width:100%;height:100%;object-fit:cover;}
.material-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--text);}

/* ==========================================================================
   11. الأرقام
   ========================================================================== */
.stats-band{
  border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--grad-panel), var(--panel);padding:52px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.stats-band .stat b{display:block;font-family:var(--font-mono);font-size:38px;}
.stats-band .stat span{color:var(--text-dim);font-size:14px;}

/* ==========================================================================
   12. أعمال مختارة
   ========================================================================== */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.portfolio-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:.3s var(--ease);}
.portfolio-card:hover{transform:translateY(-6px);}
.portfolio-thumb{height:190px;position:relative;overflow:hidden;}
.portfolio-thumb img{width:100%;height:100%;object-fit:cover;}
.portfolio-body{padding:20px 22px;}
.portfolio-body .p-cat{font-family:var(--font-mono);font-size:11.5px;color:var(--c-blue);margin-bottom:6px;display:block;}
.portfolio-body h4{font-size:17px;margin-bottom:6px;}
.portfolio-body p{font-size:13.5px;color:var(--text-dim);}

/* ==========================================================================
   12-ب. خريطة الموقع (قبل الفوتر مباشرة)
   ========================================================================== */
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:560px;}
.map-frame iframe{width:100%;height:100%;border:0;display:block;}

/* ==========================================================================
   13. خدمات شركتنا (المقالات) — نفس تصميم البطاقات، تظهر أيضاً في القائمة
   ========================================================================== */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.article-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:.3s var(--ease);display:block;}
.article-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);}
.article-thumb{height:170px;overflow:hidden;}
.article-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease);}
.article-card:hover .article-thumb img{transform:scale(1.06);}
.article-body{padding:22px;}
.article-date{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);margin-bottom:10px;display:block;}
.article-body h4{font-size:17px;margin-bottom:10px;}
.article-body p{font-size:14px;color:var(--text-dim);}

/* ==========================================================================
   14. الفوتر — بدون أي أزرار اتصال/واتساب أو فورم تواصل
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:46px 0 30px;position:relative;z-index:2;background:var(--ink-2);}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.footer-brand{display:flex;justify-content:center;max-width:220px;}
.footer-brand .site-logo img,.footer-brand .site-logo .custom-logo{max-height:38px;width:auto;object-fit:contain;}
.footer-brand .brand-name-text{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip;}
.footer-line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  color:var(--text-faint);font-size:13px;font-family:var(--font-body);line-height:1.9;
}
.footer-line .footer-sep{opacity:.5;}
.footer-line .footer-credit-accent{color:var(--c-blue);font-weight:600;font-family:var(--font-mono);font-size:12.5px;}

/* ==========================================================================
   15. صفحة المقالة (خدمة الشركة) — تُعرض بالهيدر والفوتر الموحّدين، بدون تعليقات
   ========================================================================== */
.article-page{padding:70px 0 100px;}
.article-page .container{max-width:760px;}
.article-hero-tag{margin-bottom:22px;}
.article-page h1{font-size:clamp(28px,4.6vw,44px);margin-bottom:18px;word-break:break-word;}
.article-meta{display:flex;gap:10px 18px;flex-wrap:wrap;color:var(--text-faint);font-family:var(--font-mono);font-size:12.5px;margin-bottom:36px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.article-cover{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px;border:1px solid var(--line);max-height:420px;}
.article-cover img{width:100%;height:100%;object-fit:cover;}
.article-content{font-size:17.5px;color:#dbe6f0;line-height:2;max-width:100%;}
.article-content p{margin-bottom:22px;}
.article-content h2{font-size:26px;margin:40px 0 16px;}
.article-content h3{font-size:21px;margin:32px 0 14px;}
.article-content ul,.article-content ol{margin:0 0 22px 0;padding-right:22px;color:var(--text-dim);}
.article-content li{margin-bottom:8px;}
.article-content blockquote{border-right:3px solid var(--c-teal);padding:6px 22px;margin:26px 0;color:var(--text-dim);font-style:normal;background:var(--panel);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.article-content img{border-radius:var(--radius-md);margin:24px 0;height:auto;width:100%;object-fit:cover;}
.article-content iframe,.article-content video,.article-content embed{max-width:100%;border-radius:var(--radius-md);}
.article-content a{color:var(--c-blue);border-bottom:1px dashed rgba(45,199,255,.4);word-break:break-word;}
.article-content table{width:100%;display:block;overflow-x:auto;border-radius:var(--radius-sm);}

/* ==========================================================================
   16. حركات الظهور عند التمرير
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ==========================================================================
   17. الاستجابة — القائمة والقالب متوافقان بالكامل مع الهواتف
   ========================================================================== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:380px;margin-top:20px;}
  .about-grid{grid-template-columns:1fr;}
  .about-visual{height:300px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(3,1fr);}
  .process-grid::before{display:none;}
  .material-strip{grid-template-columns:repeat(2,1fr);}
  .stats-band{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid,.articles-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px){
  html.nav-open{overflow:hidden;height:100%;}
  .main-nav{
    position:fixed;top:76px;right:0;left:0;bottom:0;z-index:150;
    background:linear-gradient(180deg,var(--panel-2) 0%,var(--ink-2) 65%);
    border-top:1px solid rgba(45,199,255,.28);
    border-radius:26px 26px 0 0;
    box-shadow:0 -10px 40px -10px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.6);
    display:flex;align-items:flex-start;justify-content:center;
    padding:40px 24px 40px;
    overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:.3s var(--ease);
  }
  .main-nav::before{
    content:"";position:absolute;top:14px;right:50%;transform:translateX(50%);
    width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);
  }
  .main-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;}
  .main-nav ul{display:flex;flex-direction:column;gap:9px;width:100%;max-width:420px;}
  .main-nav a{
    display:flex;align-items:center;justify-content:center;
    padding:17px 20px;font-size:16.5px;font-weight:700;font-family:var(--font-display);
    border-radius:16px;background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    transition:.25s var(--ease);
  }
  .main-nav a:hover,.main-nav a:active{
    background:rgba(45,199,255,.14);border-color:rgba(45,199,255,.4);color:var(--c-blue);
    transform:translateY(-2px);
  }
  .nav-toggle{display:flex;position:relative;z-index:210;}
}
@media(max-width:640px){
  section{padding:64px 0;}
  .container{width:90%;}
  .services-grid,.why-grid,.portfolio-grid,.articles-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .material-strip{grid-template-columns:1fr;}
  .stats-band{grid-template-columns:1fr 1fr;padding:32px 18px;gap:26px 16px;}
  .hero-stats{gap:18px 26px;}
  .hero{padding:56px 0 40px;}
  .hero-visual{height:300px;}
  .hero-desc{max-width:100%;}
  .badge-float{font-size:11.5px;padding:7px 12px;gap:7px;}
  .badge-1{top:5%;left:3%;}
  .badge-2{bottom:6%;right:3%;}
  .badge-3{display:none;}
  .hero-blob{filter:blur(44px);}
  .blob-a{width:200px;height:200px;top:-40px;left:-20px;}
  .blob-b{width:170px;height:170px;bottom:-30px;right:-10px;}
  .article-page{padding:50px 0 60px;}
  .article-page .container{width:90%;}
  .article-cover{max-height:230px;border-radius:var(--radius-md);}
  .article-content{font-size:16px;line-height:1.9;}
  .article-content h2{font-size:22px;margin:30px 0 14px;}
  .article-content h3{font-size:18.5px;margin:26px 0 12px;}
  .article-meta{font-size:11.5px;margin-bottom:26px;padding-bottom:20px;}
  .map-frame{height:380px;}
}
@media(max-width:480px){
  .container{width:91%;}
  section{padding:52px 0;}
  .hero{padding:44px 0 32px;}
  .hero-copy h1{font-size:32px;}
  .hero-visual{height:250px;}
  .material-card,.process-card{padding:22px 18px;}
  .stats-band{grid-template-columns:1fr;padding:28px 18px;}
  .why-grid{grid-template-columns:1fr;}
  .ticker-item{padding:0 20px;font-size:12.5px;}
  .footer-credit{font-size:11.5px;}
  .section-head{margin-bottom:36px;}
  .article-cover{max-height:190px;}
  .article-page h1{font-size:26px;}
  .brand-name-text{font-size:14.5px;}
  .site-logo img,.site-logo .custom-logo{max-height:36px;}
  .map-frame{height:300px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px;border-radius:6px;}