/* ==========================================================================
   Tide — Ocean Breathing • Marketing site
   Palette: deep ocean teal, soft cyan, warm sand, cream
   Type: DM Sans (body) + Fraunces (display)
   ========================================================================== */

:root {
    --tide-ink: #0F2230;
    --tide-deep: #0B3D5C;
    --tide-teal: #2DB7C3;
    --tide-cyan: #6FD4DB;
    --tide-sand: #F4E9D8;
    --tide-cream: #FAF7F2;
    --tide-mist: #E8F4F7;
    --tide-shell: #FFFFFF;
    --tide-muted: #5A6B7B;
    --tide-border: #E6E2DA;
    --tide-shadow-soft: 0 20px 60px -20px rgba(11, 61, 92, 0.18);
    --tide-shadow-card: 0 8px 28px -12px rgba(11, 61, 92, 0.14);
    --tide-radius-sm: 12px;
    --tide-radius-md: 20px;
    --tide-radius-lg: 28px;
    --tide-gradient-brand: linear-gradient(135deg, #0B3D5C 0%, #2DB7C3 100%);
    --tide-gradient-mist: linear-gradient(180deg, #FAF7F2 0%, #E8F4F7 55%, #C7E5EB 100%);
    --tide-gradient-deep: linear-gradient(160deg, #0B3D5C 0%, #143C5A 50%, #0F2230 100%);
}

/* Base ----------------------------------------------------------------------*/
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100vw; }
body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--tide-ink);
    background-color: var(--tide-cream);
    font-feature-settings: 'ss01' on, 'cv11' on;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Tame Bootstrap row gutters on small screens to avoid horizontal overflow */
@media (max-width: 575.98px) {
    .row { --bs-gutter-x: 1.25rem; }
    .row.g-5, .row.g-4 { --bs-gutter-x: 1.5rem; }
    .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* Ensure long words wrap on narrow viewports */
h1, h2, h3, p { overflow-wrap: break-word; word-wrap: break-word; }
h1, h2, h3, h4, h5, h6, .display, .home-title, .sec-title {
    font-family: 'Fraunces', 'DM Sans', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--tide-ink);
    line-height: 1.15;
}
.display-1, .display-2, .display-3 { font-weight: 500; }
p { color: var(--tide-muted); }
.text-muted { color: var(--tide-muted) !important; }
a { color: var(--tide-deep); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--tide-teal); }

/* Focus ring (visible, not shadow-only) -------------------------------------*/
:focus-visible {
    outline: 2px solid var(--tide-teal);
    outline-offset: 3px;
    border-radius: 6px;
}
button:focus, .btn:focus { box-shadow: none; }

/* Containers ----------------------------------------------------------------*/
.section { padding: 110px 0; position: relative; }
@media (max-width: 768px) { .section { padding: 70px 0; } }
.section-eyebrow {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tide-teal);
    margin-bottom: 1rem;
    font-weight: 500;
}
.sec-title { font-size: clamp(2rem, 4vw, 2.85rem); }
.lead-soft { font-size: 1.1rem; color: var(--tide-muted); max-width: 620px; margin-left: auto; margin-right: auto; }

/* Navbar --------------------------------------------------------------------*/
.tide-nav {
    background: transparent;
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
    padding: 1rem 0;
}
.tide-nav.sticky {
    background: rgba(250, 247, 242, 0.85);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 1px 0 rgba(11, 61, 92, 0.06);
    padding: .6rem 0;
}
.tide-nav .nav-link {
    color: var(--tide-ink);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem 1rem !important;
    position: relative;
}
.tide-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .25rem;
    height: 2px;
    background: var(--tide-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.tide-nav .nav-link:hover::after,
.tide-nav .nav-link.active::after { transform: scaleX(1); }
.tide-brand {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--tide-deep) !important;
    letter-spacing: -0.01em;
}
.tide-brand-mark {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tide-gradient-brand);
    display: inline-block;
    vertical-align: middle;
    margin-right: .55rem;
    box-shadow: inset 0 -8px 18px rgba(255,255,255,.35), 0 4px 10px rgba(11,61,92,.25);
    animation: tide-pulse 4s ease-in-out infinite;
}

/* Buttons -------------------------------------------------------------------*/
.btn-tide {
    background: var(--tide-gradient-brand);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .85rem 1.7rem;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: 0 10px 28px -12px rgba(45, 183, 195, 0.55);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-tide:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -12px rgba(45, 183, 195, 0.7);
    filter: brightness(1.05);
}
.btn-ghost {
    background: transparent;
    color: var(--tide-ink);
    border: 1px solid var(--tide-border);
    border-radius: 999px;
    padding: .85rem 1.5rem;
    font-weight: 500;
    transition: all .25s ease;
}
.btn-ghost:hover {
    border-color: var(--tide-deep);
    color: var(--tide-deep);
    background: var(--tide-shell);
}

/* App-store style buttons ---------------------------------------------------*/
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: var(--tide-ink);
    color: #fff;
    border-radius: 14px;
    padding: .65rem 1.25rem .65rem 1rem;
    min-width: 188px;
    transition: transform .25s ease, background .25s ease;
}
.store-btn:hover { color: #fff; transform: translateY(-2px); background: #1c3243; }
.store-btn .label-small { font-size: .65rem; letter-spacing: .14em; opacity: .75; text-transform: uppercase; line-height: 1; }
.store-btn .label-big { font-size: 1.05rem; font-weight: 500; line-height: 1.1; font-family: 'Fraunces', serif; }
.store-btn svg { flex: 0 0 26px; height: 30px; }

/* Hero ----------------------------------------------------------------------*/
.tide-hero {
    position: relative;
    padding-top: 160px;
    padding-bottom: 80px;
    background: var(--tide-gradient-mist);
    overflow: hidden;
    isolation: isolate;
}
.tide-hero::before {
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 120px;
    background: linear-gradient(180deg, transparent, var(--tide-cream));
    pointer-events: none;
    z-index: 1;
}
.tide-hero .container { position: relative; z-index: 2; }
.tide-hero h1 {
    font-size: clamp(1.85rem, 5vw + 0.5rem, 3.85rem);
    margin-bottom: 1.25rem;
    color: var(--tide-ink);
    letter-spacing: -0.02em;
}
.tide-hero h1 em {
    font-style: italic;
    background: var(--tide-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tide-hero .hero-sub {
    font-size: 1.15rem;
    color: var(--tide-muted);
    max-width: 540px;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(11, 61, 92, .08);
    border-radius: 999px;
    padding: .4rem 1rem .4rem .55rem;
    font-size: .85rem;
    color: var(--tide-deep);
    font-weight: 500;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(8px);
}
.hero-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tide-teal);
    box-shadow: 0 0 0 4px rgba(45,183,195,.2);
    animation: tide-pulse 2.4s ease-in-out infinite;
}

/* Breathing rings behind the phone -----------------------------------------*/
.breath-stage {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1.05;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.breath-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(45, 183, 195, .45);
    opacity: 0;
    animation: breath-out 7.5s ease-in-out infinite;
}
.breath-ring.r1 { width: 60%; height: 60%; animation-delay: 0s; }
.breath-ring.r2 { width: 60%; height: 60%; animation-delay: 1.5s; }
.breath-ring.r3 { width: 60%; height: 60%; animation-delay: 3s; }
.breath-ring.r4 { width: 60%; height: 60%; animation-delay: 4.5s; }

@keyframes breath-out {
    0%   { transform: scale(.85); opacity: 0; }
    25%  { opacity: .85; }
    100% { transform: scale(1.95); opacity: 0; }
}
@keyframes tide-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: .8; }
}

/* Phone mockup --------------------------------------------------------------*/
.phone-frame {
    position: relative;
    width: 280px;
    aspect-ratio: 9 / 19.5;
    background: #0a141e;
    border-radius: 46px;
    padding: 14px;
    box-shadow:
        0 30px 80px -20px rgba(11, 61, 92, 0.45),
        0 8px 24px -12px rgba(11, 61, 92, 0.25),
        inset 0 1px 0 rgba(255,255,255,.08);
    z-index: 2;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.phone-frame::before {
    content: '';
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    width: 92px; height: 24px;
    background: #0a141e;
    border-radius: 14px;
    z-index: 3;
}
.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: var(--tide-gradient-mist);
    position: relative;
}
.phone-frame:hover { transform: translateY(-4px); }
.phone-frame.tilt-l { transform: rotate(-6deg); }
.phone-frame.tilt-r { transform: rotate(6deg); }

/* Placeholder screen content ------------------------------------------------*/
.screen-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #0B3D5C 0%, #143C5A 60%, #2DB7C3 100%);
    color: rgba(255,255,255,.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.screen-placeholder::before {
    content: '';
    position: absolute;
    top: -30%; left: -20%;
    width: 140%; height: 80%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.15) 0%, transparent 60%);
    pointer-events: none;
}
.screen-placeholder .ph-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .65rem;
    margin-bottom: .5rem;
    opacity: .7;
}
.screen-placeholder .ph-label {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-style: italic;
    color: #fff;
    opacity: .9;
}
.screen-placeholder .ph-circle {
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.35);
    margin-bottom: 1.25rem;
    position: relative;
    animation: breath-pulse 6s ease-in-out infinite;
}
.screen-placeholder .ph-circle::before,
.screen-placeholder .ph-circle::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
}
.screen-placeholder .ph-circle::after { inset: -28px; opacity: .5; }
@keyframes breath-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* Section: trust strip ------------------------------------------------------*/
.trust-strip {
    padding: 2rem 0;
    border-top: 1px solid var(--tide-border);
    border-bottom: 1px solid var(--tide-border);
    background: var(--tide-shell);
}
.trust-strip .stat { text-align: center; padding: .5rem 0; }
.trust-strip .stat .n {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: var(--tide-deep);
    font-weight: 500;
    line-height: 1;
}
.trust-strip .stat .l {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tide-muted);
    margin-top: .35rem;
}

/* Feature cards -------------------------------------------------------------*/
.feature-card {
    background: var(--tide-shell);
    border: 1px solid var(--tide-border);
    border-radius: var(--tide-radius-md);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    position: relative;
    overflow: hidden;
}
.feature-card:hover {
    border-color: rgba(45,183,195,.4);
    box-shadow: var(--tide-shadow-card);
    transform: translateY(-3px);
}
.feature-card .f-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--tide-mist);
    color: var(--tide-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}
.feature-card h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.feature-card p { font-size: .95rem; margin: 0; }

/* Step cards (How it works) -------------------------------------------------*/
.step-card {
    text-align: left;
    padding: 1.5rem;
    border-radius: var(--tide-radius-md);
    background: var(--tide-shell);
    border: 1px solid var(--tide-border);
    height: 100%;
    position: relative;
}
.step-card .step-n {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--tide-teal);
    margin-bottom: .5rem;
}
.step-card h4 { font-size: 1.15rem; margin-bottom: .5rem; }

/* Screenshot gallery (Swiper) ----------------------------------------------*/
.shots-section {
    background: var(--tide-shell);
    padding: 110px 0;
    overflow: hidden;
}
.shots-swiper { padding: 50px 0 60px; }
.shots-swiper .swiper-slide {
    width: auto;
    display: flex;
    justify-content: center;
    transition: transform .5s ease, opacity .5s ease;
    opacity: .55;
    transform: scale(.85);
}
.shots-swiper .swiper-slide-active { opacity: 1; transform: scale(1); }
.shots-swiper .swiper-slide-prev,
.shots-swiper .swiper-slide-next { opacity: .8; transform: scale(.92); }

.shots-swiper .phone-frame { width: 240px; }
.shots-swiper .swiper-pagination-bullet {
    background: var(--tide-deep);
    opacity: .25;
    width: 10px; height: 10px;
}
.shots-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--tide-teal);
    width: 28px;
    border-radius: 5px;
    transition: width .3s ease;
}

/* Testimonials --------------------------------------------------------------*/
.t-card {
    background: var(--tide-shell);
    border: 1px solid var(--tide-border);
    border-radius: var(--tide-radius-md);
    padding: 2.25rem;
    height: 100%;
    position: relative;
}
.t-card::before {
    content: '"';
    position: absolute;
    top: 12px; left: 22px;
    font-family: 'Fraunces', serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--tide-mist);
    z-index: 0;
}
.t-card .t-body {
    position: relative;
    z-index: 1;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--tide-ink);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.t-card .t-by {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--tide-muted);
    font-size: .92rem;
}
.t-card .t-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tide-gradient-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 500;
}

/* CTA / Download section ----------------------------------------------------*/
.cta-deep {
    background: var(--tide-gradient-deep);
    color: #fff;
    border-radius: var(--tide-radius-lg);
    padding: 70px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-deep::before, .cta-deep::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,183,195,.25), transparent 70%);
    pointer-events: none;
}
.cta-deep::before { width: 420px; height: 420px; top: -180px; left: -120px; }
.cta-deep::after { width: 360px; height: 360px; bottom: -160px; right: -80px; }
.cta-deep h2, .cta-deep p { color: #fff; position: relative; z-index: 1; }
.cta-deep p { color: rgba(255,255,255,.78); }

/* FAQ -----------------------------------------------------------------------*/
.faq-item {
    background: var(--tide-shell);
    border: 1px solid var(--tide-border);
    border-radius: var(--tide-radius-sm);
    margin-bottom: .75rem;
    overflow: hidden;
}
.faq-item .faq-q {
    width: 100%;
    background: none;
    border: none;
    padding: 1.1rem 1.4rem;
    text-align: left;
    font-weight: 500;
    color: var(--tide-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.02rem;
}
.faq-item .faq-q::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--tide-teal);
    transition: transform .25s ease;
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-item .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .4s ease;
    padding: 0 1.4rem;
    color: var(--tide-muted);
}
.faq-item.is-open .faq-a {
    max-height: 360px;
    padding: 0 1.4rem 1.4rem;
}

/* Footer --------------------------------------------------------------------*/
.tide-footer {
    background: var(--tide-ink);
    color: rgba(255,255,255,.7);
    padding: 80px 0 32px;
}
.tide-footer h5 { color: #fff; font-family: 'DM Sans', sans-serif; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.25rem; font-weight: 600; }
.tide-footer a { color: rgba(255,255,255,.7); }
.tide-footer a:hover { color: var(--tide-cyan); }
.tide-footer .footer-brand {
    font-family: 'Fraunces', serif;
    color: #fff;
    font-size: 1.5rem;
}
.tide-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 60px;
    padding-top: 24px;
    font-size: .85rem;
    color: rgba(255,255,255,.5);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}
.social-row a {
    display: inline-flex;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.social-row a:hover { background: var(--tide-teal); border-color: var(--tide-teal); color: #fff; }

/* Wave divider --------------------------------------------------------------*/
.wave-divider {
    display: block;
    width: 100%;
    height: 60px;
    color: var(--tide-cream);
}

/* Reduced motion ------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Small screens -------------------------------------------------------------*/
@media (max-width: 991px) {
    .tide-hero { padding-top: 130px; }
    .breath-stage { margin-top: 3rem; max-width: 360px; }
    .phone-frame { width: 240px; }
    .cta-deep { padding: 50px 30px; }
}
@media (max-width: 575px) {
    .phone-frame { width: 220px; }
    .shots-swiper .phone-frame { width: 200px; }
    .tide-nav .nav-link::after { display: none; }
}