/* SIDR public website — the SIDR brand site's design (sidr-website/index.html), moved to a file
   so the Content-Security-Policy can forbid inline styles. Extra sections are appended below. */
  /* ============ RESET ============ */
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  input, textarea { font: inherit; }

  /* ============ CONTENT PROTECTION ============ */
  /* Deterrent only — raises the bar against casual right-click-save /
     drag-save copying. Does not (and cannot) stop someone determined
     to view-source or use browser devtools. */
  /* `user-drag` only ever existed vendor-prefixed — there is no standard
     unprefixed property, so none is declared here. */
  img{ -webkit-user-drag: none; -moz-user-drag: none; pointer-events: auto; }
  body{
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }
  /* Contact details and any future form fields stay selectable/usable. */
  .footer-bottom, .footer-bottom *{
    -webkit-user-select: text; -moz-user-select: text; user-select: text;
  }

  /* ============ DESIGN TOKENS ============ */
  /* Real SIDR brand palette (client brand book):
     #10201A near-black green · #F7F4EA creamy · #E4C572 light gold (on-dark only)
     #C9A24B gold (signature) · #17694A emerald · #0E3B27 dark green (primary) */
  :root{
    --ivory: #F7F4EA;
    --paper: #ECE6D3;
    --card: #F2EFE1;
    --green: #0E3B27;
    --green-deep: #10201A;
    --green-soft: rgba(14,59,39,.08);
    --green-line: rgba(14,59,39,.30);
    --emerald: #17694A;
    --emerald-soft: rgba(23,105,74,.09);
    --emerald-line: rgba(23,105,74,.24);
    --gold: #C9A24B;
    --gold-hover: #B7984A;
    --gold-light: #E4C572;
    --gold-tint: rgba(201,162,75,.16);
    --ink: #0E3B27;
    --ink-soft: rgba(14,59,39,.72);
    --ink-faint: rgba(14,59,39,.46);
    --on-dark: #F7F4EA;
    --on-dark-soft: rgba(247,244,234,.78);
    --on-dark-faint: rgba(247,244,234,.5);
    --hairline: rgba(14,59,39,.14);
    --hairline-strong: rgba(14,59,39,.26);
    --hairline-dark: rgba(247,244,234,.18);

    --font-display: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-body: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-latin: "Montserrat", "Segoe UI", Tahoma, Arial, sans-serif;

    --container: 1180px;
    --pad-inline: clamp(1.25rem, 5vw, 3.5rem);
    --header-h: 78px;
    --radius-sm: 3px;
    --radius-md: 6px;
    --ease: cubic-bezier(.16,.8,.28,1);
  }

  @media (prefers-reduced-motion: no-preference){
    html { scroll-behavior: smooth; }
  }

  html { font-size: 100%; }

  body{
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  ::selection{ background: var(--green); color: var(--on-dark); }

  h1, h2, h3, h4{
    font-family: var(--font-display);
    color: var(--green);
    font-weight: 800;
    line-height: 1.2;
  }

  p{ color: var(--ink-soft); line-height: 1.85; }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .contact a:focus-visible, .contact button:focus-visible,
  .site-footer a:focus-visible, .site-footer button:focus-visible{
    outline-color: var(--gold-light);
  }

  .container{
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-inline);
  }

  .ltr-isolate{ direction: ltr; unicode-bidi: isolate; font-family: var(--font-latin); font-variant-numeric: tabular-nums; }

  .visually-hidden{
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  section{ scroll-margin-top: calc(var(--header-h) + 12px); position: relative; }

  .eyebrow{
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-body);
    font-weight: 700; font-size: .875rem;
    letter-spacing: .03em;
    color: var(--emerald);
    margin-bottom: .9rem;
  }
  .eyebrow .icon{ width: 14px; height: 14px; color: var(--emerald); flex-shrink: 0; }

  .section-head{ max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin-bottom: 1rem; }
  .section-head p{ font-size: 1.0625rem; }

  /* ============ ICON BASE ============ */
  .icon{ width: 20px; height: 20px; flex-shrink: 0; }

  /* ============ BUTTONS ============ */
  .btn{
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.85rem;
    font-weight: 700; font-size: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
    white-space: nowrap;
  }
  .btn .icon{ width: 19px; height: 19px; }
  .btn-primary{ background: var(--gold); color: var(--green); border-color: var(--gold); }
  .btn-primary:hover{ background: var(--gold-hover); border-color: var(--gold-hover); transform: translateY(-1px); }
  .btn-primary:active{ transform: translateY(0); }
  .btn-outline{ background: transparent; color: var(--green); border-color: var(--hairline-strong); }
  .btn-outline:hover{ border-color: var(--green); background: var(--green-soft); }
  .btn-ghost-light{ background: transparent; color: var(--on-dark); border-color: var(--hairline-dark); }
  .btn-ghost-light:hover{ background: rgba(247,244,234,.1); border-color: var(--gold-light); color: var(--gold-light); }
  .btn-sm{ padding: .6rem 1.1rem; font-size: .9rem; }

  .text-link{
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; color: var(--green);
    border-bottom: 1px solid var(--hairline-strong);
    padding-bottom: .15rem;
    transition: border-color .2s var(--ease), color .2s var(--ease), gap .2s var(--ease);
  }
  .text-link .icon{ width: 16px; height: 16px; transition: transform .2s var(--ease); }
  .text-link:hover{ color: var(--emerald); border-color: var(--emerald); gap: .65rem; }

  /* ============ REVEAL ANIMATION ============ */
  /* Content is visible by default. Only hidden pre-reveal when JS confirms
     it can run (html.js, set synchronously at top of body) so a slow/blocked
     script never leaves real content permanently invisible. */
  .reveal{ opacity: 1; transform: none; }
  html.js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.js .reveal.is-visible{ opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
  }

  /* ============ HEADER ============ */
  .site-header{
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center;
    background: rgba(247,244,234,.97);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(14,59,39,.35); border-color: var(--hairline-strong); }

  .header-inner{
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
  }

  .brand{ display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
  .brand-mark{ width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
  /* Bilingual lockup: the Arabic and Latin wordmarks are set to match each
     other optically — Arabic glyphs read smaller than Latin caps at the same
     font-size, so the Arabic carries a slightly larger value. */
  .brand-word{ display: flex; flex-direction: row; align-items: center; line-height: 1; gap: .5rem; }
  .brand-word .ar{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--green); }
  .brand-word .lat{ font-family: var(--font-latin); font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; direction: ltr; color: var(--emerald); }
  .brand-word .sep{ width: 1px; height: 1.15rem; background: var(--hairline-strong); flex-shrink: 0; }
  .brand-tagline{
    display: block; margin-top: .5rem;
    font-family: var(--font-latin); font-weight: 700; font-size: .62rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light);
    direction: ltr;
  }

  .main-nav{ display: flex; align-items: center; gap: 2.1rem; }
  .main-nav a{
    font-size: .975rem; font-weight: 500; color: var(--ink-soft);
    position: relative; padding-block: .3rem;
    transition: color .2s var(--ease);
  }
  .main-nav a::after{
    content: ""; position: absolute; inset-inline: 0; bottom: -2px;
    height: 2px; background: var(--emerald);
    transform: scaleX(0); transform-origin: center;
    transition: transform .25s var(--ease);
  }
  .main-nav a:hover{ color: var(--green); }
  .main-nav a:hover::after, .main-nav a.is-active::after{ transform: scaleX(1); }
  .main-nav a.is-active{ color: var(--green); }

  .header-actions{ display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

  .menu-toggle{
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    border: 1px solid var(--hairline-strong); color: var(--green);
  }
  .menu-toggle .icon{ width: 20px; height: 20px; }
  .menu-toggle .icon-close{ display: none; }
  .menu-toggle[aria-expanded="true"] .icon-menu{ display: none; }
  .menu-toggle[aria-expanded="true"] .icon-close{ display: block; }

  .mobile-panel{
    position: fixed; inset-inline: 0; top: var(--header-h);
    background: var(--ivory);
    border-bottom: 1px solid var(--hairline-strong);
    padding: 1.5rem var(--pad-inline) 2rem;
    display: none; flex-direction: column; gap: .25rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    z-index: 99;
    box-shadow: 0 16px 32px -20px rgba(14,59,39,.4);
  }
  .mobile-panel.is-open{ display: flex; }
  .mobile-panel a{
    padding: .95rem .25rem; font-size: 1.05rem; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--hairline);
  }
  .mobile-panel .btn{ margin-top: 1.1rem; justify-content: center; width: 100%; }

  /* ============ HERO ============ */
  .hero{
    position: relative;
    padding-block: clamp(4rem, 10vw, 7.5rem) clamp(4.5rem, 9vw, 7rem);
    overflow: hidden;
    background:
      radial-gradient(circle at 1px 1px, rgba(14,59,39,.09) 1px, transparent 0) 0 0/24px 24px,
      var(--ivory);
  }
  .hero::before{
    content: "";
    position: absolute; inset-inline-start: -8%; top: -14%;
    width: 62vw; max-width: 780px; aspect-ratio: 4/3;
    background: radial-gradient(ellipse at center, rgba(23,105,74,.08), transparent 68%);
    pointer-events: none;
  }
  .hero-ghost-nums{
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    font-family: var(--font-latin); font-weight: 800; color: var(--green);
    font-variant-numeric: tabular-nums;
  }
  .hero-ghost-nums span{ position: absolute; opacity: .05; line-height: 1; direction: ltr; }
  .gn-1{ inset-inline-end: 2%; top: -6%; font-size: clamp(7rem, 20vw, 13rem); }
  .gn-2{ inset-inline-start: 2%; bottom: 3%; font-size: clamp(4.5rem, 11vw, 7rem); }

  .hero-inner{ position: relative; z-index: 1; }
  .hero-grid{
    display: grid; grid-template-columns: minmax(0,1fr) minmax(240px, 380px);
    align-items: center; gap: clamp(2rem, 5vw, 3.5rem);
  }
  .hero-copy{ max-width: 760px; }
  .hero-visual{ justify-self: center; width: 100%; max-width: 400px; }
  .hero-visual svg{ width: 100%; height: auto; display: block; overflow: visible; }

  /* Brand illustration motion — the tree breathes, the gold nodes glow and a
     data pulse runs along the board trace. */
  .sidr-tree{ transform-box: view-box; transform-origin: 220px 330px; animation: sidr-sway 9s ease-in-out infinite; }
  @keyframes sidr-sway{ 0%, 100%{ transform: rotate(-1.1deg); } 50%{ transform: rotate(1.1deg); } }

  .sidr-node-halo{ animation: sidr-glow 4.6s ease-in-out infinite; }
  @keyframes sidr-glow{ 0%, 100%{ opacity: .3; } 50%{ opacity: .85; } }

  .sidr-data{ stroke-dasharray: 12 190; animation: sidr-flow 5s linear infinite; }
  @keyframes sidr-flow{ from{ stroke-dashoffset: 202; } to{ stroke-dashoffset: 0; } }

  .sidr-float{ transform-box: view-box; animation: sidr-drift 7s ease-in-out infinite; }
  @keyframes sidr-drift{ 0%, 100%{ transform: translateY(0); opacity: .45; } 50%{ transform: translateY(-7px); opacity: .9; } }

  @media (prefers-reduced-motion: reduce){
    .sidr-tree, .sidr-node-halo, .sidr-data, .sidr-float{ animation: none; }
  }
  .hero h1{
    font-size: clamp(2.5rem, 6vw, 4.35rem);
    letter-spacing: -.01em;
    margin-bottom: 1.5rem;
  }
  .hero h1 em{ font-style: normal; color: var(--emerald); }
  .hero .lede{
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--ink-soft);
    max-width: 620px;
    margin-bottom: 2.5rem;
  }
  .hero-ctas{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

  /* ============ ABOUT ============ */
  .about{ padding-block: clamp(4.5rem, 9vw, 7rem); }
  .about-grid{
    display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2.5rem, 6vw, 5rem);
    align-items: stretch;
  }
  .about h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 1.4rem; max-width: 480px; }
  .about-lede{ font-size: 1.1rem; max-width: 560px; }

  .about-aside{
    border-inline-start: 1px solid var(--hairline-strong);
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
    display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
  }
  .about-aside-item{ display: flex; align-items: flex-start; gap: .85rem; }
  .about-aside-item .icon{ color: var(--emerald); margin-top: .3rem; width: 17px; height: 17px; }
  .about-aside-item p{ color: var(--ink); font-weight: 500; line-height: 1.6; }

  /* ============ DIVIDER ============ */
  .section-divider{ display: flex; justify-content: center; padding-block: .5rem 0; }
  .section-divider svg{ width: 130px; height: auto; color: var(--emerald); opacity: .4; }

  /* ============ SOLUTIONS / DIRECTORY ============ */
  .solutions{ padding-block: clamp(4.5rem, 9vw, 7rem); }

  .directory{ border-top: 1px solid var(--hairline-strong); }
  .directory-item{
    display: grid; grid-template-columns: 140px 1fr; gap: 2.5rem;
    padding-block: clamp(2.25rem, 4vw, 3.25rem);
    border-bottom: 1px solid var(--hairline-strong);
    transition: background .3s var(--ease);
  }
  .directory-item:hover{ background: var(--card); }

  .directory-idx{ display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .directory-idx .num{
    font-family: var(--font-latin); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2.25rem;
    color: var(--green); direction: ltr; line-height: 1;
  }
  .tag{
    display: inline-flex; align-items: center; gap: .4rem;
    align-self: flex-start;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--emerald);
    background: var(--gold-tint);
    padding: .35rem .7rem; border-radius: var(--radius-sm);
  }
  .tag .icon{ width: 14px; height: 14px; color: var(--emerald); }

  .directory-body h3{ font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .8rem; }
  .directory-body > p{ max-width: 620px; margin-bottom: 1.5rem; font-size: 1.02rem; }

  .feature-list{
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem 2rem;
    margin-bottom: 1.75rem; max-width: 640px;
  }
  .feature-list li{ display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--ink); }
  .feature-list .icon{ width: 14px; height: 14px; color: var(--emerald); margin-top: .3rem; }

  /* ============ WHY STRIP ============ */
  .why{ background: var(--paper); padding-block: clamp(4rem, 8vw, 6rem); }
  .why-grid{
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--hairline-strong);
    border-inline-start: 1px solid var(--hairline-strong);
  }
  .why-item{
    padding: 2rem 1.75rem;
    border-inline-end: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    display: flex; flex-direction: column; gap: 1rem;
  }
  .why-item .icon-wrap{
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--emerald-soft); border: 1px solid var(--emerald-line);
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald);
  }
  .why-item .icon-wrap .icon{ width: 22px; height: 22px; }
  .why-item h3{ font-size: 1.08rem; font-weight: 700; }
  .why-item p{ font-size: .9rem; line-height: 1.7; }

  /* ============ TECH STACK ============ */
  .tech{ padding-block: clamp(4rem, 8vw, 6rem); }

  /* Two lanes running against each other, at the same speed so the pair reads
     as deliberate. Each lane holds three identical sets and travels exactly one
     set-width (33.333%), which is what makes the loop seamless.
     `direction: ltr` on the row is load-bearing: an over-wide block child is
     anchored by its containing block's direction, so inside this RTL page the
     track sat against the RIGHT edge and every leftward step dragged its
     trailing edge into view, opening a gap. An LTR row anchors it at the left,
     the way the maths above assumes. The lane holds no Arabic text. */
  .tech-marquee{ display: grid; gap: 1.9rem; }
  .tech-row{
    overflow: hidden; direction: ltr;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .tech-track{
    display: flex; width: max-content;
    animation: tech-scroll 32s linear infinite;
  }
  .tech-track.is-reverse{ animation-name: tech-scroll-reverse; }
  .tech-marquee:hover .tech-track,
  .tech-marquee:focus-within .tech-track{ animation-play-state: paused; }
  .tech-set{ display: flex; align-items: flex-start; gap: clamp(2rem, 5vw, 3.5rem); padding-inline-end: clamp(2rem, 5vw, 3.5rem); }
  @keyframes tech-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-33.333%); } }
  @keyframes tech-scroll-reverse{ from{ transform: translateX(-33.333%); } to{ transform: translateX(0); } }

  .tech-item{ display: flex; flex-direction: column; align-items: center; gap: .75rem; flex-shrink: 0; width: 92px; }
  .tech-logo{
    width: 52px; height: 52px; flex-shrink: 0;
    filter: drop-shadow(0 6px 14px rgba(14,59,39,.18));
    transition: transform .25s var(--ease);
  }
  .tech-item:hover .tech-logo{ transform: translateY(-3px); }
  .tech-name{ font-size: .85rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

  /* No motion: one static, centred, wrapped row of logos. */
  @media (prefers-reduced-motion: reduce){
    .tech-track{ animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
    .tech-set[aria-hidden="true"]{ display: none; }
    .tech-row + .tech-row{ display: none; }
    .tech-set{ flex-wrap: wrap; justify-content: center; gap: 1.75rem; padding-inline-end: 0; }
  }

  /* ============ INFRASTRUCTURE / SECURITY ============ */
  .infra{ background: var(--paper); padding-block: clamp(4rem, 8vw, 6rem); }
  .infra-grid{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border-top: 1px solid var(--hairline-strong);
    border-inline-start: 1px solid var(--hairline-strong);
  }

  /* ============ CONTACT ============ */
  /* Gold dot-grid on the deep green — the dark-ground counterpart of the
     hero's dot texture. Two interleaved grids (one offset by half a cell)
     give the field depth without competing with the text above it. */
  .contact{
    background:
      radial-gradient(circle at 1px 1px, rgba(228,197,114,.28) 1.2px, transparent 0) 0 0/26px 26px,
      radial-gradient(circle at 1px 1px, rgba(228,197,114,.11) 1px, transparent 0) 13px 13px/26px 26px,
      var(--green);
    color: var(--on-dark);
    padding-block: clamp(4.5rem, 9vw, 7.5rem);
    position: relative; overflow: hidden;
  }
  .contact::before{
    content: "";
    position: absolute; inset-inline-end: -10%; bottom: -20%;
    width: 55vw; max-width: 640px; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(228,197,114,.09), transparent 70%);
    pointer-events: none;
  }
  .contact-circuit{
    position: absolute; inset-inline-start: -4%; bottom: -8%;
    width: min(40vw, 460px); color: var(--on-dark); opacity: .12;
    pointer-events: none;
  }
  .contact-inner{ position: relative; z-index: 1; max-width: 680px; }
  .contact .eyebrow{ color: var(--gold-light); }
  .contact .eyebrow .icon{ color: var(--gold-light); }
  .contact h2{ color: var(--on-dark); font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1.25rem; }
  .contact p.lede{ color: var(--on-dark-soft); font-size: 1.1rem; max-width: 560px; margin-bottom: 2.5rem; }

  .contact-ctas{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

  /* ============ FOOTER ============ */
  .site-footer{
    background: var(--green-deep); color: var(--on-dark-soft);
    padding-block: clamp(3rem, 6vw, 4rem) 2rem;
    border-top: 1px solid var(--hairline-dark);
  }
  .footer-top{
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2.5rem;
    padding-bottom: 2.5rem; border-bottom: 1px solid var(--hairline-dark);
    margin-bottom: 1.75rem;
  }
  .footer-brand .brand{ margin-bottom: .9rem; }
  .footer-logo{ width: 192px; height: auto; max-width: 100%; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
  .footer-brand p{ color: var(--on-dark-soft); max-width: 320px; font-size: .95rem; }

  .footer-links{ display: flex; gap: clamp(2.5rem, 6vw, 5rem); flex-wrap: wrap; }
  .footer-col h4{ color: var(--on-dark); font-size: .85rem; font-weight: 700; letter-spacing: .06em; margin-bottom: 1rem; }
  .footer-col ul{ display: flex; flex-direction: column; gap: .65rem; }
  .footer-col a{ font-size: .92rem; color: var(--on-dark-soft); transition: color .2s var(--ease); }
  .footer-col a:hover{ color: var(--gold-light); }
  .footer-social{ display: flex; gap: .6rem; }
  .footer-social a{
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    border: 1px solid var(--hairline-dark);
    display: flex; align-items: center; justify-content: center;
    color: var(--on-dark);
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  .footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--green); }
  .footer-social .icon{ width: 18px; height: 18px; }

  .footer-bottom{
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem;
    font-size: .85rem; color: var(--on-dark-faint); text-align: center;
  }

  /* ============ RESPONSIVE ============ */
  /* Six nav items plus the bilingual wordmark need the header to breathe
     before the mobile menu takes over at 980px. */
  @media (max-width: 1180px){
    .main-nav{ gap: 1.3rem; }
    .main-nav a{ font-size: .92rem; }
  }

  @media (max-width: 980px){
    .main-nav{ display: none; }
    .menu-toggle{ display: inline-flex; }
    .header-actions .btn-primary span.btn-text{
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .header-actions .btn-primary{ padding: .7rem; }

    .about-grid{ grid-template-columns: 1fr; }
    .about-aside{ border-inline-start: none; border-top: 1px solid var(--hairline-strong); padding-inline-start: 0; padding-top: 2rem; }

    .why-grid{ grid-template-columns: repeat(2, 1fr); }

    .hero-grid{ grid-template-columns: 1fr; }
    .hero-visual{ max-width: 300px; margin-top: .5rem; }
  }

  @media (max-width: 760px){
    .directory-item{ grid-template-columns: 1fr; gap: 1.25rem; }
    .directory-idx{ flex-direction: row; align-items: center; gap: 1rem; }
    .feature-list{ grid-template-columns: 1fr; }
  }

  @media (max-width: 600px){
    :root{ --header-h: 68px; }
    .brand-word .ar{ font-size: 1.35rem; }
    .brand-word .lat{ font-size: 1.05rem; }
    .brand-word .sep{ height: 1rem; }
    .why-grid{ grid-template-columns: 1fr; }
    .hero-ctas .btn, .contact-ctas .btn{ width: 100%; justify-content: center; }
    .hero-ctas, .contact-ctas{ flex-direction: column; align-items: stretch; }
    .footer-top{ flex-direction: column; }
    .header-actions .btn-primary span.btn-text{
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
  }

/* ===================================================================== */
/* ============ SIDR SCHOOLS additions (same tokens and idiom) ========== */
/* ===================================================================== */

/* Hero illustration delays (were inline style="" in the brand site). */
.d1{ animation-delay: .6s; } .d2{ animation-delay: 1.3s; } .d3{ animation-delay: 2s; }
.d4{ animation-delay: 2.6s; } .d5{ animation-delay: 3.2s; } .d6{ animation-delay: 1.8s; }
.d7{ animation-delay: 3.8s; } .d8{ animation-delay: 2.2s; } .d9{ animation-delay: 4s; }

/* Header: a quiet "دخول" beside the gold WhatsApp button; both icons only on narrow screens. */
.header-actions{ gap: .6rem; }
.header-actions .btn-sm{ height: 42px; }
.header-actions .btn-login{ background: var(--ivory); }
@media (max-width: 1180px){
  .header-actions .btn span.btn-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-actions .btn-sm{ width: 42px; padding: 0; justify-content: center; }
}

/* ============ PRICING (in place of "tech") ============ */
.pricing{ padding-block: clamp(4rem, 8vw, 6rem); }
.plans{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--hairline-strong);
  border-inline-start: 1px solid var(--hairline-strong);
}
.plan{
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem 1.75rem;
  border-inline-end: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  transition: background .3s var(--ease);
}
.plan:hover{ background: var(--card); }
.plan.is-featured{ background: var(--card); box-shadow: inset 0 3px 0 var(--gold); }
.plan h3{ font-size: 1.2rem; }
.plan-price{ display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; color: var(--green); }
.plan-price strong{ font-family: var(--font-latin); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-price span{ color: var(--ink-soft); font-size: .95rem; }
.plan .feature-list{ grid-template-columns: 1fr; margin-bottom: 0; flex: 1; }
.plan .btn{ justify-content: center; }
.plans-empty{ padding: 2rem 1.75rem; border-inline-end: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); }

/* ============ FAQ ============ */
.faq{ padding-block: clamp(4rem, 8vw, 6rem); }
.faq-list{ border-top: 1px solid var(--hairline-strong); max-width: 860px; }
.faq-item{ border-bottom: 1px solid var(--hairline-strong); }
.faq-item summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem .25rem; font-weight: 700; color: var(--green); font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .icon{ width: 16px; height: 16px; color: var(--emerald); transition: transform .25s var(--ease); transform: rotate(-90deg); }
.faq-item[open] summary .icon{ transform: rotate(90deg); }
.faq-item p{ padding: 0 .25rem 1.4rem; max-width: 720px; }

/* ============ CONTACT: trial form on the dark ground ============ */
.contact-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-grid .contact-inner{ max-width: none; }
.trial-form{
  background: rgba(247,244,234,.06);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid; gap: 1rem;
  -webkit-user-select: text; user-select: text;
}
.trial-form h3{ color: var(--on-dark); font-size: 1.2rem; }
.trial-form .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.trial-form label{ display: block; font-size: .88rem; font-weight: 600; color: var(--on-dark-soft); margin-bottom: .35rem; }
.trial-form input{
  width: 100%; padding: .8rem .9rem;
  background: rgba(247,244,234,.95); color: var(--green);
  border: 1px solid transparent; border-radius: var(--radius-sm);
}
.trial-form input:focus{ outline: 2px solid var(--gold-light); outline-offset: 1px; }
.trial-form .btn{ justify-content: center; width: 100%; }
.trial-form .note{ font-size: .82rem; color: var(--on-dark-faint); }

/* Phones: WhatsApp always within reach */
.wa-float{
  position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 90;
  display: none; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem; border-radius: 999px;
  background: var(--gold); color: var(--green); font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(14,59,39,.55);
}
.wa-float .icon{ width: 20px; height: 20px; }

@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .trial-form .row{ grid-template-columns: 1fr; }
  .wa-float{ display: inline-flex; }
  .site-footer{ padding-bottom: 5.5rem; }
}
.footer-phone{ margin-top: .9rem; font-size: .92rem; color: var(--on-dark-soft); }
.mobile-panel .btn + .btn{ margin-top: .6rem; }

/* ============ APP STORE BADGES (footer) ============ */
/* Glass store badges: translucent over the footer green, blurred backdrop, top sheen. */
.store-badge{
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; gap: .7rem;
  height: 54px; min-width: 172px; padding: 0 1.1rem;
  direction: ltr;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 48%, rgba(255,255,255,.07) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), 0 12px 26px -16px rgba(0,0,0,.65);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
a.store-badge:hover{
  transform: translateY(-2px);
  border-color: rgba(228,197,114,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.1) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 30px -16px rgba(0,0,0,.75), 0 0 0 3px rgba(228,197,114,.16);
}
a.store-badge:focus-visible{ outline: 2px solid var(--gold-light); outline-offset: 3px; }
.store-glyph{ width: 28px; height: 28px; flex-shrink: 0; }
.store-glyph-apple{ color: #fff; width: 26px; height: 26px; margin-top: -3px; }
.store-text{ display: flex; flex-direction: column; line-height: 1.05; text-align: left; font-family: var(--font-latin); }
.store-text small{ font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.store-text strong{ font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.store-badge.is-soon{ cursor: default; }
.store-badge.is-soon .store-glyph, .store-badge.is-soon .store-text{ opacity: .55; }
.store-soon{
  position: absolute; top: -9px; inset-inline-end: 10px;
  padding: .05rem .5rem; border-radius: 999px;
  background: var(--gold); color: var(--green);
  font-family: var(--font-body); font-size: .68rem; font-weight: 800; direction: rtl;
}
@media (max-width: 600px){
  .store-badges{ width: 100%; }
  .store-badge{ flex: 1 1 160px; justify-content: center; }
}

/* Footer: the full logo image has empty space at its bottom; pull the line under it closer. */
.footer-brand .brand{ margin-bottom: 0; }
.footer-brand > p{ margin-top: -1.1rem; }
/* Space between the tagline and the store badges (their "قريباً" tag sits above them). */
.footer-brand .store-badges{ margin-top: 2.25rem; }

/* ============ THE SIDR SCHOOL APP: tabs per user, real screenshots in phone frames ============ */
.app-showcase{ background: var(--paper); padding-block: clamp(4.5rem, 9vw, 7rem); overflow: hidden; }
.app-tabs{
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.app-tabs[hidden]{ display: none; }
.app-tabs button{
  padding: .7rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: .98rem;
  color: var(--green); background: var(--ivory); border: 1px solid var(--hairline-strong);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.app-tabs button:hover{ border-color: var(--green); }
.app-tabs button[aria-selected="true"]{ background: var(--green); color: var(--on-dark); border-color: var(--green); }
.app-tabs button:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

.app-panel{
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.app-panel + .app-panel{ margin-top: clamp(3rem, 7vw, 5rem); }      /* no-script: panels stacked */
.app-tabs:not([hidden]) ~ .app-panel{ margin-top: 0; }
.app-panel[hidden]{ display: none; }
.app-role{
  display: inline-block; margin-bottom: .8rem; padding: .3rem .75rem; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 700; color: var(--emerald); background: var(--gold-tint);
}
.app-copy h3{ font-size: clamp(1.45rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.app-copy > p{ font-size: 1.04rem; line-height: 1.9; margin-bottom: 1.5rem; }
.app-copy .feature-list{ grid-template-columns: 1fr; margin-bottom: 0; }


.app-highlights{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
  margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hairline-strong);
}
.app-highlight{ display: flex; gap: .85rem; align-items: flex-start; }
.app-highlight .icon-wrap{
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--emerald-soft); color: var(--emerald);
}
.app-highlight .icon{ width: 21px; height: 21px; }
.app-highlight h3{ font-size: 1.02rem; font-weight: 700; margin-bottom: .3rem; }
.app-highlight p{ font-size: .9rem; line-height: 1.7; }

.app-get{
  margin-top: clamp(2.5rem, 6vw, 3.5rem); padding: clamp(1.4rem, 3.5vw, 2rem) clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  background: var(--green); border-radius: var(--radius-md);
}
.app-get p{ color: var(--on-dark); font-weight: 600; font-size: 1.05rem; max-width: 520px; }
.app-get .store-badges{ display: flex; gap: .9rem; flex-wrap: wrap; }

@media (max-width: 980px){
  .app-panel{ grid-template-columns: 1fr; }
  .app-panel .devices{ order: -1; }
  .app-highlights{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .app-tabs{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .app-tabs button{ flex-shrink: 0; padding: .6rem 1.1rem; }
  .app-highlights{ grid-template-columns: 1fr; }
  .app-get{ flex-direction: column; align-items: stretch; text-align: center; }
  .app-get .store-badges{ justify-content: center; }
}

/* Seven header links: keep each on one line and tighten the spacing before the menu takes over. */
.main-nav a{ white-space: nowrap; }
@media (max-width: 1280px){ .main-nav{ gap: 1.4rem; } }

/* App section: the system on a laptop with the parent app on a phone in front of it. */
.devices{
  position: relative; width: 100%; max-width: 900px; margin: 0 auto;
  padding-inline-end: 14%;         /* room for the phone overlapping the laptop's left side (RTL end) */
}
.laptop-screen{
  position: relative; padding: 2.2% 2.2% 3%;
  background: var(--green-deep); border-radius: 18px 18px 6px 6px;
  box-shadow: 0 0 0 1px rgba(16,32,26,.4), 0 40px 70px -40px rgba(16,32,26,.6);
}
.laptop-screen::before{          /* camera dot */
  content: ""; position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: rgba(247,244,234,.25);
}
.laptop-screen img{ width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 3px; background: var(--ivory); }
.laptop-base{
  position: relative; height: 0; padding-top: 3.2%; margin-inline: -7%;
  background: linear-gradient(180deg, #d9d3bf 0%, #b9b29c 70%, #9d967f 100%);
  border-radius: 0 0 22px 22px / 0 0 60% 60%;
  box-shadow: 0 18px 30px -18px rgba(16,32,26,.55);
}
.laptop-base::before{            /* the thumb notch */
  content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 38%; transform: translateX(-50%);
  background: rgba(16,32,26,.18); border-radius: 0 0 10px 10px;
}
.devices .devices-phone{
  position: absolute; inset-inline-end: 0; bottom: 2.25rem; width: 25%;   /* stands in front of the laptop */
}

.devices figcaption{
  display: flex; justify-content: center; gap: 1.5rem 2.5rem; flex-wrap: wrap;
  margin-top: clamp(1.5rem, 4vw, 2.25rem); padding-inline-start: 14%;
  font-size: .95rem; color: var(--ink-soft);
}
.devices figcaption b{ color: var(--green); }
@media (max-width: 600px){
  .devices{ padding-inline-end: 16%; }
  .laptop-screen{ border-radius: 10px 10px 4px 4px; padding: 2.5% 2.5% 3.5%; }
  .devices .devices-phone{ width: 27%; bottom: 3rem; }

  .devices figcaption{ flex-direction: column; align-items: center; gap: .4rem; padding-inline-start: 0; }
}

/* The free plan's button scrolls to the trial form: clear the sticky header and show where to type. */
.trial-form{ scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
.trial-form.is-highlighted{ box-shadow: 0 0 0 3px var(--gold-light); transition: box-shadow .3s var(--ease); }

/* ============ SECTIONS DIRECTORY: icon strip + one animated details panel ============ */
.feature-tabs{
  position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); padding-bottom: .9rem;
  border-bottom: 1px solid var(--hairline-strong);
}
.feature-tabs[hidden]{ display: none; }
.feature-tabs button{
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .9rem .25rem .7rem; border-radius: var(--radius-md);
  color: var(--ink-soft); font-weight: 700; font-size: .92rem;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.feature-tabs button:hover{ color: var(--green); background: var(--card); }
.feature-tabs button:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.feature-tab-icon{
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--emerald-soft); color: var(--emerald);
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease);
}
.feature-tab-icon .icon{ width: 25px; height: 25px; }
.feature-tabs button:hover .feature-tab-icon{ transform: translateY(-3px); }
.feature-tabs button[aria-selected="true"]{ color: var(--green); }
.feature-tabs button[aria-selected="true"] .feature-tab-icon{
  background: var(--green); color: var(--gold-light); transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 22px -12px rgba(14,59,39,.7);
}
/* The gold bar slides to the chosen icon (position set by site.js). */
.feature-tabs-bar{
  position: absolute; bottom: -2px; left: 0; height: 3px; width: 0; border-radius: 3px;
  background: var(--gold); transition: transform .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1);
}
.feature-tabs-bar.is-instant{ transition: none; }

.feature-tabs:not([hidden]) + .directory{ border-top: 0; }
.feature-tabs:not([hidden]) + .directory .directory-item{ border-bottom: 0; background: var(--card); border-radius: var(--radius-md); padding-inline: clamp(1.25rem, 3vw, 2.25rem); }
.directory-item[hidden]{ display: none; }
.directory-item.is-entering{ animation: feature-in .55s cubic-bezier(.22,1,.36,1) both; }
.directory-item.is-entering .directory-idx .num{ animation: feature-num .6s cubic-bezier(.34,1.56,.64,1) both; }
.directory-item.is-entering .feature-list li{ animation: feature-in .5s cubic-bezier(.22,1,.36,1) both; }
.directory-item.is-entering .feature-list li:nth-child(1){ animation-delay: .12s; }
.directory-item.is-entering .feature-list li:nth-child(2){ animation-delay: .19s; }
.directory-item.is-entering .feature-list li:nth-child(3){ animation-delay: .26s; }
.directory-item.is-entering .feature-list li:nth-child(4){ animation-delay: .33s; }
.directory-item.is-entering .feature-list li:nth-child(5){ animation-delay: .40s; }
@keyframes feature-in{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@keyframes feature-num{ from{ opacity: 0; transform: scale(.6); } to{ opacity: 1; transform: none; } }

@media (max-width: 760px){
  .feature-tabs{ grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: .75rem; }
  .feature-tab-icon{ width: 48px; height: 48px; }
  .feature-tab-icon .icon{ width: 22px; height: 22px; }
  .feature-tabs button{ font-size: .85rem; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce){
  .directory-item.is-entering, .directory-item.is-entering *{ animation: none !important; }
  .feature-tabs-bar, .feature-tab-icon{ transition: none; }
}

/* ============ PHONE: reads as a real handset ============ */
.phone{
  position: relative; container-type: inline-size;
  border-radius: 15% / 7%;
  background: linear-gradient(150deg, #3b4a43 0%, #121c17 22%, #0b130f 60%, #26332d 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.16),      /* polished rim */
    inset 0 0 0 4px #0a110d,
    0 0 0 1px rgba(10,17,13,.8),
    0 30px 55px -24px rgba(16,32,26,.65), 0 10px 18px -10px rgba(16,32,26,.45);
}
.phone-btn{ position: absolute; width: 1.6%; min-width: 2px; border-radius: 2px; background: linear-gradient(90deg, #0b130f, #3d4c45); }
.phone-btn-power{ inset-inline-start: -1.2%; top: 25%; height: 13%; }            /* right edge (RTL start) */
.phone-btn-volume{
  inset-inline-end: -1.2%; top: 19%; height: 18%;
  background: linear-gradient(180deg, #2c3a33 0 42%, transparent 42% 58%, #2c3a33 58% 100%);
}
.phone-screen{
  position: relative; overflow: hidden; border-radius: 12% / 5.6%;
  margin: 3.6%;            /* the bezel: % of the phone's own width */
  background: #F6F3E6;   /* the app's ground colour, under the status bar */
}
.phone-screen::after{    /* glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 28%, transparent 42%);
}
.phone-status{
  position: relative; direction: ltr; display: flex; align-items: center; justify-content: space-between;
  height: 0; padding: 4.6% 7.5% 4.6%; color: #10201A;
}
.phone-status b{ font-family: var(--font-latin); font-weight: 700; font-size: clamp(5px, 5.2cqi, 15px); line-height: 1; position: relative; top: -.1em; }
.phone-icons{ width: 17%; height: auto; fill: currentColor; position: relative; top: -.05em; }
.phone-island{
  position: absolute; left: 50%; top: 22%; width: 31%; height: 0; padding-top: 9%;
  transform: translate(-50%, -12%); border-radius: 999px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-screen img{ display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.phone-home{             /* home indicator */
  position: absolute; left: 50%; bottom: 1.3%; width: 34%; height: .6%; min-height: 2px;
  transform: translateX(-50%); border-radius: 999px; background: rgba(16,32,26,.55);
}