/* ==========================================================================
   LYNNQ Technologies, corporate site
   Canonical tokens from LYNNQ_Brand_Identity.html. Match exactly.
   Layout uses logical properties so an Arabic RTL build only needs dir="rtl".
   ========================================================================== */

:root{
  /* Brand palette */
  --navy:      #1B2A4A;
  --midnight:  #0C1628;
  --gold:      #C9A84C;
  --teal:      #2D8B8B;
  --off:       #F7F8FA;

  /* Supporting neutrals (from the canonical file) */
  --ink:       #1D2433;
  --grey:      #5A6472;
  --line:      #E2E8F0;
  --line-dark: rgba(255,255,255,.12);
  --muted-dark:#9AA3B2;

  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 40px);

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

/* ------------------------------- Reset --------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Sora', system-ui, -apple-system, Arial, sans-serif;
  color:var(--ink);
  background:var(--off);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-inline-size:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Accessible skip link */
.skip-link{
  position:absolute;
  inset-block-start:-100px;
  inset-inline-start:16px;
  background:var(--navy);
  color:var(--off);
  padding:10px 16px;
  border-radius:8px;
  z-index:1000;
  transition:inset-block-start .2s var(--ease);
}
.skip-link:focus{ inset-block-start:16px; }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:3px;
}

/* ------------------------------ Header --------------------------------- */
.site-header{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-block-end:1px solid transparent;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  block-size:72px;
}

.brand-lockup{ display:inline-flex; align-items:center; gap:11px; color:var(--off); }
.brand-mark{ flex:none; color:inherit; }
.brand-mark .mark-lines line{ stroke:currentColor; }
.brand-word{
  font-weight:700;
  font-size:19px;
  letter-spacing:.22em;
  padding-inline-start:2px;
}

.site-nav{ display:flex; align-items:center; gap:clamp(18px, 3vw, 36px); }
.site-nav a{
  font-size:14.5px;
  font-weight:500;
  color:var(--off);
  letter-spacing:.01em;
  opacity:.82;
  transition:opacity .2s var(--ease);
}
.site-nav a:hover{ opacity:1; }

/* Solid state after scroll */
.site-header.scrolled{
  background:rgba(247,248,250,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-block-end-color:var(--line);
}
.site-header.scrolled .brand-lockup{ color:var(--navy); }
.site-header.scrolled .brand-word{ color:var(--navy); }
.site-header.scrolled .site-nav a{ color:var(--navy); opacity:.72; }
.site-header.scrolled .site-nav a:hover{ opacity:1; }

/* ------------------------------- Hero ---------------------------------- */
.hero{
  position:relative;
  background:var(--midnight);
  color:var(--off);
  min-block-size:100svh;
  display:flex;
  align-items:center;
  padding-block:120px 96px;
  overflow:hidden;
}
.hero-inner{ text-align:center; position:relative; z-index:2; }

.hero-lockup{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  margin-block-end:clamp(20px, 3vw, 30px);
}
.hero-mark{ margin-block-end:14px; position:relative; inline-size:clamp(72px, 9vw, 92px); block-size:auto; }

/* Full-bleed connected-earth canvas, horizon at the base of the hero */
.hero-globe{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  opacity:0;
  transition:opacity 1.2s var(--ease);
  pointer-events:none;
}
.hero-globe.globe-ready{ opacity:1; }
.hero-word{
  font-weight:700;
  font-size:clamp(22px, 3.2vw, 30px);
  letter-spacing:.3em;
  padding-inline-start:.3em; /* optical balance for tracking */
  line-height:1;
}
.hero-sub{
  font-weight:400;
  font-size:clamp(9px, 1.4vw, 11px);
  letter-spacing:.56em;
  padding-inline-start:.56em;
  color:var(--muted-dark);
  margin-block-start:10px;
}

.hero-eyebrow{
  font-size:clamp(11px, 1.5vw, 13px);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--gold);
  margin-block-end:18px;
}

.hero-heading{
  font-weight:700;
  font-size:clamp(32px, 6.2vw, 62px);
  line-height:1.08;
  letter-spacing:-.02em;
  max-inline-size:16ch;
  margin-inline:auto;
  color:var(--off);
  text-wrap:balance;
}
.hero-line{
  margin-block-start:24px;
  margin-inline:auto;
  max-inline-size:52ch;
  font-size:clamp(15px, 2vw, 18px);
  color:var(--muted-dark);
}

.hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-block-start:36px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:13px 26px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-primary{ background:var(--gold); color:var(--midnight); }
.btn-primary:hover{ background:#d8b967; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--off); border-color:rgba(255,255,255,.28); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--off); transform:translateY(-2px); }

/* Scroll cue */
.scroll-cue{
  position:absolute;
  inset-block-end:26px;
  inset-inline:0;
  margin-inline:auto;
  inline-size:24px;
  block-size:38px;
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:14px;
  display:flex;
  justify-content:center;
  padding-block-start:7px;
}
.scroll-cue span{
  inline-size:3px; block-size:8px;
  border-radius:2px;
  background:var(--gold);
  animation:cue 1.7s var(--ease) infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translateY(-3px)} 40%{opacity:1} 100%{opacity:0;transform:translateY(9px)} }

/* ------------------------------ Sections ------------------------------- */
.section{ padding-block:clamp(72px, 11vw, 128px); }
.section-light{ background:var(--off); }

.eyebrow{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--navy);
  margin-block-end:18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
/* Tail-node motif before the eyebrow, echoing the mark's teal tail */
.eyebrow::before{
  content:"";
  inline-size:7px; block-size:7px;
  border-radius:50%;
  background:var(--teal);
  flex:none;
}
.eyebrow-light{ color:#7FB0B0; }
.eyebrow-light::before{ background:var(--teal); }

.section-heading{
  font-weight:600;
  font-size:clamp(23px, 3.4vw, 34px);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--navy);
  max-inline-size:22ch;
  text-wrap:balance;
}

/* Cards */
.cards{
  margin-block-start:clamp(40px, 6vw, 64px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 3vw, 34px);
}
.card{
  background:#FFF;
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(24px, 3vw, 34px);
  position:relative;
}
.card h3{
  font-size:18px;
  font-weight:600;
  color:var(--navy);
  margin-block-end:12px;
}
.card p{ font-size:15px; color:var(--grey); }

/* --------------------------- Work / flagship --------------------------- */
.section-work{ background:#FFF; border-block:1px solid var(--line); }

.feature{
  margin-block-start:clamp(36px, 5vw, 56px);
  background:var(--navy);
  border-radius:20px;
  padding:clamp(30px, 5vw, 60px);
  display:grid;
  grid-template-columns:1.55fr .9fr;
  align-items:center;
  gap:clamp(28px, 4vw, 56px);
  color:var(--off);
}
.feature-kicker{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold);
  margin-block-end:14px;
}
.feature-name{
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:700;
  font-size:clamp(28px, 5vw, 42px);
  letter-spacing:-.01em;
  line-height:1;
  color:var(--off);
}
.feature-dot{ color:var(--gold); font-weight:400; }
.feature-copy{
  margin-block-start:18px;
  font-size:clamp(15px, 1.9vw, 16.5px);
  color:#C6CEDC;
  max-inline-size:52ch;
}
.feature-link{
  margin-block-start:26px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  color:var(--gold);
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.feature-link svg{ transition:transform .2s var(--ease); }
.feature-link:hover{ color:#d8b967; gap:11px; }
.feature-link:hover svg{ transform:translate(2px,-2px); }
.feature-mark{ display:flex; justify-content:center; }

/* ----------------------------- What's next ----------------------------- */
.next-inner{ max-inline-size:760px; }
.next-copy{
  margin-block-start:22px;
  font-size:clamp(16px, 2.2vw, 19px);
  color:var(--grey);
  max-inline-size:60ch;
}

/* ------------------------------- Contact ------------------------------- */
.section-contact{ background:var(--midnight); color:var(--off); }
.contact-inner{ max-inline-size:760px; }
.contact-heading{ color:var(--off); }
.contact-copy{
  margin-block-start:20px;
  font-size:clamp(16px, 2.2vw, 18.5px);
  color:var(--muted-dark);
  max-inline-size:52ch;
}
.contact-email{
  display:inline-block;
  margin-block-start:26px;
  font-size:clamp(20px, 3.2vw, 28px);
  font-weight:600;
  color:var(--off);
  padding-block-end:5px;
  border-block-end:2px solid var(--gold);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.contact-email:hover{ color:var(--gold); }

/* ------------------------------- Footer -------------------------------- */
.site-footer{ background:var(--midnight); color:var(--muted-dark); padding-block:34px; border-block-start:1px solid var(--line-dark); }
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.footer-word{ font-weight:700; font-size:16px; letter-spacing:.2em; color:var(--off); display:inline-flex; align-items:baseline; gap:9px; }
.footer-word-sub{ font-weight:400; font-size:9.5px; letter-spacing:.42em; color:var(--muted-dark); }
.footer-legal{ display:inline-flex; align-items:center; gap:12px; font-size:13px; }
.footer-sep{ color:rgba(255,255,255,.25); }

/* ------------------------------- Motion -------------------------------- */
/* Content is fully visible by default. Motion only applies when JS adds
   .motion to <html> (i.e. reduced-motion is not requested). */

.motion .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.motion .reveal.in{ opacity:1; transform:none; }

/* Constellation draw-in */
.motion .js-constellation .mark-lines line{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw .7s var(--ease) forwards;
}
.motion .js-constellation .mark-node{
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center;
  animation:pop .45s var(--ease) forwards;
}
.motion .js-constellation .mark-lines line:nth-child(1){ animation-delay:.15s; }
.motion .js-constellation .mark-lines line:nth-child(2){ animation-delay:.27s; }
.motion .js-constellation .mark-lines line:nth-child(3){ animation-delay:.39s; }
.motion .js-constellation .mark-lines line:nth-child(4){ animation-delay:.51s; }
.motion .js-constellation .mark-lines line:nth-child(5){ animation-delay:.63s; }
.motion .js-constellation .mark-lines line:nth-child(6){ animation-delay:.75s; }
.motion .js-constellation .mark-lines line:nth-child(7){ animation-delay:.9s; }
.motion .js-constellation .mark-node:nth-child(n){ animation-delay:.5s; }
.motion .js-constellation .mark-tail{ animation-delay:1.05s; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ 0%{transform:scale(0)} 70%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 860px){
  .cards{ grid-template-columns:1fr; }
  .feature{ grid-template-columns:1fr; text-align:start; }
  .feature-mark{ order:-1; justify-content:flex-start; }
}
@media (max-width: 560px){
  .site-nav{ gap:16px; }
  .site-nav a{ font-size:13.5px; }
  .brand-word{ font-size:17px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 380px){
  .site-nav a:not(:last-child){ display:none; } /* keep only Contact on very small screens */
}

/* ----------------------------- RTL support ----------------------------- */
/* Logical properties above handle most flipping automatically.
   For an Arabic build: set <html lang="ar" dir="rtl"> and, if desired,
   swap the body font-family to an Arabic face while keeping the palette. */
[dir="rtl"] .hero-word,
[dir="rtl"] .hero-sub,
[dir="rtl"] .brand-word{ padding-inline-start:0; }