/* ---------- Theme ---------- */
:root {
  --bg: #000000;            /* pure black */
  --fg: #ffffff;
  --muted: #9a9a9f;
  --tab: #2a2a2d;           /* gray brand tab */
  --line: #2a2a2d;
  --bar-bg: #1a1919;        /* NEW: top bar color */
  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-color: #222;
  --secondary-text: #777;
  --cta-background: #f5f9ff;
  --border-color: #e3edf8;
  --accent-color: #4da3ff;
  --section-bg: #0e0e10;  
  --card-bg: #1c1c1f;  
  
}

[data-theme="light"] {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #6b6b70;
  --tab: #e6e6e9;
  --line: #e0e0e3;
  --bar-bg: #ffffff;
  --btn-bg: #000000;
  --btn-fg: #ffffff;
  --bar-getstartedbutton-bg:#1486ff;
  --section-bg: #f5f5f7;   
  --card-bg: #ffffff; 
}

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

[data-theme="dark"] {
    --text-color: #f5f5f5;
    --secondary-text: #aaa;
    --cta-background: #171b22;
    --border-color: #292f38;
    --accent-color: #5eafff;
    --bar-bg :#000000;
    --bar-getstartedbutton-bg:#1486ff;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  transition: background .3s, color .3s;
}

.bluetext {
    color: rgb(61, 177, 245);
    text-shadow: 0 0 8px rgba(166, 178, 194, 0.493);
}

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  transition: background .4s ease, border-color .4s ease;
}

.innerbar {
  max-width: 1232px;
  margin: 0 auto;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition:
    max-width .45s cubic-bezier(.22, 1, .36, 1),
    transform .45s cubic-bezier(.22, 1, .36, 1),
    border-radius .45s cubic-bezier(.22, 1, .36, 1),
    padding .45s cubic-bezier(.22, 1, .36, 1),
    background .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

/* floating state */
.bar.scrolled {
  background: transparent;
  border-bottom-color: transparent;
  pointer-events: none;            /* don't block clicks in the empty gutters */
}

.bar.scrolled .innerbar {
  max-width: min(860px, calc(100% - 24px));
  padding: 0 24px;
  transform: translateY(12px);    /* transform = no layout shift */
  border-radius: 20px;
  background: color-mix(in srgb, var(--bar-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(2px) saturate(1.2);
  backdrop-filter: blur(2px) saturate(1.2);
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  pointer-events: auto;
}

[data-theme="light"] .bar.scrolled .innerbar {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}

@media (prefers-reduced-motion: reduce) {
  .bar, .innerbar { transition-duration: 1ms; }
}



.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
}

.brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


.themetoggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.themetoggle button {
  background: none;
  border: 1px solid transparent;
  color: var(--fg);
  width: 44px;
  height: 36px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
}


.barright {
  display: grid;
  align-items: center;
  justify-items: end;
}

.barright > * {
  grid-area: 1 / 1;   /* stack both in the same spot */
  transition:
    opacity .3s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1),
    visibility .3s;
}

.bargetstarted {
  opacity: 0;
  visibility: hidden;   /* keeps it out of tab order and clicks while hidden */
  transform: scale(.9);
  background: var(--bar-getstartedbutton-bg);
  color: whitesmoke;
  text-decoration: none;
  font-size: 14px;
  font-weight:600;
  padding: 11px 22px;
  border-radius: 16px;
  white-space: nowrap;
  
  
}
.bargetstarted:hover { 
  filter: brightness(.8);
 }

.bar.scrolled .bargetstarted {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.bar.scrolled .themetoggle {
  opacity: 0;
  visibility: hidden;
  transform: scale(.9);
}

.bar.scrolled .innerbar {
  padding: 0 12px 0 24px
}

[data-theme="dark"]  #buttondarkmode,
[data-theme="light"] #buttonlightmode {
  border-color: var(--fg);
}





.animatedTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    line-height: 1;
}

.topTitle {
    display: block;
}

.sharedWord {
    position: relative;
    display: inline-block;
    margin-left: 0.28em;
    white-space: nowrap;
    transition: color 0.5s ease;
}

.sharedWord.strike {
    color: var(--muted);
    font-style: italic;
}

.sharedWord::after {
    content: "";
    position: absolute;
    left: 0;
    top: 58%;
    width: 0;
    height: 3px;
    background: rgb(238, 75, 75);
    transform: translateY(-50%);
    transition: width 0.5s ease;
}

.sharedWord.strike::after {
    width: 100%;
}

.calendarWord {
    display: block;
    margin-top: 12px;
    transition: color 0.4s ease, opacity 0.2s ease;
}

.calendarWord.blue {
    color: rgb(61, 177, 245);
    text-shadow: 0 0 8px rgba(166, 178, 194, 0.493);
}

/* ---------- Hero ---------- */
.hero {
  align-self: stretch;
  text-align: center;
  padding: 48px 20px 0;
}

.madeby {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 15px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

h1 {
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.sub {
  margin-top: 24px;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 600;
}

.heroActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 33px;
  margin-bottom: 2px;
}

.getstartedbutton {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  font-size: 18px;
  padding: 16px 32px;
  border-radius: 999px;
  transition: filter 0.2s;
}
.getstartedbutton:hover {
  filter: brightness(0.8);
}
.downloadbutton {
  display: inline-block;
  background: var(--tab);
  color: var(--fg);
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: 18px;
  padding: 16px 32px;
  border-radius: 999px;
  transition: background 0.2s;
}
.downloadbutton:hover {
  background: var(--line);
}

.heroActions { flex-wrap: wrap; }   /* stack on narrow phones instead of overflowing */

.subtextforstartedbutton {
  font-size: 14px;
  color: var(--muted);
  margin-top: 20px;
  margin-bottom: 15px;
}



/* scroll reveal */

.showcase {
  --p: 0;
  --W: 1000px; --H: 600px;   /* full image size on screen */
  --fx: .6;    --fy: .6;     /* crop size as a fraction of the full image */
  height: calc(100vh - 66px + 400px);   /* 400px of scrolling = the expansion (raise = more wheel clicks) */
  position: relative;
  margin-bottom: max(0px, var(--over, 0px));  /* space for the image hanging below the screen */
}

.sticky {
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reveal {
  position: relative;
  width:  calc(var(--W) * (var(--fx) + (1 - var(--fx)) * var(--p)));
  height: calc(var(--H) * (var(--fy) + (1 - var(--fy)) * var(--p)));
  border-radius: calc(20px + 18px * (1 - var(--p)));
  overflow: hidden;
  margin-top: 24px;          /* always sits below the text, never over it */
  flex-shrink: 0;
}

.reveal img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}

.reveal .full {
  width: var(--W); height: var(--H);
}

/* the crop sits on top and fades out as the reveal starts */
.reveal .crop {
  width:  calc(var(--W) * var(--fx));
  height: calc(var(--H) * var(--fy));
  opacity: calc(1 - var(--p) * 10);
}

.reveal-mobile-overlay {
  display: none;
}

@media (max-width: 700px) {
  .hero { padding: 32px 16px 0; }

  .reveal {
    cursor: pointer;
  }

  .reveal img {
    transition: filter 0.35s ease, opacity 0.35s ease;
  }

  .reveal:not(.unblurred) img {
    filter: blur(4px);   /* was 10px */
    transform: translate(-50%, -50%) scale(1.05);
}

  .reveal.unblurred img {
    filter: blur(0px);
  }

  .reveal-mobile-overlay {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: #a1a1aa;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding: 16px;
    letter-spacing: 0.01em;
    pointer-events: none;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(2px);
  }

  [data-theme="light"] .reveal-mobile-overlay {
    background: rgba(240, 240, 242, 0.5);
    color: #52525b;
  }

  .reveal.unblurred .reveal-mobile-overlay {
    opacity: 0;
    visibility: hidden;
  }
}

.itsphattogithub {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.itsphattogithub:hover {
  color: #3b82f6;
}


/* Image Modal / Lightbox */
.imageModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 16px;
}
.imageModal.show {
  opacity: 1;
  pointer-events: auto;
}
.imageModal img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.imageModal.show img {
  transform: scale(1);
}
.imageModalClose {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: none;
  font-size: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
  z-index: 10000;
}
.imageModalClose:hover {
  background: rgba(236, 53, 53, 0.35);
}

.showcaseGap {
  height: 120px;
}

@media (max-width: 700px) {
  .showcaseGap { height: 64px; }
}

.howBand {
  background: var(--section-bg);
  margin-top: 25px;        /* space above the band */
  margin-bottom: 80px;  /* space below the band, before the footer */
  transition: background .3s;
  /* optional rounded, floating look: */
  /* margin-inline: 16px; border-radius: 32px; */
}

.howSteps {
  --steps: 3;
  position: relative;
  height: calc(100vh + (var(--steps) - 1) * 70vh);
  /* background removed from here */
}

.howCard {
  background: var(--card-bg);  
  border: none;               
  transition: background .3s;
}

.howSticky {
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  overflow: hidden;
}

.howStepsTitle {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  margin-bottom: 48px;
  padding: 0 16px;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.howTrack {
  display: flex;
  gap: 24px;
  /* first card lines up with the title / logo edge */
  padding-left: calc((100vw - min(100vw, 1232px)) / 2 + 16px);
  padding-right: 16px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  touch-action: pan-y;      /* vertical page scroll still works, horizontal swipe is ours */
  user-select: none;
  cursor: grab;
}

.howCard img { 
   -webkit-user-drag: none;
   pointer-events: none;
   }

@media (prefers-reduced-motion: reduce) {
  .howTrack { transition: none; }
}


.howCard {
  flex: 0 0 min(900px, 82vw);
  height: min(560px, calc(100vh - 66px - 160px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 0;
  background: var(--bar-bg);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  transition: background .3s, border-color .3s;
}

.howCard h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.howCard p {
  margin-top: 10px;
  max-width: 460px;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.5;
  color: var(--muted);
}

.howCard img{
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  margin: 24px 0;
  object-fit: contain;
  border-radius: 16px;
}
.howCard img.light{ display: none; }
[data-theme="light"] .howCard img.dark{ display: none; }
[data-theme="light"] .howCard img.light{ display: block; }

@media (max-width: 700px) {
  .howCard { padding: 28px 16px 0; border-radius: 22px; }
}

.faqItem {
  border-top: 1px solid var(--line);
}
.faqItem:last-child {
  border-bottom: 1px solid var(--line);
}

.faqItem summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
}
.faqItem summary::-webkit-details-marker { display: none; }

.faqNum {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}

.faqTitle {
  flex: 1;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}

.faqItem:not([open]) .faqTitle { color: var(--muted); }
.faqItem summary:hover .faqTitle,
.faqItem summary:hover .faqNum { color: var(--fg); }

/* plus that turns into a minus */
.faqIcon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.faqIcon::before,
.faqIcon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: var(--fg);
  
  
}
.faqIcon::after { transform: rotate(90deg); }
.faqItem[open] .faqIcon::after { transform: rotate(0deg); }

.faqItem p {
  padding: 0 4px 26px 54px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  animation: faqIn 0.45s cubic-bezier(0.55, 0, 1, 0.45);
}

@keyframes faqIn {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .howItWorks { padding: 56px 16px 40px; }
  .faqItem p { padding-left: 4px; }
}


/* ---------- End CTA ---------- */
.EndCTAwrapper {
  max-width: 760px;
  margin: 40px auto 60px;
  padding: 40px 20px;
  text-align: center;
}

.EndCTAtitle {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 24px;
}

/* both phrases share one grid cell, so the layout never jumps */
.swap {
  display: grid;
  justify-items: center;
}

.swapFrom,
.swapTo {
  grid-area: 1 / 1;
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}

/* "Start Sharing." waits below, hidden */
.swapTo {
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  color: rgb(61, 177, 245);   /* matches your hero's blue "Calend"; delete for plain text */
}

/* after the swap */
.swap.done .swapFrom {
  opacity: 0;
  transform: translateY(-0.5em);
  filter: blur(6px);
}

.swap.done .swapTo {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .swapFrom, .swapTo { transition: none; }
}

.EndCTAbutton {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  font-size: 18px;
  padding: 16px 32px;
  border-radius: 999px;
  transition: filter 0.2s;
}

.EndCTAbutton:hover {
  filter: brightness(0.8);
}

.EndCTAsubtitle {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 30px;
}


.bottompart {
    display: block;
    width: 100%;
}

.legalandinfomation {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.FooterBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    
}

.FooterBar a {
    color: #777;
    text-decoration: none;
    transition: color 0.2s ease;
}

.FooterBar a:hover {
    color: #4da3ff;
    text-decoration: underline;
}


.barlinks {
  display: flex;
  gap: 20px;
  margin-left: auto;   
  margin-right: 20px;
  font-size: 14px;
}

.barlinks a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.barlinks a:hover {
  color: var(--fg);
}

@media (max-width: 520px) {
  .barlinks { display: none; }
}

/* ---------- Signature ---------- */
.legalandinfomation{ position: relative; min-height: 180px; }
.signature{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
  pointer-events: none;
}
.signature img{ display: none; height: 140px; width: auto; }
[data-theme="dark"]  .sig-dark,
[data-theme="light"] .sig-light{ display: block; }

@media (max-width: 900px){
  .legalandinfomation{ flex-direction: column; min-height: 0; padding: 10px 0 24px; }
  .signature{ position: static; transform: none; margin-top: 12px; }
  .signature img{ height: 72px; }
}