/*
Theme Name: ILSOFTWARE
Theme URI: https://ilsoftware.so/
Author: ILSOFTWARE
Author URI: https://ilsoftware.so/
Description: Single-page corporate theme for ILSOFTWARE — mission-critical digital systems for government institutions, UN agencies and international organisations. Content is built into the theme; activate and it is live. Includes a light/dark mode toggle. No contact form, no page builder, no external services.
Version: 1.5.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ilsoftware
Tags: one-column, custom-logo, custom-menu, translation-ready, light-dark
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---------- design tokens: dark (default) ---------- */
:root{
  --bg:#070B11; --bg-2:#0B1119; --surface:#0F1620; --surface-hover:#111926;
  --line:rgba(255,255,255,.08); --header-bg:rgba(7,11,17,.78);
  --ghost-bg:rgba(255,255,255,.03); --input-bg:rgba(255,255,255,.035);
  --brand:#01A4EF; --brand-ink:#38BDF8; --brand-soft:rgba(1,164,239,.14);
  --brand-border:rgba(1,164,239,.26); --accent:#F25022;
  --fg:#EAF0F7; --strong:#FFFFFF; --muted:#93A3B8; --dim:#8395AA; --quote:#D3DEEB;
  --eyebrow-fg:#7FD2FB;
  --glow-a:rgba(1,164,239,.20); --glow-b:rgba(242,80,34,.10);
  --btn-bg:#01A4EF; --btn-ink:#04121C; --shadow:0 6px 22px -8px rgba(1,164,239,.75);
  --h1-a:#01A4EF; --h1-b:#7FD2FB;
  --max:1180px; --r:14px;
  --sans:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}

/* ---------- design tokens: light ---------- */
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#F4F7FB; --surface:#FFFFFF; --surface-hover:#F7FAFD;
  --line:rgba(11,32,56,.12); --header-bg:rgba(255,255,255,.82);
  --ghost-bg:rgba(11,32,56,.03); --input-bg:rgba(11,32,56,.025);
  --brand:#0284C7; --brand-ink:#0A6FA8; --brand-soft:rgba(2,132,199,.09);
  --brand-border:rgba(2,132,199,.24); --accent:#DC4318;
  --fg:#0B1420; --strong:#04101C; --muted:#4A5A6E; --dim:#58687B; --quote:#243447;
  --eyebrow-fg:#0A6FA8;
  --glow-a:rgba(2,132,199,.13); --glow-b:rgba(242,80,34,.07);
  --btn-bg:#0369A1; --btn-ink:#FFFFFF; --shadow:0 6px 20px -8px rgba(3,105,161,.45);
  --h1-a:#0EA5E9; --h1-b:#0369A1;
  color-scheme:light;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--fg);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .3s ease,color .3s ease;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:9999;
  background:var(--btn-bg);color:var(--btn-ink);padding:12px 20px;border-radius:8px;font-weight:700;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);transition:background-color .3s ease,border-color .3s ease;
}
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:38px;width:auto}
.brand span{font-weight:700;font-size:1.06rem;letter-spacing:.16em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.905rem;color:var(--muted);transition:color .18s}
.nav-links a:hover,.nav-links a:focus{color:var(--fg)}
/* the CTA sits inside .nav-links, which would otherwise win on specificity */
.nav-links a.btn-primary,.nav-links a.btn-primary:hover,.nav-links a.btn-primary:focus{color:var(--btn-ink)}
.nav-tools{display:flex;align-items:center;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:10px;
  font-size:.9rem;font-weight:600;letter-spacing:.01em;transition:all .2s;border:1px solid transparent;
}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--shadow)}
.btn-primary:hover,.btn-primary:focus{filter:brightness(1.1);transform:translateY(-1px);color:var(--btn-ink)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:var(--ghost-bg)}
.btn-ghost:hover,.btn-ghost:focus{border-color:var(--brand-border);background:var(--brand-soft)}
.menu-btn{display:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:8px}

/* theme toggle */
.theme-toggle{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;
  background:var(--ghost-bg);border:1px solid var(--line);color:var(--muted);
  transition:color .2s,border-color .2s,background .2s;flex:0 0 38px;
}
.theme-toggle:hover{color:var(--brand-ink);border-color:var(--brand-border);background:var(--brand-soft)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:120px 0 100px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(680px 420px at 18% -8%, var(--glow-a), transparent 66%),
    radial-gradient(560px 380px at 92% 8%, var(--glow-b), transparent 64%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 12%,transparent 74%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 12%,transparent 74%);
}
.hero .wrap{position:relative;z-index:1}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:var(--brand-soft);border:1px solid var(--brand-border);
  font-size:.775rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--eyebrow-fg);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.hero h1{
  margin-top:28px;font-size:clamp(2.35rem,5.6vw,4.15rem);line-height:1.06;
  font-weight:800;letter-spacing:-.033em;max-width:16ch;color:var(--strong);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--h1-a) 0%,var(--h1-b) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin-top:26px;font-size:clamp(1.04rem,1.65vw,1.235rem);color:var(--muted);max-width:60ch;line-height:1.72}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:82px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.stat{background:var(--bg-2);padding:28px 26px}
.stat b{display:block;font-size:clamp(1.75rem,3vw,2.3rem);font-weight:800;letter-spacing:-.03em;color:var(--strong);line-height:1.1}
.stat b i{font-style:normal;color:var(--brand-ink)}
.stat span{display:block;margin-top:7px;font-size:.845rem;color:var(--dim);line-height:1.5}

/* ---------- sections ---------- */
.sec{padding:104px 0;position:relative}
.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{max-width:62ch;margin-bottom:58px}
.klass{font-size:.775rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink)}
.sec h2{margin-top:15px;font-size:clamp(1.85rem,3.4vw,2.65rem);font-weight:800;letter-spacing:-.028em;line-height:1.16;color:var(--strong)}
.shead p{margin-top:19px;color:var(--muted);font-size:1.04rem;line-height:1.72}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 32px;transition:border-color .25s,transform .25s,background .25s;position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),transparent);transition:width .4s ease;
}
.card:hover{border-color:var(--brand-border);transform:translateY(-3px);background:var(--surface-hover)}
.card:hover::after{width:100%}
.ico{
  width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--brand-soft);border:1px solid var(--brand-border);flex:0 0 46px;
}
.ico svg{width:22px;height:22px;stroke:var(--brand-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.145rem;font-weight:700;letter-spacing:-.012em;color:var(--strong)}
.card p{margin-top:12px;color:var(--muted);font-size:.945rem;line-height:1.72}

/* principles */
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.p-item{padding:30px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.p-num{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--brand-ink);padding-top:5px;font-variant-numeric:tabular-nums}
.p-item h3{font-size:1.06rem;font-weight:700;color:var(--strong)}
.p-item p{margin-top:9px;color:var(--muted);font-size:.94rem;line-height:1.7}

/* vision / mission */
.vm{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.vm-card{
  background:linear-gradient(158deg,var(--brand-soft),transparent 62%);
  border:1px solid var(--line);border-radius:var(--r);padding:40px 36px;
}
.vm-card h3{font-size:.79rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink)}
.vm-card p{margin-top:18px;font-size:1.075rem;line-height:1.74;color:var(--quote)}

/* contact */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ccard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 30px;transition:border-color .25s,transform .25s,background .25s;
}
.ccard:hover{border-color:var(--brand-border);transform:translateY(-3px);background:var(--surface-hover)}
.ci-t{font-size:.775rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:600}
.ci-v{margin-top:7px;font-size:1.09rem;font-weight:700;color:var(--strong);letter-spacing:-.01em;word-break:break-word}
.ci-v a{transition:color .18s}
.ci-v a:hover{color:var(--brand-ink)}
.ci-s{margin-top:6px;font-size:.885rem;color:var(--muted)}

.contact-cta{margin-top:46px;text-align:center}
.contact-cta .btn-primary{font-size:.95rem;padding:15px 30px}
.contact-cta p{margin-top:16px;font-size:.875rem;color:var(--dim)}

/* footer */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.fgrid > div > p{margin-top:17px;color:var(--muted);font-size:.925rem;max-width:38ch;line-height:1.72}
.fh{font-size:.775rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:17px}
.fcol a{display:block;color:var(--muted);font-size:.925rem;padding:6px 0;transition:color .18s}
.fcol a:hover{color:var(--brand-ink)}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:26px;flex-wrap:wrap}
.fbot p{color:var(--dim);font-size:.855rem}
.social{display:flex;gap:11px}
.social a{
  width:37px;height:37px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);transition:all .2s;
}
.social a:hover{border-color:var(--brand-border);color:var(--brand-ink);background:var(--brand-soft)}
.social svg{width:17px;height:17px;fill:currentColor}

/* inner pages fallback */
.page-body{padding:120px 0 100px;max-width:74ch}
.page-body h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:26px;color:var(--strong)}
.page-body p,.page-body ul,.page-body ol{color:var(--muted);margin-bottom:18px}
.page-body ul,.page-body ol{padding-left:22px}
.page-body a{color:var(--brand-ink);text-decoration:underline}
.page-body h2,.page-body h3{margin:32px 0 12px;font-weight:700;color:var(--strong)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}

@media (max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-2,.vm,.plist{grid-template-columns:1fr}
  .plist{gap:0}
  .contact-cards{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:38px}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;left:0;right:0;top:74px;padding:20px 28px 26px;
    background:var(--bg-2);border-bottom:1px solid var(--line);
  }
  .nav-links.open a{padding:10px 0;width:100%}
  .menu-btn{display:block}
  .hero{padding:82px 0 72px}
  .sec{padding:76px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}