/* ============================================================
   OPTION SPECTRUM — DIGITAL BUSINESS CARD
   assets/css/style.css
   ------------------------------------------------------------
   Section map:
     1. Brand tokens (colors / fonts / spacing)
     2. Base + accessibility
     3. Top bar
     4. Hero + profile
     5. Action buttons
     6. Ecosystem cards
     7. Ask AI placeholder
     8. Footer + mobile sticky bar
     9. Motion
   ============================================================ */

/* 1. BRAND TOKENS ------------------------------------------------ */
:root{
  --os-blue:        #2A8FCE;
  --os-blue-dark:   #1F6FA3;
  --os-red:         #ED2024;
  --os-ink:         #172233;
  --os-ink-soft:    #4B5768;
  --os-paper:       #FBFAF7;
  --os-paper-dim:   #F1EFE9;
  --os-line:        #E4E1D8;
  --os-white:       #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body:    'Hanken Grotesk', sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 10px 30px -12px rgba(23, 34, 51, 0.18);
  --shadow-card-hover: 0 18px 40px -14px rgba(23, 34, 51, 0.26);
}

/* 2. BASE --------------------------------------------------------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--os-ink);
  background: var(--os-paper);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room for mobile sticky bar */
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--os-ink);
  letter-spacing: -0.01em;
}
a{ color: var(--os-blue); text-decoration: none; }
p{ color: var(--os-ink-soft); }

.skip-link{
  position: absolute; top: 0; left: 0; z-index: 2000;
  background: var(--os-ink); color: #fff; padding: .6rem 1rem;
}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .os-card-btn:focus-visible{
  outline: 3px solid var(--os-blue);
  outline-offset: 2px;
}

/* 3. TOP BAR -------------------------------------------------------- */
.os-topbar{
  background: var(--os-ink);
  color: var(--os-white);
}
.os-topbar__brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.os-topbar__brand i{ color: var(--os-blue); margin-right: .4rem; }
.os-topbar__tag{
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .04em;
}

/* 4. HERO ------------------------------------------------------------ */
.os-hero{
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 3rem;
  background:
    radial-gradient(700px 300px at 85% -10%, rgba(42,143,206,.10), transparent),
    var(--os-paper);
  border-bottom: 1px solid var(--os-line);
}

.os-avatar-ring{
  width: 132px; height: 132px;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 210deg, var(--os-blue), var(--os-red), var(--os-blue));
  flex: none;
}
.os-avatar-ring__inner{
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--os-paper-dim);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 4px solid var(--os-paper);
}
.os-avatar-ring__inner img{ width: 100%; height: 100%; object-fit: cover; }
.os-avatar-ring__inner i{ font-size: 3rem; color: var(--os-ink-soft); }

.os-hero__name{
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: .15rem;
}
.os-hero__title{
  font-weight: 600;
  color: var(--os-blue-dark);
  margin-bottom: .1rem;
}
.os-hero__subtitle{
  color: var(--os-ink-soft);
  margin-bottom: .5rem;
}
.os-badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--os-line);
  background: var(--os-white);
  color: var(--os-ink-soft);
}
.os-badge + .os-badge{ margin-left: .4rem; }
.os-hero__location{
  font-size: .9rem;
  color: var(--os-ink-soft);
}
.os-hero__location i{ color: var(--os-red); }

/* Signature element: fanned card stack — a literal "digital business card"
   motif echoing the 3 brand cards below. Desktop only; decorative. */
.os-cardstack{
  position: relative;
  width: 240px;
  height: 160px;
  margin: 0 auto;
}
.os-cardstack__card{
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform .35s ease;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  color: #fff;
}
.os-cardstack__card:nth-child(1){ background: var(--os-ink); transform: rotate(-9deg) translate(-14px, 6px); z-index: 1; }
.os-cardstack__card:nth-child(2){ background: var(--os-red); transform: rotate(4deg) translate(10px, -2px); z-index: 2; }
.os-cardstack__card:nth-child(3){ background: var(--os-blue); transform: rotate(-2deg) translate(-2px, -10px); z-index: 3; }
.os-cardstack:hover .os-cardstack__card:nth-child(1){ transform: rotate(-16deg) translate(-30px, 12px); }
.os-cardstack:hover .os-cardstack__card:nth-child(2){ transform: rotate(9deg) translate(24px, 2px); }
.os-cardstack:hover .os-cardstack__card:nth-child(3){ transform: rotate(-1deg) translate(0, -16px); }

/* 5. ACTION BUTTONS ---------------------------------------------------- */
.os-actions{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1.75rem;
}
@media (max-width: 575.98px){
  .os-actions{ grid-template-columns: repeat(2, 1fr); }
}
.os-action-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .9rem .5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .85rem;
  border: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.os-action-btn i{ font-size: 1.3rem; }
.os-action-btn:hover{ transform: translateY(-3px); color:#fff; }
.os-action-btn--blue{ background: var(--os-blue); box-shadow: 0 8px 20px -8px rgba(42,143,206,.55); }
.os-action-btn--blue:hover{ background: var(--os-blue-dark); }
.os-action-btn--red{ background: var(--os-red); box-shadow: 0 8px 20px -8px rgba(237,32,36,.45); }
.os-action-btn--red:hover{ background: #c9181c; }
.os-action-btn--outline{
  background: var(--os-white);
  color: var(--os-ink);
  border: 1.5px solid var(--os-line);
}
.os-action-btn--outline:hover{ border-color: var(--os-blue); color: var(--os-blue); }

/* 6. ECOSYSTEM CARDS ---------------------------------------------------- */
.os-section-title{
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
.os-section-lede{
  color: var(--os-ink-soft);
  margin-bottom: 2rem;
  max-width: 46ch;
}
.os-card{
  background: var(--os-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--os-line);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.os-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.os-card__icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1rem;
}
.os-card__icon--blue{ background: var(--os-blue); }
.os-card__icon--red{ background: var(--os-red); }
.os-card__title{ font-size: 1.15rem; font-weight: 700; margin-bottom: .15rem; }
.os-card__tagline{
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--os-ink-soft);
  margin-bottom: .75rem;
}
.os-card__desc{ font-size: .92rem; margin-bottom: 1.25rem; flex-grow: 1; }
.os-card__domain{
  font-size: .8rem;
  color: var(--os-ink-soft);
  margin-bottom: .9rem;
  word-break: break-all;
}
.os-card-btn{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--os-ink);
  color: var(--os-ink);
  transition: background .15s ease, color .15s ease;
}
.os-card-btn:hover{ background: var(--os-ink); color: #fff; }

/* 7. ASK AI PLACEHOLDER --------------------------------------------------- */
.os-ai{
  background: var(--os-ink);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.os-ai::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 220px at 10% -20%, rgba(42,143,206,.35), transparent);
  pointer-events: none;
}
.os-ai__soon{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  margin-bottom: 1rem;
}
.os-ai__soon i{ color: var(--os-red); }
.os-ai h2{ color: #fff; }
.os-ai p{ color: rgba(255,255,255,.72); }
.os-ai-input{
  display: flex;
  gap: .6rem;
  margin-top: 1.5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: .5rem .5rem .5rem 1.1rem;
}
.os-ai-input input{
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-body);
}
.os-ai-input input::placeholder{ color: rgba(255,255,255,.45); }
.os-ai-input input:focus{ outline: none; }
.os-ai-input button{
  border: none;
  background: var(--os-blue);
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.os-ai-input button:disabled{ opacity: .6; cursor: not-allowed; }

/* 8. FOOTER + MOBILE STICKY BAR -------------------------------------------- */
.os-footer{
  background: var(--os-paper-dim);
  border-top: 1px solid var(--os-line);
}
.os-footer__social{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--os-ink);
  color: #fff;
  font-size: 1.05rem;
}

.os-mobilebar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--os-white);
  border-top: 1px solid var(--os-line);
  box-shadow: 0 -6px 20px -10px rgba(23,34,51,.25);
  z-index: 1000;
}
.os-mobilebar__btn{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .55rem 0 .6rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--os-ink);
}
.os-mobilebar__btn i{ font-size: 1.15rem; color: var(--os-blue); }
.os-mobilebar__btn:nth-child(2) i{ color: #25D366; } /* WhatsApp brand recognition */
.os-mobilebar__btn:nth-child(3) i{ color: var(--os-red); }

/* 9. MOTION ------------------------------------------------------------- */
.os-fade-up{
  opacity: 0;
  transform: translateY(16px);
  animation: osFadeUp .6s ease forwards;
}
.os-fade-up--d1{ animation-delay: .08s; }
.os-fade-up--d2{ animation-delay: .16s; }
.os-fade-up--d3{ animation-delay: .24s; }
@keyframes osFadeUp{
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .os-fade-up{ animation: none; opacity: 1; transform: none; }
  .os-cardstack__card{ transition: none; }
  html{ scroll-behavior: auto; }
}