/* University of Biskra — innovation and service portal
   Standalone, responsive, bilingual (AR/EN), no external assets. */
:root {
  --ink:#112b42;
  --muted:#647588;
  --navy:#102c48;
  --navy-deep:#091e34;
  --teal:#0b8f83;
  --teal-bright:#1cbbac;
  --gold:#c58b35;
  --line:#e5ebef;
  --paper:#ffffff;
  --offwhite:#f7f9f9;
  --radius:22px;
  --shadow:0 12px 32px rgba(17,43,66,.065);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:98px; }
body { margin:0; color:var(--ink); background:#fff; font-family:Tahoma,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body[lang="en"],html[lang="en"] body { font-family:"Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #44c9bc; outline-offset:4px; }
.shell { width:min(1220px,calc(100% - 70px)); margin-inline:auto; }
.skip-link { position:absolute; z-index:1000; top:-70px; inset-inline-start:15px; background:#fff; color:#11334e; padding:12px 18px; border-radius:8px; }
.skip-link:focus { top:12px; }

/* Navigation */
.site-header { position:relative; z-index:50; border-bottom:1px solid #edf1f3; background:#fff; }
.header-inner { min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.university-brand { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.brand-symbol { display:grid; place-items:center; height:53px; width:53px; color:#fff; background:linear-gradient(140deg,#0b8079,#153c5b); border-radius:15px; box-shadow:0 5px 15px rgba(15,97,109,.17); }
.brand-symbol svg { height:38px; width:38px; }
.brand-copy { display:flex; flex-direction:column; gap:4px; }
.brand-copy strong { font-size:15px; line-height:1.35; color:#17334b; font-weight:800; }
.brand-copy small { font-size:10px; letter-spacing:.2px; color:#708496; }
.header-actions { display:flex; align-items:center; gap:30px; }
.header-nav { display:flex; align-items:center; gap:27px; }
.header-nav a { font-size:12.5px; font-weight:700; color:#3b5369; transition:color .2s; white-space:nowrap; }
.header-nav a:hover { color:#0c8b7f; }
.language-switch { display:flex; gap:3px; padding:4px; border:1px solid #dfe6e9; border-radius:12px; background:#f4f7f8; }
.lang-btn { border:0; background:transparent; color:#607285; font-size:12px; font-weight:700; padding:10px 15px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.lang-btn.active { background:#fff; box-shadow:0 2px 7px #20395315; color:#0d344d; }

/* Hero */
.hero { min-height:520px; position:relative; color:#fff; overflow:hidden; background:radial-gradient(ellipse 560px 440px at 84% 42%,rgba(22,124,128,.2),transparent 75%),linear-gradient(118deg,#0d2541 0%,#133a56 58%,#0c4b58 100%); }
.hero::before { content:""; position:absolute; height:600px; width:600px; border:1px solid #ffffff0b; border-radius:50%; inset-inline-end:-180px; top:-190px; }
.hero::after { content:""; position:absolute; height:800px; width:800px; border:1px solid #ffffff0b; border-radius:50%; inset-inline-end:-280px; top:-300px; }
.hero-grid-decoration { position:absolute; inset:0; opacity:.25; background-image:radial-gradient(#7ba6bb 1px,transparent 1px); background-size:31px 31px; -webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 100%); mask-image:linear-gradient(90deg,transparent 28%,#000 100%); }
.hero-inner { min-height:520px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:30px; position:relative; z-index:2; }
.hero-content { padding:68px 0 104px; position:relative; z-index:3; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#92e2d7; font-size:12px; font-weight:750; letter-spacing:.15px; }
.eyebrow-dot { display:inline-block; height:8px; width:8px; background:#69decd; border-radius:50%; box-shadow:0 0 0 4px #63d9c718; }
.hero h1 { font-size:clamp(39px,4.2vw,60px); line-height:1.44; margin:19px 0 12px; letter-spacing:-1.2px; font-weight:850; }
.hero h1 span { color:#71dbca; }
.hero p { font-size:15px; color:#c4d5df; line-height:2.15; max-width:600px; margin:0; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:10px; padding:15px 19px; min-height:52px; font-size:12.5px; font-weight:800; transition:transform .2s,background .2s; }
.hero-button:hover { transform:translateY(-2px); }
.hero-button-primary { color:#12334b; background:#9aecde; box-shadow:0 9px 26px #00a58e14; }
.hero-button-primary:hover { background:#b2f6e9; }
.hero-button-secondary { color:#fff; border:1px solid #ffffff55; background:#ffffff0b; }
.hero-button-secondary:hover { background:#ffffff1a; }
.hero-visual { position:relative; width:min(100%,500px); aspect-ratio:1; justify-self:center; margin-top:-15px; }
.orbit { position:absolute; border-radius:50%; inset:10%; border:1px dashed #8bcdbf5c; }
.orbit-inner { inset:24%; border-style:solid; border-color:#ffffff32; }
.orbit-outer::before,.orbit-outer::after { position:absolute; content:""; width:11px; height:11px; border-radius:50%; background:#68dbc8; box-shadow:0 0 0 7px #68dbc81c; }
.orbit-outer::before { top:12%; left:11%; }
.orbit-outer::after { bottom:14%; right:10%; background:#eac08a; box-shadow:0 0 0 7px #eac08a1c; }
.visual-core { position:absolute; top:35%; left:34%; width:32%; height:32%; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:50%; color:#fff; background:radial-gradient(circle at 30% 18%,#2c6774,#153d5b 75%); border:1px solid #ffffff55; box-shadow:0 0 0 10px #ffffff09,0 20px 60px #07192a66; }
.visual-core-icon { color:#8de1d4; font-size:44px; line-height:.85; }
.visual-core span { margin-top:11px; font-family:"Segoe UI",sans-serif; font-size:19px; letter-spacing:2px; font-weight:800; }
.visual-core small { font-size:8px; color:#9bc7cb; letter-spacing:1px; margin-top:4px; }
.visual-chip { display:flex; align-items:center; gap:8px; position:absolute; border:1px solid #ffffff40; border-radius:11px; background:#ffffff12; backdrop-filter:blur(9px); box-shadow:0 10px 25px #071c2e3b; padding:13px 17px; font-family:"Segoe UI",sans-serif; font-size:13px; color:#e3f6f4; font-weight:800; direction:ltr; }
.visual-chip i { width:7px; height:7px; background:#82e4cf; border-radius:50%; }
.chip-1 { top:16%; right:23%; }
.chip-2 { top:46%; right:0; }
.chip-3 { bottom:17%; right:24%; }
.chip-4 { top:44%; left:0; }
.visual-speck { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; opacity:.5; }
.speck-1 { top:15%; left:38%; }.speck-2 { bottom:18%; left:23%; }.speck-3 { top:29%; right:11%; }

/* Overview strip */
.summary-shell { position:relative; z-index:5; margin-top:-47px; }
.summary-strip { background:#fff; border:1px solid #e9eff1; box-shadow:0 14px 48px #1b3d571a; padding:24px 38px; border-radius:18px; display:flex; align-items:center; gap:32px; min-height:100px; }
.summary-intro { margin-inline-end:auto; display:flex; flex-direction:column; gap:8px; }
.summary-overline { color:#0d9285; font-size:11px; font-weight:850; }
.summary-intro strong { font-size:17px; font-weight:850; }
.summary-stat { display:flex; align-items:center; gap:14px; }
.summary-stat strong { color:#133e58; font-size:33px; font-family:"Segoe UI",Arial,sans-serif; font-weight:780; letter-spacing:-1.5px; direction:ltr; }
.summary-stat span { max-width:112px; font-size:11.5px; line-height:1.7; color:#65788b; font-weight:700; }
.summary-separator { width:1px; height:44px; background:#e2e9ed; }

/* Sections */
.directory-section { padding:82px 0 88px; scroll-margin-top:10px; }
.section-specialized { padding-top:85px; padding-bottom:76px; background:linear-gradient(180deg,#f7f9fa 0%,#f6f8f8 100%); border-top:1px solid #eaf0f2; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:31px; }
.section-kicker { display:flex; align-items:center; gap:10px; color:#058e81; font-family:Tahoma,"Segoe UI",sans-serif; font-size:11px; font-weight:850; letter-spacing:.2px; }
.kicker-line { display:inline-block; height:3px; width:29px; background:#1ab59e; border-radius:3px; }
.section-kicker-gold { color:#b77b25; }
.section-kicker-gold .kicker-line { background:#c9954a; }
.section-heading h2 { margin:14px 0 10px; font-size:clamp(25px,2.2vw,32px); line-height:1.5; letter-spacing:-.4px; font-weight:850; }
.section-heading p { margin:0; font-size:13px; line-height:2; color:#66788a; }
.section-tag { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; border-radius:100px; padding:10px 15px; font-size:11px; font-weight:850; }
.section-tag-free { background:#def7f1; color:#0c766d; }
.section-tag-gold { background:#fcf0dc; color:#92601f; }
.tag-dot { display:inline-block; height:7px; width:7px; border-radius:50%; background:currentColor; }
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:19px; }
.service-card { display:flex; flex-direction:column; min-height:322px; background:#fff; border:1px solid #e8edf0; border-radius:18px; padding:25px 23px 22px; box-shadow:0 4px 15px #15374c07; transition:transform .22s,box-shadow .22s,border-color .22s; }
.service-card:hover { transform:translateY(-5px); box-shadow:0 22px 45px #15374c13; border-color:#c8e5de; }
.service-card.specialized:hover { border-color:#eedcc5; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:21px; }
.service-icon { height:56px; width:56px; display:grid; place-items:center; border-radius:16px; background:#e9f7f4; color:#118d80; }
.service-card.specialized .service-icon { background:#fcf3e6; color:#b78237; }
.service-icon svg { width:28px; height:28px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.service-type { font-size:10px; color:#188c7c; background:#edf9f6; padding:7px 9px; border-radius:6px; font-weight:750; white-space:nowrap; }
.service-card.specialized .service-type { color:#a47739; background:#fbf6ec; }
.service-abbr { display:block; font-family:"Segoe UI",Arial,sans-serif; font-size:10px; font-weight:900; color:#4d9b92; letter-spacing:1.4px; margin-bottom:7px; text-align:start; direction:ltr; unicode-bidi:isolate; }
.service-card.specialized .service-abbr { color:#b7905e; }
.service-name { font-size:17px; font-weight:850; margin:0 0 10px; line-height:1.5; color:#19374d; min-height:50px; }
.service-description { margin:0 0 18px; font-size:12px; line-height:1.95; color:#6a7d8d; flex-grow:1; }
.card-footer { margin-top:auto; padding-top:15px; border-top:1px solid #edf1f3; }
.service-action { display:inline-flex; align-items:center; justify-content:space-between; gap:15px; font-size:12px; font-weight:850; width:100%; color:#078778; }
.service-action:hover .action-arrow { background:#078778; color:#fff; }
.specialized .service-action { color:#aa793b; }
.specialized .service-action:hover .action-arrow { background:#aa793b; color:#fff; }
.action-arrow { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:#e8f7f3; color:#078778; font:700 17px "Segoe UI",sans-serif; transition:background .2s,color .2s; }
.specialized .action-arrow { background:#fbf0e1; color:#aa793b; }
.service-action.is-disabled { color:#91a0aa; cursor:default; user-select:none; }
.service-action.is-disabled .action-arrow,.specialized .service-action.is-disabled .action-arrow { color:#9ca8b0; background:#eff2f3; }
.service-action.is-disabled:hover .action-arrow { color:#9ca8b0; background:#eff2f3; }
.notice { display:flex; gap:12px; align-items:flex-start; padding:16px 21px; border:1px solid #e7e3d9; border-radius:12px; background:#fff; margin-top:27px; }
.notice-icon { display:grid; place-items:center; width:20px; height:20px; flex-shrink:0; font:800 12px Georgia,serif; background:#f7f1e4; color:#94733a; border-radius:50%; }
.notice p { margin:0; font-size:11px; line-height:1.9; color:#6d7783; }

/* Closing block */
.callout-section { padding:65px 0 79px; }
.callout { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:35px; border-radius:19px; background:#eaf5f3; padding:43px 49px; }
.callout::before { content:""; position:absolute; pointer-events:none; border:1px solid #bbdcd7; width:300px; height:300px; border-radius:50%; inset-inline-end:-55px; bottom:-220px; }
.callout-copy { position:relative; z-index:1; }
.callout-copy>span { color:#0a8c7c; font-size:11px; font-weight:850; }
.callout h2 { color:#15394f; font-size:25px; line-height:1.5; margin:12px 0 8px; }
.callout p { margin:0; color:#5c7182; font-size:12.5px; line-height:2; }
.callout-link { position:relative; z-index:1; display:inline-flex; align-items:center; gap:20px; background:#103b51; color:#fff; min-height:48px; padding:0 18px; border-radius:9px; font-size:12px; font-weight:800; white-space:nowrap; }
.callout-link:hover { background:#0a6a6b; }
.site-footer { background:#102c44; color:#c6d5de; }
.footer-inner { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand { display:flex; align-items:center; gap:13px; font-size:11px; }
.footer-mark { display:grid; place-items:center; background:#ffffff13; color:#a6e2d9; border:1px solid #ffffff27; width:53px; height:37px; border-radius:8px; font:800 11px "Segoe UI",sans-serif; letter-spacing:.5px; }
.footer-inner>a { font:600 11px "Segoe UI",sans-serif; color:#9ed8d2; direction:ltr; }


/* Prominent, bilingual introduction for university and external audiences */
.audience-section { padding:35px 0 0; }
.audience-panel { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(275px,.8fr); align-items:center; gap:36px; padding:29px 36px; border-radius:20px; background:linear-gradient(112deg,#f1f9f7 0%,#f9fbfb 62%,#f1f7f8 100%); border:1px solid #dcebe8; }
.audience-kicker { display:block; color:#078979; font-size:11px; font-weight:850; margin-bottom:7px; }
.audience-copy h2 { margin:0 0 9px; color:#173b4e; font-size:clamp(20px,2vw,26px); font-weight:850; line-height:1.6; }
.audience-copy p { margin:0; color:#526c79; font-size:13px; line-height:2.1; }
.audience-groups { display:flex; flex-direction:column; gap:11px; }
.audience-group { display:flex; align-items:center; gap:13px; min-height:70px; border:1px solid #dfedec; background:#fff; border-radius:13px; padding:12px 15px; box-shadow:0 3px 9px #15374c07; }
.audience-symbol { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:11px; background:#e2f4ee; color:#078f7d; font-size:18px; }
.audience-symbol-outside { background:#e6eef4; color:#376987; font-size:24px; }
.audience-group strong { display:block; color:#17384a; font-size:13px; line-height:1.5; }
.audience-group small { display:block; color:#607a85; font-size:11px; line-height:1.8; }
.section-free { padding-top:68px; }
@media (max-width:820px) {
  .audience-panel { grid-template-columns:1fr; gap:21px; padding:26px 27px; }
  .audience-groups { flex-direction:row; }
  .audience-group { flex:1; min-width:0; }
}
@media (max-width:600px) {
  .audience-section { padding-top:25px; }
  .audience-panel { padding:23px 21px; gap:18px; }
  .audience-copy h2 { font-size:21px; }
  .audience-copy p { font-size:12px; line-height:2; }
  .audience-groups { flex-direction:column; }
  .audience-group { min-height:60px; }
  .section-free { padding-top:55px; }
}

/* Responsiveness and motion */
@media (max-width:1150px) {
  .header-actions { gap:20px; }.header-nav { gap:18px; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-card { min-height:280px; }
  .hero-visual { width:390px; }
}
@media (max-width:820px) {
  .shell { width:min(100% - 40px,680px); }
  .header-inner { flex-wrap:wrap; justify-content:center; padding:15px 0; }
  .header-actions { width:100%; justify-content:space-between; }
  .header-nav { gap:22px; }
  .hero-inner { grid-template-columns:1fr; }
  .hero-content { padding:68px 0 75px; }
  .hero-visual { display:none; }
  .hero { min-height:unset; }
  .summary-strip { padding:24px; gap:17px; }
  .summary-intro strong { font-size:14px; }
  .summary-stat strong { font-size:25px; }
  .summary-stat span { font-size:10px; }
  .callout { padding:35px; }
}
@media (max-width:600px) {
  .shell { width:calc(100% - 32px); }
  .header-inner { gap:15px; }
  .header-actions { flex-wrap:wrap; gap:13px; justify-content:center; }
  .header-nav { order:2; width:100%; justify-content:center; }
  .header-nav a { font-size:11px; }
  .university-brand { gap:10px; }
  .brand-symbol { width:44px; height:44px; border-radius:12px; }
  .brand-symbol svg { width:31px; height:31px; }
  .brand-copy strong { font-size:12px; }
  .brand-copy small { font-size:9px; }
  .lang-btn { padding:7px 13px; }
  .hero-content { padding:55px 0 83px; }
  .hero h1 { font-size:36px; line-height:1.5; margin:16px 0; letter-spacing:0; }
  .hero p { font-size:13px; line-height:2; }
  .hero-actions { margin-top:26px; align-items:stretch; }
  .hero-button { width:100%; }
  .summary-shell { margin-top:-38px; }
  .summary-strip { flex-wrap:wrap; gap:14px; padding:20px; }
  .summary-intro { flex:1 0 100%; gap:5px; }
  .summary-stat { flex:1 0 36%; }
  .summary-separator { display:none; }
  .directory-section { padding:60px 0; }
  .section-heading { flex-direction:column; align-items:flex-start; gap:17px; margin-bottom:25px; }
  .section-heading h2 { font-size:25px; }
  .section-heading p { font-size:12px; }
  .service-grid { grid-template-columns:1fr; gap:15px; }
  .service-card { min-height:unset; padding:23px; }
  .service-name { min-height:0; }
  .service-description { min-height:48px; }
  .callout-section { padding:42px 0 55px; }
  .callout { flex-direction:column; align-items:flex-start; gap:23px; padding:28px 25px; }
  .callout h2 { font-size:22px; }
  .footer-inner { padding:24px 0; flex-direction:column; align-items:flex-start; min-height:unset; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }