/* ─── Planhook Website – Shared Styles ───────────────────────────────────── */
:root {
  --ink: #08090f; --white: #ffffff; --off: #f7f6f3;
  --purple: #4338f5; --purple-d: #2d24c8; --purple-l: #6b62ff;
  --purple-glow: rgba(67,56,245,.18); --muted: #74737a;
  --border: rgba(8,9,15,.08); --r: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Cabinet Grotesk', sans-serif; background: var(--white); color: var(--ink); overflow-x: hidden; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--purple); }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
#ph-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 2rem;
  padding: 16px 60px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: all .3s;
}
#ph-nav.solid { border-color: var(--border); padding: 10px 60px; background: rgba(255,255,255,.98); }
.nav-logo { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav-logo-img { height: 34px; width: auto; object-fit: contain; }
.nav-logo-text { font-family: 'Clash Display', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .06em; color: var(--ink); display: none; }
.nav-logo-text em { color: var(--purple); font-style: normal; }
.nav-links { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--muted); transition: color .2s; position: relative; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--purple); }
.nav-links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--purple); border-radius: 1px; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-login { font-size: 13px; color: var(--muted); transition: color .2s; }
.nav-login:hover { color: var(--ink); }
.nav-cta { background: var(--purple); color: var(--white) !important; padding: 9px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; transition: all .2s; }
.nav-cta:hover { background: var(--purple-d); transform: translateY(-1px); }

/* ─── Common ──────────────────────────────────────────────────────────────── */
.sec-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); font-weight: 600; margin-bottom: 16px; }
.sec-tag::before { content: ''; width: 20px; height: 2px; background: var(--purple); }
h2 { font-family: 'Clash Display', sans-serif; font-size: clamp(34px,3.8vw,56px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
h2 span { color: var(--purple); }
.ph-section { padding: 100px 60px; }
.btn-primary { background: var(--purple); color: var(--white); padding: 14px 32px; border-radius: 100px; font-size: 14px; font-weight: 600; transition: all .25s; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--purple-l); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(67,56,245,.4); color: var(--white); }
.btn-outline { background: transparent; color: var(--white); padding: 14px 32px; border-radius: 100px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.2); transition: all .25s; display: inline-flex; align-items: center; gap: 8px; }
.btn-outline:hover { border-color: rgba(255,255,255,.5); color: var(--white); }

/* ─── Ticker ──────────────────────────────────────────────────────────────── */
.ph-ticker { background: var(--purple); padding: 12px 0; overflow: hidden; display: flex; }
.ph-ticker-track { display: flex; animation: ph-ticker 28s linear infinite; white-space: nowrap; }
.ph-ti { display: inline-flex; align-items: center; gap: 14px; padding: 0 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.75); }
.ph-ti-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); }
@keyframes ph-ticker { to { transform: translateX(-50%); } }

/* ─── Page banner (inner pages) ───────────────────────────────────────────── */
.ph-banner {
  background: var(--ink); padding: 140px 60px 80px;
  position: relative; overflow: hidden; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ph-banner-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ph-banner-orb-1 { width: 500px; height: 500px; background: rgba(67,56,245,.18); top: -150px; right: -80px; }
.ph-banner-orb-2 { width: 300px; height: 300px; background: rgba(107,98,255,.12); bottom: -80px; left: 60px; }
.ph-banner .sec-tag { color: rgba(255,255,255,.35); }
.ph-banner .sec-tag::before { background: rgba(255,255,255,.25); }
.ph-banner h1 { font-family: 'Clash Display', sans-serif; font-size: clamp(44px,5.5vw,80px); font-weight: 700; color: var(--white); line-height: 1; letter-spacing: -.03em; margin-top: 10px; }
.ph-banner h1 span { color: var(--purple-l); }

/* ─── Cards shared ────────────────────────────────────────────────────────── */
.svc-card { background: var(--off); padding: 36px 28px; position: relative; overflow: hidden; transition: all .3s; }
.svc-card:hover { background: var(--ink); }
.svc-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card:hover .svc-title, .svc-card:hover .svc-desc, .svc-card:hover .svc-num { color: var(--white); }
.svc-num { font-family: 'Clash Display',sans-serif; font-size: 12px; color: var(--purple); font-weight: 600; letter-spacing: .1em; margin-bottom: 24px; transition: color .3s; }
.svc-ico { font-size: 34px; margin-bottom: 16px; display: block; }
.svc-title { font-family: 'Clash Display',sans-serif; font-size: 19px; font-weight: 600; margin-bottom: 10px; line-height: 1.2; transition: color .3s; }
.svc-desc { font-size: 13px; line-height: 1.65; color: var(--muted); transition: color .3s; }
.svc-arrow { position: absolute; bottom: 22px; right: 22px; font-size: 18px; color: var(--border); transition: all .3s; }
.svc-card:hover .svc-arrow { color: var(--purple-l); transform: translate(3px,-3px); }

/* Work cards */
.work-card { border-radius: var(--r); overflow: hidden; position: relative; aspect-ratio: 16/10; background: var(--off); transition: transform .3s; cursor: pointer; }
.work-card:hover { transform: scale(1.02); }
.work-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; opacity: .15; }
.work-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,15,.85) 0%, transparent 55%); }
.work-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: 18px 16px; }
.work-client { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-l); margin-bottom: 4px; font-weight: 600; }
.work-name { font-family: 'Clash Display',sans-serif; font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.2; }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-size: 18px; color: white; transition: all .25s; }
.work-card:hover .play-btn { background: var(--purple); border-color: var(--purple); transform: translate(-50%,-50%) scale(1.1); }
.wbg-1 { background: linear-gradient(135deg,#0d0820,#251060); }
.wbg-2 { background: linear-gradient(135deg,#081520,#0c3060); }
.wbg-3 { background: linear-gradient(135deg,#1a0820,#4a1060); }
.wbg-4 { background: linear-gradient(135deg,#0a1a0a,#1a4020); }
.wbg-5 { background: linear-gradient(135deg,#1a0808,#4a1010); }
.wbg-6 { background: linear-gradient(135deg,#080815,#1a1a50); }
.wbg-7 { background: linear-gradient(135deg,#1a1008,#4a3010); }
.wbg-8 { background: linear-gradient(135deg,#0a0a1a,#201060); }
.wbg-9 { background: linear-gradient(135deg,#0f1a08,#2a4010); }

/* ─── Video modal ─────────────────────────────────────────────────────────── */
.ph-video-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ph-video-modal.active { opacity: 1; pointer-events: all; }
.ph-video-inner { position: relative; width: 90vw; max-width: 900px; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.ph-video-inner iframe { width: 100%; height: 100%; border: none; }
.ph-modal-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); border: none; color: white; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.ph-modal-close:hover { background: var(--purple); }

/* ─── Contact form ────────────────────────────────────────────────────────── */
.ph-form { display: flex; flex-direction: column; gap: 16px; }
.ph-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ph-field { display: flex; flex-direction: column; gap: 6px; }
.ph-field label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65); }
.ph-field input, .ph-field select, .ph-field textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 13px 16px; color: var(--white);
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 14px; outline: none; transition: border-color .2s;
}
.ph-field input:focus, .ph-field select:focus, .ph-field textarea:focus { border-color: var(--purple-l); background: rgba(67,56,245,.06); }
.ph-field input::placeholder, .ph-field textarea::placeholder { color: rgba(255,255,255,.22); }
.ph-field select option { background: #1a1060; color: white; }
.ph-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
.ph-form-success { text-align: center; padding: 3rem 1rem; }
.ph-success-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#8b5cf6,#6366f1); color: white; font-size: 2rem; line-height: 72px; margin: 0 auto 1.5rem; box-shadow: 0 0 30px rgba(139,92,246,.5); animation: ph-pop .5s cubic-bezier(.175,.885,.32,1.275); }
.ph-form-success h3 { color: var(--purple-l); font-family: 'Clash Display',sans-serif; font-size: 1.8rem; margin-bottom: .75rem; }
.ph-form-success p { color: rgba(255,255,255,.45); font-size: 1rem; }
@keyframes ph-pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.ph-footer { background: #04040a; padding: 56px 60px 32px; border-top: 1px solid rgba(255,255,255,.06); }
.ph-footer-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 36px; gap: 2rem; }
.ph-footer-logo { font-family: 'Clash Display',sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .06em; color: var(--white); }
.ph-footer-logo span { color: var(--purple-l); }
.ph-footer-tagline { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; letter-spacing: .1em; text-transform: uppercase; }
.ph-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.ph-footer-links a { font-size: 13px; color: rgba(255,255,255,.55); transition: color .2s; }
.ph-footer-links a:hover { color: var(--white); }
.ph-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgb(255, 255, 255); flex-wrap: wrap; gap: 12px; }

/* ─── Reveal animations ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.vis { opacity: 1; transform: translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s}
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  #ph-nav{padding:14px 20px;} #ph-nav.solid{padding:10px 20px;}
  .nav-links{display:none;}
  .ph-section{padding:64px 20px;}
  .ph-banner{padding:120px 20px 60px;}
  .ph-footer{padding:48px 20px 24px;}
  .ph-footer-top{flex-direction:column;}
  .ph-form-row{grid-template-columns:1fr;}
}