/* ═══════════════════════════════════════════════════════════
   INFINITY SCIENCE AGENCY
   تدرّج لوني مبني على أخضر الشعار الزمرّدي · وضع فاتح + وضع داكن
   كل الألوان من هنا فقط — لا تُكتب قيمة لون داخل المكوّنات
   ═══════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ── سلّم الأخضر المستخرج من الشعار ─────────────────── */
  --e-50:#ECFBF5;  --e-100:#D3F4E6; --e-200:#A8E9D1; --e-300:#6FD9B5;
  --e-400:#2FC79A; --e-500:#0FB183; --e-600:#0B7E5C; --e-700:#096247;
  --e-800:#0A4536; --e-900:#083227; --e-950:#06231C;

  /* ── الهوية ─────────────────────────────────────────── */
  --logo:var(--e-500);         /* أخضر الشعار الصافي */
  --brand:var(--e-600);        /* اللون التفاعلي: روابط · أيقونات · أزرار */
  --brand-d:var(--e-700);      /* حالة المرور */
  --brand-deep:var(--e-800);   /* الأقسام الداكنة */
  --brand-abyss:var(--e-950);  /* التذييل وخلفية الهيرو */
  --glow:var(--e-400);         /* الأخضر المضيء فوق الداكن */
  --on-brand:#FFFFFF;          /* النص فوق اللون الأساسي */
  --brand-soft:rgba(11,126,92,.09);
  --brand-ring:rgba(11,126,92,.22);
  --panel:var(--e-600);        /* لوح الأكورديون المفتوح */
  --on-panel:#FFFFFF;
  --on-panel-2:#D6EFE4;

  /* ── الذهبي: لهجة ثانوية متناغمة مع الزمرّدي ────────── */
  --gold:#C6A252;
  --gold-l:#DFC07C;
  --on-gold:#231A05;

  /* ── الأسطح والنصوص ─────────────────────────────────── */
  --paper:#FFFFFF;
  --cream:#F3F8F5;
  --cream-2:#E6F0EB;
  --cream-3:#D6E4DC;
  --ink:#0C1B16;
  --dim:#4A6359;
  --line:rgba(10,69,54,.14);
  --line-s:rgba(10,69,54,.07);

  /* ── فوق الأسطح الداكنة (تصلح في الوضعين) ───────────── */
  --on-deep:#FFFFFF;
  --on-deep-2:#BFD8CD;
  --on-deep-3:#A2BFB1;
  --veil:6,35,28;              /* حجاب الهيرو (R,G,B) */
  --deep-line:rgba(255,255,255,.16);
  --deep-fill:rgba(255,255,255,.07);
  --danger:#C0392B;

  /* ── التنبيهات (نجاح / خطأ) ─────────────────────────── */
  --ok-bg:#E6F4EC;
  --ok-tx:#0B5C40;
  --ok-ln:#B9DFC9;
  --err-bg:#FDECEA;
  --err-tx:#922B21;
  --err-ln:#F2C2BD;

  --band:var(--gold);
  --on-band:var(--on-gold);
  --band-line:rgba(34,26,5,.18);
  --cta-1:var(--e-800);
  --cta-2:var(--e-600);

  --nav-bg:rgba(255,255,255,.88);
  --shadow:0 18px 40px -22px rgba(8,50,39,.32);
  --shadow-l:0 30px 70px -34px rgba(8,50,39,.42);
  --r:18px;
  --r-s:12px;

  /* ── الخطوط ───────────────────────────────────────── */
  --f:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* 'IBM Plex Sans Arabic' داخل السلسلة عمداً: الأحادي لا يملك حروفاً عربية،
     فبدونه يسقط أي نص عربي على خط النظام الأحادي فيخرج مفكّك التباعد */
  --f-mono:'JetBrains Mono','IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* سلّم الأحجام — ثمانِ درجات لا غير
     أصغر حجم في الموقع 13px: أي شيء دونه لا يُقرأ بارتياح، خصوصاً بالعربية */
  --fs-2xs:.8125rem;    /* 13px · أدقّ الوسوم */
  --fs-xs:.875rem;      /* 14px · رقاقات · بريد وهاتف · مسار التنقّل */
  --fs-sm:.9375rem;     /* 15px · نص ثانوي · شروح */
  --fs-base:1rem;       /* 16px · نص البطاقات وعناصر الواجهة */
  --fs-md:1.0625rem;    /* 17px · نص المتن */
  --fs-lg:1.1875rem;    /* 19px · مقدّمات · عناوين صغيرة */
  --fs-xl:clamp(1.3rem,.6vw + 1.14rem,1.55rem);
  --fs-2xl:clamp(1.8rem,2.5vw + 1.12rem,2.6rem);
  --fs-3xl:clamp(2.2rem,4.2vw + 1.1rem,3.5rem);
  --fs-num:clamp(2rem,1.6vw + 1.5rem,2.6rem);      /* الأرقام الكبيرة */

  /* الأوزان — أربعة لا غير */
  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;

  /* ارتفاع السطر والتتبّع — قيم لاتينية، تُضبط للعربية أدناه */
  --lh-display:1.16;      /* عناوين كبيرة — تُشدّ كلما كبر الحجم */
  --lh-h:1.32;
  --lh-body:1.7;
  --lh-ui:1.35;        /* عناصر الواجهة: أزرار · قوائم · رقاقات */
  --lh-flat:1.12;
  --tr-h:-.02em;        /* شدّ العناوين اللاتينية */
  --tr-label:.09em;     /* تباعد الوسوم بحروف كبيرة */
  --measure:68ch;       /* أقصى عرض مريح للقراءة */

  --wrap:1200px;
}

/* ═══ الوضع الداكن — اختيار المستخدم ═══ */
[data-theme="dark"]{
  color-scheme:dark;

  --logo:#2FC79A;
  --brand:#35D6A2;
  --brand-d:#6FD9B5;
  --brand-deep:#101E1A;
  --brand-abyss:#080F0D;
  --glow:#35D6A2;
  --on-brand:#04211A;
  --brand-soft:rgba(53,214,162,.12);
  --brand-ring:rgba(53,214,162,.30);
  --panel:#14312A;
  --on-panel:#E6EFEA;
  --on-panel-2:#A8C6B8;

  --gold:#DFC07C;
  --gold-l:#EBD49A;
  --on-gold:#221A05;

  --paper:#0D1613;
  --cream:#111C18;
  --cream-2:#182420;
  --cream-3:#20302A;
  --ink:#E6EFEA;
  --dim:#A2B8AF;
  --line:rgba(255,255,255,.11);
  --line-s:rgba(255,255,255,.06);

  --on-deep:#EAF3EE;
  --on-deep-2:#A8C0B5;
  --on-deep-3:#96B0A3;
  --veil:8,15,13;
  --deep-line:rgba(255,255,255,.12);
  --deep-fill:rgba(255,255,255,.05);
  --danger:#FF9182;

  --ok-bg:rgba(53,214,162,.13);
  --ok-tx:#7FE9C6;
  --ok-ln:rgba(53,214,162,.34);
  --err-bg:rgba(255,145,130,.13);
  --err-tx:#FFB3A8;
  --err-ln:rgba(255,145,130,.34);

  --band:#231D10;
  --on-band:#EBD49A;
  --band-line:rgba(235,212,154,.20);
  --cta-1:#0F241E;
  --cta-2:#164C3C;

  --nav-bg:rgba(13,22,19,.86);
  --shadow:0 18px 40px -22px rgba(0,0,0,.75);
  --shadow-l:0 30px 70px -30px rgba(0,0,0,.85);
}

/* ═══ الوضع الداكن — تفضيل النظام قبل تشغيل السكربت ═══
   (نسخة مطابقة للكتلة أعلاه · أي تعديل يُطبَّق على الاثنتين) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;

    --logo:#2FC79A;
    --brand:#35D6A2;
    --brand-d:#6FD9B5;
    --brand-deep:#101E1A;
    --brand-abyss:#080F0D;
    --glow:#35D6A2;
    --on-brand:#04211A;
    --brand-soft:rgba(53,214,162,.12);
    --brand-ring:rgba(53,214,162,.30);
    --panel:#14312A;
    --on-panel:#E6EFEA;
    --on-panel-2:#A8C6B8;

    --gold:#DFC07C;
    --gold-l:#EBD49A;
    --on-gold:#221A05;

    --paper:#0D1613;
    --cream:#111C18;
    --cream-2:#182420;
    --cream-3:#20302A;
    --ink:#E6EFEA;
    --dim:#A2B8AF;
    --line:rgba(255,255,255,.11);
    --line-s:rgba(255,255,255,.06);

    --on-deep:#EAF3EE;
    --on-deep-2:#A8C0B5;
    --on-deep-3:#96B0A3;
    --veil:8,15,13;
    --deep-line:rgba(255,255,255,.12);
    --deep-fill:rgba(255,255,255,.05);
    --danger:#FF9182;

    --ok-bg:rgba(53,214,162,.13);
    --ok-tx:#7FE9C6;
    --ok-ln:rgba(53,214,162,.34);
    --err-bg:rgba(255,145,130,.13);
    --err-tx:#FFB3A8;
    --err-ln:rgba(255,145,130,.34);

    --band:#231D10;
    --on-band:#EBD49A;
    --band-line:rgba(235,212,154,.20);
    --cta-1:#0F241E;
    --cta-2:#164C3C;

    --nav-bg:rgba(13,22,19,.86);
    --shadow:0 18px 40px -22px rgba(0,0,0,.75);
    --shadow-l:0 30px 70px -30px rgba(0,0,0,.85);
  }
}

html{transition:none}
[data-theme] body,[data-theme] .nav,[data-theme] .acc-item,[data-theme] .card-form{
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}

/* ═══ العربية والكردية ═══
   سطور أوسع لاستيعاب النقاط والحركات، وإلغاء تباعد الحروف
   لأنه يفكّ اتصال الحرف العربي ويُفسد شكل الكلمة. */
html[dir="rtl"]{
  /* الحرف العربي في هذا الخط أصغر مساحةً من اللاتيني عند نفس القياس،
     فتُرفع القاعدة 5% ليتساوى الحجم المرئي في اللغتين */
  font-size:105%;
  --lh-display:1.34;
  --lh-h:1.5;
  --lh-body:1.9;
  --lh-ui:1.5;
  --tr-h:0;
  --tr-label:0;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);
  font-size:var(--fs-md);
  font-weight:var(--w-reg);
  background:var(--paper);
  color:var(--ink);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--brand);color:var(--on-brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.sec{padding-block:96px}
.sec-tight{padding-block:64px}

h1,h2,h3,h4{
  line-height:var(--lh-h);
  font-weight:var(--w-semi);
  letter-spacing:var(--tr-h);
  text-wrap:balance;             /* يمنع بقاء كلمة وحيدة في سطر العنوان */
}
h1{font-size:var(--fs-3xl);font-weight:var(--w-bold);line-height:var(--lh-display)}
h2{font-size:var(--fs-2xl);line-height:var(--lh-display)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{font-weight:var(--w-reg);text-wrap:pretty}

/* عدّاد الأرقام داخل <b> يرث حجم الرقم لا حجم النص المجاور له
   (كان `.stats span` يلتقط العدّاد فيظهر الرقم بحجم الوسم الصغير) */
.stats b span,.hero-card b span,.about-badge b span{
  font:inherit;color:inherit;letter-spacing:inherit;
}

/* الأرقام: عرض ثابت لكل رقم كي لا يهتزّ العدّاد أثناء العدّ */
.num,[data-count],.stats b,.hero-card b,.about-badge b{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;
}

/* المصطلحات التقنية بخط أحادي المسافة — لغة الفريق البرمجي.
   وزن 500 لأن الأحادي يبدو أرفع من المتناسب عند نفس الوزن */
.acc-tags span,.tagset span,.proj-year,.ref,.tl b,.brand-txt small{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-weight:var(--w-med);
}

/* البريد والهاتف: خط أحادي المسافة وأرقام ثابتة العرض، وبلا فيض */
.topbar-info a,.foot-c a{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);
  font-weight:var(--w-med);
  overflow-wrap:anywhere;
}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}

/* ── العناوين الفرعية ─────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-xs);font-weight:var(--w-semi);color:var(--brand);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  margin-bottom:12px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.lead{color:var(--dim);font-weight:var(--w-reg);max-width:var(--measure);font-size:var(--fs-lg)}

/* ── الأزرار ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:100px;border:1.5px solid transparent;
  font-weight:var(--w-med);font-size:var(--fs-base);line-height:var(--lh-ui);cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--brand);color:var(--on-brand)}
.btn-main:hover{background:var(--brand-d)}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-l)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.btn-light{border:1.5px solid var(--deep-line,rgba(255,255,255,.4));color:var(--on-deep)}
.btn-light:hover{background:var(--on-deep);color:var(--brand-deep);border-color:var(--on-deep)}

/* ═══════════════ الشريط العلوي ═══════════════ */
.topbar{
  background:var(--brand-deep);color:var(--on-deep-2);
  font-size:var(--fs-xs);font-weight:var(--w-reg);line-height:var(--lh-ui);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px}
.topbar-info{display:flex;gap:22px;flex-wrap:wrap}
.topbar-info span{display:inline-flex;align-items:center;gap:7px}
.topbar-info svg{width:14px;height:14px;stroke:var(--gold-l);fill:none;stroke-width:2}
.topbar a:hover{color:var(--on-deep)}
.topbar-lang{display:flex;gap:4px}
.topbar-lang a{
  padding:3px 11px;border-radius:100px;font-size:var(--fs-xs);
  border:1px solid transparent;transition:.2s;
}
.topbar-lang a.on{background:var(--gold);color:var(--on-gold);font-weight:var(--w-med)}
.topbar-lang a:not(.on):hover{border-color:rgba(255,255,255,.3)}

/* ═══════════════ القائمة ═══════════════ */
.nav{
  position:sticky;top:0;z-index:80;background:var(--nav-bg);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-s);
  transition:box-shadow .3s;
}
.nav.stuck{box-shadow:var(--shadow)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:76px}

.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand-mark{width:54px;flex-shrink:0;display:grid;place-items:center;color:var(--logo);transition:color .25s}
.brand:hover .brand-mark{color:var(--brand)}

/* الشعار: يُدرج كـ SVG ويأخذ لون العنصر الحاوي */
.logo{width:100%;height:auto;display:block}
.brand-txt b{display:block;font-size:var(--fs-md);font-weight:var(--w-semi);letter-spacing:.03em;line-height:1.25}
.brand-txt b i{font-style:normal;color:var(--brand)}
.brand-txt small{display:block;font-size:var(--fs-2xs);color:var(--dim);letter-spacing:.12em;font-weight:var(--w-med)}

.menu{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.menu a{
  padding:9px 15px;border-radius:100px;font-size:var(--fs-base);font-weight:var(--w-reg);
  line-height:var(--lh-ui);
  color:var(--dim);transition:.2s;
}
.menu a:hover{color:var(--brand);background:var(--brand-soft)}
.menu a.on{color:var(--brand);font-weight:var(--w-med);background:var(--brand-soft)}
.nav-cta{margin-inline-start:10px}
.menu .nav-cta{color:var(--on-brand)}          /* يتغلّب على لون روابط القائمة */
.menu .nav-cta:hover{color:var(--on-brand);background:var(--brand-d)}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);
  background:transparent;border-radius:12px;cursor:pointer;
  flex-direction:column;gap:5px;align-items:center;justify-content:center;
}
.burger span{width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ═══════════════ زر الوضع الفاتح / الداكن ═══════════════ */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:26px;padding-inline:10px;border-radius:100px;
  border:1px solid transparent;background:transparent;color:inherit;
  cursor:pointer;font-size:var(--fs-xs);font-weight:var(--w-reg);transition:.2s;
}
.theme-btn:hover{border-color:var(--deep-line);color:var(--on-deep)}
.theme-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.theme-btn .ic-sun{display:none}
.theme-btn .t-txt{display:none}
[data-theme="dark"] .theme-btn .ic-sun{display:block}
[data-theme="dark"] .theme-btn .ic-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-btn .ic-sun{display:block}
  :root:not([data-theme]) .theme-btn .ic-moon{display:none}
}
.topbar-tools{display:flex;align-items:center;gap:8px}
.topbar-tools .sep{width:1px;height:16px;background:var(--deep-line)}

/* ═══════════════ الهيرو ═══════════════ */
.hero{position:relative;background:var(--brand-abyss);color:var(--on-deep);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img,.hero-bg svg{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--veil),.55),rgba(var(--veil),.92) 78%),
             linear-gradient(to var(--grad-side,left),rgba(var(--veil),.94),transparent 65%);
}
html[dir="ltr"]{--grad-side:right}
.hero .wrap{position:relative;z-index:2;padding-block:120px 96px}
.hero-tag{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(47,199,154,.14);border:1px solid rgba(47,199,154,.3);
  color:var(--on-deep-2);padding:7px 18px;border-radius:100px;font-size:var(--fs-xs);
  font-weight:var(--w-med);letter-spacing:var(--tr-label);
}
.hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--glow);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{50%{opacity:.25}}
.hero h1{margin:22px 0 18px;max-width:19ch;color:var(--on-deep)}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero p{max-width:56ch;color:var(--on-deep-2);font-size:var(--fs-lg)}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.hero-cards{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  width:calc(100% - 48px);max-width:calc(var(--wrap) - 48px);margin:0 auto;transform:translateY(50%);
  background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow-l);
  overflow:hidden;
}
.hero-card{padding:26px 28px;border-inline-end:1px solid var(--line-s)}
.hero-card:last-child{border:0}
.hero-card b{display:block;font-size:var(--fs-num);font-weight:var(--w-semi);color:var(--brand);line-height:var(--lh-flat)}
.hero-card span{font-size:var(--fs-sm);color:var(--dim);font-weight:var(--w-reg)}
.hero-pad{height:62px}

/* ═══════════════ شريط الجهات ═══════════════ */
.logos{background:var(--cream);border-block:1px solid var(--line-s)}
.logos .wrap{padding-block:34px;display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center}
.logos-t{font-size:var(--fs-sm);color:var(--dim);font-weight:var(--w-reg);width:100%;text-align:center;margin-bottom:4px}
.logo-chip{
  display:flex;align-items:center;gap:10px;color:var(--ink);
  opacity:.62;font-weight:var(--w-med);font-size:var(--fs-base);transition:opacity .25s;
}
.logo-chip:hover{opacity:1}
.logo-chip svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.6}

/* ═══════════════ فاصل دائري بين الأقسام ═══════════════ */
.jump{position:relative;height:0}
.jump a{
  position:absolute;inset-inline-start:50%;top:-30px;transform:translateX(50%);
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--brand);
  box-shadow:var(--shadow);z-index:5;transition:.25s;
}
html[dir="ltr"] .jump a{transform:translateX(-50%)}
.jump a::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  border:1px dashed var(--brand-ring);
}
.jump a:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.jump a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.jump-dark a{background:var(--brand-deep);border-color:var(--deep-line);color:var(--gold-l)}

/* ═══════════════ من نحن ═══════════════ */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.about-art{position:relative}
.about-art .frame{
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-l);
  background:var(--cream-2);aspect-ratio:4/3.4;
}
.about-art .frame img,.about-art .frame svg{width:100%;height:100%;object-fit:cover}
.about-badge{
  position:absolute;inset-inline-end:-18px;bottom:-26px;
  background:var(--brand-deep);color:var(--on-deep);border-radius:var(--r-s);
  padding:20px 26px;box-shadow:var(--shadow-l);text-align:center;
}
.about-badge b{display:block;font-size:var(--fs-num);font-weight:var(--w-semi);color:var(--gold-l);line-height:1}
.about-badge span{font-size:var(--fs-xs);color:var(--on-deep-2);font-weight:var(--w-reg)}
.about-p{margin-bottom:16px;color:var(--dim)}
.about-list{list-style:none;margin:26px 0 30px;display:grid;gap:13px}
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-base);font-weight:var(--w-reg)}
.about-list svg{width:21px;height:21px;flex-shrink:0;margin-top:3px;stroke:var(--brand);fill:none;stroke-width:2.4}

/* ═══════════════ الخدمات — أكورديون ═══════════════ */
.svc-wrap{background:var(--cream)}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.acc{display:grid;gap:14px}
.acc-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.acc-item.on{background:var(--panel);border-color:var(--panel);box-shadow:var(--shadow)}
.acc-btn{
  width:100%;display:flex;align-items:center;gap:18px;text-align:start;
  padding:24px 28px;background:transparent;border:0;cursor:pointer;color:inherit;
}
.acc-n{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:var(--cream-2);color:var(--brand);font-weight:var(--w-semi);font-size:var(--fs-base);
  transition:.25s;
}
.acc-item.on .acc-n{background:rgba(255,255,255,.16);color:var(--on-panel)}
.acc-btn h3{flex:1;font-size:var(--fs-lg);font-weight:var(--w-med)}
.acc-item.on .acc-btn{color:var(--on-panel)}
.acc-chev{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s;opacity:.6}
.acc-item.on .acc-chev{transform:rotate(180deg);opacity:1}
.acc-body{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
.acc-item.on .acc-body{max-height:420px}
.acc-inner{padding:0 28px 26px 28px;padding-inline-start:90px}
.acc-item.on .acc-inner p{color:var(--on-panel-2);font-weight:var(--w-reg)}
.acc-inner p{color:var(--dim)}
.acc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.acc-tags span{
  font-size:var(--fs-xs);padding:5px 13px;border-radius:100px;line-height:var(--lh-ui);
  background:rgba(255,255,255,.16);color:var(--on-panel);font-weight:var(--w-reg);
}

/* ═══════════════ الخطوات الأربع ═══════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;position:relative}
.step{text-align:center;position:relative}
.step-c{
  width:92px;height:92px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:var(--paper);border:2px solid var(--line);
  transition:border-color .25s,background .25s;
}
.step:hover .step-c{border-color:var(--brand);background:var(--cream)}
.step-c svg{width:32px;height:32px;stroke:var(--brand);fill:none;stroke-width:1.7}
.step-n{
  position:absolute;top:-6px;inset-inline-end:-6px;
  width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--on-gold);
  display:grid;place-items:center;font-size:var(--fs-sm);font-weight:var(--w-semi);
}
.step h4{font-size:var(--fs-lg);margin-bottom:8px}
.step p{font-size:var(--fs-base);color:var(--dim)}
.step-arrow{
  position:absolute;top:46px;inset-inline-start:calc(50% + 62px);
  width:calc(100% - 124px);height:2px;
  background-image:linear-gradient(to right,var(--line) 55%,transparent 0);
  background-size:11px 2px;background-repeat:repeat-x;
}
.step:last-child .step-arrow{display:none}

/* ═══════════════ القسم الداكن — لماذا نحن ═══════════════ */
.dark{background:var(--brand-deep);color:var(--on-deep);position:relative;overflow:hidden}
.dark::before{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,199,154,.15),transparent 68%);
  top:-220px;inset-inline-end:-180px;
}
.dark::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,162,82,.13),transparent 68%);
  bottom:-240px;inset-inline-start:-160px;
}
.dark .wrap{position:relative;z-index:2}
.dark .eyebrow{color:var(--gold-l)}
.dark .eyebrow::before{background:var(--glow)}
.dark h2{color:var(--on-deep)}
.dark-head{text-align:center;max-width:62ch;margin:0 auto 60px}
.dark-head p{color:var(--on-deep-2)}

.dark-grid{display:grid;grid-template-columns:1fr 340px 1fr;gap:44px;align-items:center}
.dark-col{display:grid;gap:34px}
.feat{display:flex;gap:16px;align-items:flex-start}
.dark-col.end .feat{flex-direction:row-reverse;text-align:end}
.feat-ico{
  width:52px;height:52px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;
  background:var(--deep-fill);border:1px solid var(--deep-line);
}
.feat-ico svg{width:23px;height:23px;stroke:var(--glow);fill:none;stroke-width:1.8}
.feat h4{font-size:var(--fs-md);margin-bottom:5px;color:var(--on-deep)}
.feat p{font-size:var(--fs-sm);color:var(--on-deep-3);line-height:var(--lh-body)}
.dark-core{display:grid;place-items:center}
.dark-core svg{width:100%;max-width:320px;height:auto}

/* ═══════════════ شريط الإحصائيات ═══════════════ */
.stats{background:var(--band);color:var(--on-band)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-block:44px;gap:20px}
.stats.three .wrap{grid-template-columns:repeat(3,1fr)}
.stats div{text-align:center;border-inline-end:1px solid var(--band-line)}
.stats div:last-child{border:0}
.stats b{display:block;font-size:var(--fs-num);font-weight:var(--w-semi);line-height:var(--lh-flat)}
.stats span{font-size:var(--fs-sm);font-weight:var(--w-reg);opacity:.78}

/* ═══════════════ آراء العملاء ═══════════════ */
.quotes{background:var(--cream)}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.q-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px 28px;position:relative;
}
.q-mark{
  position:absolute;top:-20px;inset-inline-start:28px;
  width:44px;height:44px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;color:var(--on-brand);font-size:var(--fs-xl);font-weight:var(--w-bold);
  line-height:1;padding-bottom:8px;box-shadow:0 10px 20px -12px var(--brand);
}
.q-card p{font-size:var(--fs-md);color:var(--ink);margin-bottom:22px;line-height:var(--lh-body)}
.q-who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line-s);padding-top:18px}
.q-av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--brand),var(--brand-deep));
  display:grid;place-items:center;color:var(--on-brand);font-weight:var(--w-semi);
}
.q-who b{display:block;font-size:var(--fs-base);font-weight:var(--w-med)}
.q-who small{color:var(--dim);font-size:var(--fs-xs)}

/* ═══════════════ الفريق ═══════════════ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.team-card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper);transition:box-shadow .25s,transform .25s;
}
.team-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.team-photo{aspect-ratio:1/.92;background:var(--cream-2);position:relative}
.team-photo img,.team-photo svg{width:100%;height:100%;object-fit:cover}
.team-role{
  position:absolute;bottom:14px;inset-inline-start:14px;
  background:var(--brand);color:var(--on-brand);font-size:var(--fs-xs);font-weight:var(--w-reg);
  padding:5px 14px;border-radius:100px;
}
.team-body{padding:22px 24px 26px}
.team-body h4{font-size:var(--fs-lg);margin-bottom:7px}
.team-body p{font-size:var(--fs-sm);color:var(--dim)}

/* ═══════════════ نموذج التواصل ═══════════════ */
.form-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.form-side .frame{
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-l);
  aspect-ratio:4/3.6;background:var(--cream-2);margin-bottom:28px;
}
.form-side .frame img,.form-side .frame svg{width:100%;height:100%;object-fit:cover}
.cpoints{display:grid;gap:14px}
.cpoint{display:flex;gap:14px;align-items:center}
.cpoint-i{
  width:46px;height:46px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;
  background:var(--cream-2);
}
.cpoint-i svg{width:20px;height:20px;stroke:var(--brand);fill:none;stroke-width:1.9}
.cpoint b{display:block;font-size:var(--fs-base);font-weight:var(--w-med)}
.cpoint small{color:var(--dim);font-size:var(--fs-sm)}

.card-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:36px;box-shadow:var(--shadow);
}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:var(--fs-sm);font-weight:var(--w-med);line-height:var(--lh-ui);margin-bottom:8px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--cream);color:var(--ink);font-weight:var(--w-reg);transition:.2s;
}
.fld textarea{min-height:130px;resize:vertical;line-height:var(--lh-body)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--brand);background:var(--paper);
  box-shadow:0 0 0 3px var(--brand-ring);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pills{display:flex;gap:9px;flex-wrap:wrap}
.pill{
  padding:9px 18px;border:1px solid var(--line);border-radius:100px;
  font-size:var(--fs-sm);cursor:pointer;font-weight:var(--w-reg);transition:.2s;user-select:none;
}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:var(--w-reg)}
.f-err{color:var(--danger);font-size:var(--fs-xs);margin-top:6px}
.submit{
  width:100%;justify-content:center;margin-top:8px;
  padding:16px;font-size:var(--fs-md);
}
.form-ok{text-align:center;padding:26px 10px}
.form-ok .tick{
  width:74px;height:74px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;margin:0 auto 22px;
}
.form-ok .tick svg{width:32px;height:32px;stroke:var(--on-brand);fill:none;stroke-width:3}
.form-ok h3{margin-bottom:10px}
.form-ok p{color:var(--dim);margin-bottom:20px}
.ref{
  display:inline-block;background:var(--cream-2);border:1px dashed var(--brand);
  border-radius:var(--r-s);padding:11px 22px;font-weight:var(--w-semi);color:var(--brand);
  letter-spacing:.08em;
}

/* ═══════════════ الأسئلة الشائعة ═══════════════ */
.faq{display:grid;gap:12px;margin-top:38px;max-width:900px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  overflow:hidden;
}
.faq summary{
  padding:19px 24px;cursor:pointer;font-weight:var(--w-med);font-size:var(--fs-md);
  display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2;transition:transform .25s;flex-shrink:0}
.faq details[open] summary{background:var(--cream);color:var(--ink)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding:4px 24px 22px;color:var(--dim);font-size:var(--fs-base)}

/* ═══════════════ لافتة الدعوة ═══════════════ */
.cta{
  background:linear-gradient(130deg,var(--cta-1),var(--cta-2));
  color:var(--on-deep);border-radius:var(--r);padding:52px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  border:1px solid var(--deep-line);top:-140px;inset-inline-end:-90px;
}
.cta > *{position:relative;z-index:2}
.cta h2{color:var(--on-deep);max-width:20ch;margin-bottom:10px}
.cta p{color:var(--on-deep-2);max-width:52ch}

/* ═══════════════ صفحات داخلية ═══════════════ */
.phead{background:var(--brand-deep);color:var(--on-deep);position:relative;overflow:hidden}
.phead::before{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,199,154,.15),transparent 70%);
  top:-200px;inset-inline-end:-140px;
}
.phead .wrap{position:relative;z-index:2;padding-block:74px 66px}
.phead h1{color:var(--on-deep);max-width:22ch;margin:14px 0 16px}
.phead p{color:var(--on-deep-2);max-width:62ch}
.crumbs{font-size:var(--fs-sm);color:var(--on-deep-3);font-weight:var(--w-reg)}
.crumbs a:hover{color:var(--gold-l)}
.crumbs span{margin-inline:8px;opacity:.5}

/* بطاقات الخدمات المفصّلة */
.svc-row{
  display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center;
  padding-block:56px;border-bottom:1px solid var(--line-s);
}
.svc-row:last-child{border-bottom:0}
.svc-row.flip .svc-art{order:2}
.svc-art{
  border-radius:var(--r);background:var(--cream);border:1px solid var(--line);
  padding:34px;display:grid;place-items:center;aspect-ratio:5/3.6;
}
.svc-art svg{width:100%;height:100%}
.svc-body ul{list-style:none;display:grid;gap:11px;margin:22px 0}
.svc-body li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-base);font-weight:var(--w-reg)}
.svc-body li svg{width:19px;height:19px;flex-shrink:0;margin-top:4px;stroke:var(--brand);fill:none;stroke-width:2.6}
.tagset{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tagset span{
  font-size:var(--fs-xs);padding:5px 13px;border-radius:100px;line-height:var(--lh-ui);
  background:var(--cream-2);color:var(--ink);font-weight:var(--w-reg);
}

/* شبكة المشاريع */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:32px 0 30px}
.filter{
  padding:9px 20px;border-radius:100px;border:1px solid var(--line);
  background:transparent;cursor:pointer;font-size:var(--fs-sm);color:var(--dim);transition:.2s;
}
.filter:hover{border-color:var(--brand);color:var(--brand)}
.filter.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);
  transition:box-shadow .25s,transform .25s;
}
.proj:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.proj-art{aspect-ratio:16/10;background:var(--cream);border-bottom:1px solid var(--line-s);display:grid;place-items:center;padding:18px}
.proj-body{padding:22px 24px 26px}
.proj-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.proj-cat{font-size:var(--fs-xs);color:var(--brand);font-weight:var(--w-med)}
.proj-year{font-size:var(--fs-xs);color:var(--dim);font-weight:var(--w-reg)}
.proj h3{font-size:var(--fs-lg);margin-bottom:9px}
.proj p{font-size:var(--fs-base);color:var(--dim)}

/* القيم والمسار الزمني */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
.val{
  border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:var(--paper);
}
.val-i{
  width:52px;height:52px;border-radius:14px;background:var(--cream-2);
  display:grid;place-items:center;margin-bottom:18px;
}
.val-i svg{width:23px;height:23px;stroke:var(--brand);fill:none;stroke-width:1.8}
.val h3{font-size:var(--fs-lg);margin-bottom:9px}
.val p{font-size:var(--fs-base);color:var(--dim)}

.tline{margin-top:44px;border-inline-start:2px solid var(--line);padding-inline-start:34px;display:grid;gap:36px}
.tl{position:relative}
.tl::before{
  content:"";position:absolute;inset-inline-start:-43px;top:6px;
  width:16px;height:16px;border-radius:50%;background:var(--paper);
  border:3px solid var(--brand);
}
.tl b{display:inline-block;background:var(--brand-deep);color:var(--gold-l);
  font-size:var(--fs-xs);font-weight:var(--w-med);padding:3px 14px;border-radius:100px;margin-bottom:9px}
.tl h4{font-size:var(--fs-lg);margin-bottom:6px}
.tl p{font-size:var(--fs-base);color:var(--dim)}

/* ═══════════════ التذييل ═══════════════ */
.news{background:var(--brand-deep);color:var(--on-deep)}
.news .wrap{
  padding-block:52px;display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.news h3{font-size:var(--fs-xl);margin-bottom:6px}
.news p{color:var(--on-deep-2);font-size:var(--fs-base)}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{
  padding:14px 20px;border-radius:100px;border:1px solid var(--deep-line);
  background:var(--deep-fill);color:var(--on-deep);min-width:260px;font-weight:var(--w-reg);
}
.news input::placeholder{color:var(--on-deep-3)}
.news input:focus{outline:none;border-color:var(--gold-l);background:rgba(255,255,255,.12)}

/* ── تنبيه النجاح/الخطأ ─────────────────────────────────
   يُستعمل عامًّا في الصفحات، وله نسخة خاصة فوق شريط النشرة الداكن. */
.alert{
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;border-radius:var(--r-s);
  font-size:var(--fs-base);font-weight:var(--w-reg);
  background:var(--ok-bg);color:var(--ok-tx);border:1px solid var(--ok-ln);
}
.alert svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4}
.alert.err{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-ln)}

/* فوق الشريط الأخضر الداكن للنشرة: ألوان مضيئة تُقرأ في الوضعين */
.news .alert{
  width:100%;
  background:rgba(255,255,255,.10);color:var(--glow);
  border-color:rgba(53,214,162,.38);
}
.news .alert.err{
  background:rgba(255,145,130,.12);color:#FFB3A8;
  border-color:rgba(255,145,130,.38);
}

footer{background:var(--brand-abyss);color:var(--on-deep-3);font-weight:var(--w-reg)}
.foot-grid{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.5fr;gap:40px;   /* عمود التواصل أوسع ليتّسع البريد بسطر واحد */
  padding-block:60px 44px;
}
footer h4{color:var(--on-deep);font-size:var(--fs-md);margin-bottom:18px;font-weight:var(--w-med)}
.foot-links{display:grid;gap:10px;font-size:var(--fs-base)}
.foot-links a:hover{color:var(--glow)}
.foot-about p{font-size:var(--fs-base);margin-top:16px;max-width:42ch;line-height:var(--lh-body)}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand .brand-mark{width:52px;color:var(--glow)}
.foot-brand b{color:var(--on-deep);font-size:var(--fs-md);letter-spacing:.03em}
.foot-brand b i{font-style:normal;color:var(--glow)}
.foot-c{display:grid;gap:12px;font-size:var(--fs-base)}
.foot-c div{display:flex;gap:11px;align-items:flex-start}
.foot-c svg{width:17px;height:17px;flex-shrink:0;margin-top:4px;stroke:var(--gold-l);fill:none;stroke-width:1.9}
.foot-bar{
  border-top:1px solid var(--deep-line);padding-block:20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-sm);
}
.foot-bar a:hover{color:var(--gold-l)}
.to-top{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--deep-line);border-radius:100px;padding:7px 16px;transition:.2s;
}
.to-top:hover{border-color:var(--gold-l);color:var(--gold-l)}
.to-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══════════════ الظهور عند التمرير ═══════════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ═══════════════ الاستجابة ═══════════════ */
@media (max-width:1024px){
  .about-grid,.form-grid,.svc-row{grid-template-columns:1fr;gap:40px}
  .svc-row.flip .svc-art{order:0}
  .dark-grid{grid-template-columns:1fr;gap:36px}
  .dark-core{order:-1}
  .dark-col.end .feat{flex-direction:row;text-align:start}
  .proj-grid,.q-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
  .vals{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:38px 26px}
  .step-arrow{display:none}
}
@media (max-width:860px){
  .burger{display:flex;margin-inline-start:auto}
  .menu{
    position:fixed;inset-block:0 auto;top:0;inset-inline-end:0;
    height:100dvh;width:min(320px,84vw);background:var(--paper);
    flex-direction:column;align-items:stretch;gap:6px;
    padding:96px 22px 30px;box-shadow:var(--shadow-l);
    transform:translateX(var(--off,110%));transition:transform .32s cubic-bezier(.4,0,.2,1);
    margin:0;overflow-y:auto;z-index:90;
  }
  html[dir="ltr"] .menu{--off:110%}
  html[dir="rtl"] .menu{--off:-110%}
  .menu.open{transform:translateX(0)}
  .menu a{padding:13px 16px;border-radius:var(--r-s);font-size:var(--fs-md)}
  .nav-cta{margin:12px 0 0;justify-content:center}
  .hero-cards{grid-template-columns:1fr;transform:none;margin-top:0;border-radius:0}
  .hero-card{border-inline-end:0;border-bottom:1px solid var(--line-s)}
  .hero-pad{height:0}
  .hero .wrap{padding-block:78px 62px}
  .stats .wrap,.stats.three .wrap{grid-template-columns:repeat(2,1fr);gap:28px 12px}
  .stats div:nth-child(2){border:0}
  .sec{padding-block:64px}
  .cta{padding:38px 28px;text-align:center;justify-content:center}
  .about-badge{inset-inline-end:14px;bottom:-20px}
}
@media (max-width:620px){
  .proj-grid,.q-grid,.team-grid,.vals,.steps,.row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .acc-inner{padding-inline-start:28px}
  .card-form{padding:26px 22px}
  .topbar-info span:nth-child(2){display:none}
}