/* LogMonks — products page.
   Hover rules are written with higher specificity than their base rule so they
   always win, matching the design's `style-hover` behaviour. */

/* ---------- Base ---------- */

html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;background:#0b0b0d;color:#f4f2ec;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:#ffa62b}
*{box-sizing:border-box}
::selection{background:#ffa62b;color:#111}

@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-18px)}}

.c-blue{color:#007bff}

/* ---------- Cursor follower ---------- */

.cursor{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#fff;pointer-events:none;z-index:9999;mix-blend-mode:difference;opacity:0;transition:width .25s,height .25s,opacity .3s;will-change:transform}

/* ---------- Header (inverts over whatever is behind it) ---------- */

.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,4vw,48px);mix-blend-mode:difference;color:#fff}
.site-header__logo{height:30px;display:block}
.site-nav{display:flex;gap:clamp(16px,2.5vw,32px);align-items:center;font-size:15px;font-weight:500;white-space:nowrap}
.site-nav__link:hover{color:#fff;opacity:.7}
.site-nav__cta{border:1.5px solid #fff;color:#fff;padding:9px 18px;border-radius:999px;transition:all .2s}
.site-nav__cta:hover{background:#fff;color:#000}

/* ---------- Product dots ---------- */

.dots{position:fixed;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;mix-blend-mode:difference}
.dots__dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.45;transition:all .25s;display:block}
.dots__dot:hover{opacity:1;transform:scale(1.5)}

/* ---------- Mobile tab bar (shown ≤760px) ---------- */

.tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:none;gap:4px;padding:6px;background:rgba(11,11,13,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;box-shadow:0 12px 40px -12px rgba(0,0,0,.5);border:1px solid #1c1c20}
.tabbar__link{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:14px;transition:all .2s}
.tabbar__link,.tabbar__link:hover{color:#a9a7a1}
.tabbar__link--home:active{background:#1c1c20;color:#007bff}
.tabbar__link--approach:active{background:#1c1c20;color:#ffa62b}
.tabbar__link--products:active{background:#1c1c20;color:#ff4f3e}
.tabbar__link--idea:active{background:#1c1c20;color:#34c759}
.tabbar__icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}

/* ---------- Hero ---------- */

.hero{min-height:100vh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;padding:120px clamp(20px,4vw,48px) clamp(40px,6vh,72px);position:relative;overflow:hidden;background:#0b0b0d}
.hero__mark{position:absolute;right:-10vw;top:8vh;width:clamp(360px,50vw,820px);opacity:.92;animation:floaty 9s ease-in-out infinite;pointer-events:none}
.hero__inner{position:relative;max-width:1400px}
.hero__eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#ffa62b;margin-bottom:22px;animation:rise .7s both}
.hero__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(52px,9.4vw,136px);line-height:.9;letter-spacing:-.045em;margin:0;max-width:12ch;text-wrap:balance;animation:rise .8s .1s both}
.hero__foot{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;margin-top:clamp(28px,4vh,44px);animation:rise .8s .25s both}
.hero__lede{margin:0;max-width:460px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:#a9a7a1;text-wrap:pretty}
.hero__start{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:#fff}
.hero__start:hover{color:#ffa62b}
.hero__start-icon{width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center}

/* ---------- Product stories (one per screen) ---------- */

.story{min-height:100vh;scroll-snap-align:start;background:var(--bg);color:var(--fg);padding:120px clamp(20px,4vw,48px) clamp(48px,7vh,88px);display:flex;align-items:center;position:relative;overflow:hidden}
.story--sentinel{--bg:#007bff;--fg:#fff}
.story--traffiq{--bg:#ff4f3e;--fg:#fff}
.story--lekka{--bg:#ffa62b;--fg:#111}
.story--anantha{--bg:#34c759;--fg:#111}
.story__no{position:absolute;left:clamp(20px,4vw,48px);top:96px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(120px,26vw,380px);line-height:.8;letter-spacing:-.06em;opacity:.12;user-select:none;pointer-events:none}
.story__grid{max-width:1400px;width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,64px);align-items:center;position:relative}
.story__tag{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:22px}
.story__badge{background:var(--fg);color:var(--bg);padding:5px 10px;border-radius:999px}
.story__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(64px,9vw,150px);line-height:.88;letter-spacing:-.05em;margin:0 0 22px}
.story__headline{margin:0 0 30px;font-size:clamp(19px,1.7vw,26px);line-height:1.35;max-width:560px;text-wrap:pretty;font-weight:500}
.story__text{margin:0 0 34px;font-size:clamp(15px,1.2vw,18px);line-height:1.5;max-width:520px;opacity:.85;text-wrap:pretty}
.story__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;max-width:560px;border-top:1px solid currentColor;padding-top:22px}
.story__fact-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;line-height:1}
.story__fact-k{font-size:13px;opacity:.8;margin-top:6px;line-height:1.35}
.story__shot{aspect-ratio:4/3;border-radius:22px;background:var(--fg);color:var(--bg);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
/* the scroll reveal writes transforms inline, so the hover has to be !important to win */
.story__shot:hover{transform:rotate(0deg) scale(1.02)!important}
.story__stripes{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(128,128,128,.14) 14px 16px)}
.story__shot-label{position:relative;font:13px/1.5 ui-monospace,Menlo,monospace;text-align:center;padding:24px;opacity:.85}

/* ---------- Closing call to action ---------- */

.close{min-height:70vh;scroll-snap-align:start;background:#faf8f3;color:#111;padding:clamp(72px,10vh,140px) clamp(20px,4vw,48px);display:flex;align-items:center}
.close__inner{max-width:1400px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px}
.close__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(48px,7.5vw,128px);line-height:.9;letter-spacing:-.045em;margin:0;max-width:12ch;text-wrap:balance}
.close__side{display:flex;flex-direction:column;gap:20px;max-width:440px}
.close__text{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:#333;text-wrap:pretty}
.close__actions{display:flex;flex-wrap:wrap;gap:14px}

.btn{padding:18px 28px;border-radius:999px;font-weight:600;font-size:17px;transition:all .25s;display:inline-block;white-space:nowrap}
.btn--solid{background:#111;color:#fff}
.btn--solid:hover{background:#007bff;color:#fff;transform:translateY(-3px)}
.btn--outline{border:2px solid #111;padding:16px 26px}
.btn--outline:hover{background:#111;color:#fff}

/* ---------- Footer ---------- */

.site-footer{background:#0b0b0d;color:#a9a7a1;padding:32px clamp(20px,4vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px}

/* ---------- Mobile ---------- */

@media (max-width:760px){
  html{scroll-snap-type:none}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .site-header{padding:14px 20px}
  .site-nav,.dots{display:none}
  .tabbar{display:flex}

  .hero{min-height:100svh;padding:90px 20px 40px}
  .hero__mark{right:-30vw;top:6vh;width:110vw;opacity:.5}
  .hero__title{font-size:clamp(44px,13.5vw,60px);max-width:none}

  .story{padding:88px 20px 48px;min-height:auto}
  .story__no{font-size:44vw;top:64px;left:auto;right:-4vw}
  .story__grid{grid-template-columns:1fr;gap:26px}
  .story__name{font-size:clamp(52px,16vw,72px)}
  .story__headline{font-size:20px}
  .story__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .story__fact-v{font-size:22px}
  /* image first, flat; !important beats the reveal's inline transform */
  .story__shot{order:-1;transform:none!important;aspect-ratio:16/10;border-radius:16px}

  .close{padding:64px 20px;min-height:auto}
  .close__title{font-size:clamp(40px,12vw,56px)}
  .close__actions .btn{flex:1;text-align:center;white-space:nowrap}
}

/* ---------- Print ---------- */

@media print{
  @page{margin:.5cm}
  *,*::before,*::after{
    print-color-adjust:exact;-webkit-print-color-adjust:exact;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    animation-delay:-99s!important;animation-duration:.001s!important;
    animation-iteration-count:1!important;animation-fill-mode:both!important;
    animation-play-state:running!important;transition-duration:0s!important
  }
}