/* V3 refinement: one CTA system, accessible motion, contained plane, native LinkedIn dark sample. */
:root {
  --gold:#f2ca68;
  --gold-text:#101b2f;
  --easing:cubic-bezier(.22,1,.36,1);
  --ink-panel:#0d2343;
  --linked-bg:#1b1f23;
  --linked-border:#384049;
  --linked-text:#ecedf0;
  --linked-muted:#b4bac2;
}
html { scroll-behavior:smooth; }
/* No airplane wing, winglet, nose or tail is deliberately placed beyond the viewport. */
.hero { grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); }
.hero-art { width:100%; min-width:0; margin:0; height:475px; position:relative; overflow:visible; }
.hero-art img {
  width:min(100%, 595px);
  max-width:100%;
  top:50%; right:0; left:auto;
  transform:translateY(-50%);
  animation:plane-float-v3 8.5s ease-in-out infinite;
  filter:drop-shadow(0 20px 27px rgba(7,28,68,.24));
}
@keyframes plane-float-v3 {
  0%,100% { transform:translateY(-50%); }
  50% { transform:translateY(calc(-50% - 7px)); }
}
/* Calm, non-changing background tint. Motion and soft elevation carry hover. */
.navigation .nav-pill,
.btn-white,
.plan-btn-dark,
.plan-btn-outline,
.contact-submit {
  appearance:none;
  background:var(--gold);
  background-image:none;
  color:var(--gold-text);
  border:1px solid rgba(255,241,198,.53);
  border-radius:16px;
  box-shadow:0 5px 15px rgba(0,12,36,.18);
  font-weight:750;
  text-decoration:none;
  transition:transform .36s var(--easing),box-shadow .36s var(--easing),border-color .36s ease;
}
.navigation .nav-pill:is(:hover,:focus-visible),
.btn-white:is(:hover,:focus-visible),
.plan-btn-dark:is(:hover,:focus-visible),
.plan-btn-outline:is(:hover,:focus-visible),
.contact-submit:is(:hover,:focus-visible) {
  background:var(--gold);
  background-image:none;
  color:var(--gold-text);
  transform:translateY(-2px);
  box-shadow:0 12px 25px rgba(0,12,36,.22),0 0 0 1px rgba(255,231,169,.12);
  border-color:rgba(255,245,205,.85);
}
.navigation .nav-pill:active,.btn-white:active,.plan-btn-dark:active,.plan-btn-outline:active,.contact-submit:active {
  transform:translateY(0) scale(.985);
  background:var(--gold);
  transition-duration:.12s;
  box-shadow:0 2px 8px rgba(0,12,36,.16);
}
.btn-secondary {
  border:1px solid rgba(240,248,255,.62);
  border-radius:16px;
  background:rgba(10,35,78,.27);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  transition:transform .36s var(--easing),border-color .36s ease,box-shadow .36s var(--easing),background-color .36s ease;
}
.btn-secondary:is(:hover,:focus-visible) {
  background:rgba(10,35,78,.39);
  border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 20px rgba(0,12,36,.17);
}
.btn-secondary:active{transform:translateY(0) scale(.985);transition-duration:.12s}
.btn,.plan-btn,.nav-pill,.contact-submit { min-height:52px; padding-inline:20px; }
.plan-btn {gap:18px; align-items:center; justify-content:space-between; }
.plan-btn span,.btn span {display:inline-flex;transition:transform .36s var(--easing)}
.plan-btn:hover span,.btn:hover span {transform:translateX(3px)}
.navigation .nav-pill {min-height:46px;display:inline-flex;align-items:center;}
.price-card,
.overview-item,
.round-button,
.contact-form,
.field-row input,
.field-row textarea {
  transition:transform .43s var(--easing),box-shadow .43s var(--easing),border-color .32s ease,background-color .32s ease;
}
.price-card:is(:hover,:focus-within) {
  transform:translateY(-5px);
  border-color:rgba(238,215,157,.43);
  box-shadow:0 18px 35px rgba(0,8,30,.22);
}
.price-card.primary-plan:is(:hover,:focus-within) { border-color:var(--gold); }
.overview-item:hover {transform:translateY(-3px);background:rgba(16,43,81,.91);box-shadow:0 19px 33px rgba(0,11,38,.19)}
.round-button {height:46px;width:46px; border-radius:50%; background:rgba(25,55,98,.62); border-color:rgba(204,224,249,.47);}
.round-button:is(:hover,:focus-visible) { transform:translateY(-2px);background:#284771;border-color:rgba(255,255,255,.8); box-shadow:0 10px 16px rgba(0,10,30,.23); }
.round-button:active {transform:scale(.96);transition-duration:.12s}
/* LinkedIn's charcoal post surface, not a white/light-mode card. */
.post-card {
  background:var(--linked-bg);
  border:1px solid var(--linked-border);
  color:var(--linked-text);
  box-shadow:0 20px 48px rgba(0,6,20,.35);
  border-radius:18px;
}
.post-top {border-color:var(--linked-border)}
.post-avatar {background:#3b4653;color:#ecf2fa}
.post-meta strong {color:var(--linked-text);}
.post-meta small,.post-more,.post-topic {color:var(--linked-muted)}
.post-body {color:var(--linked-text);line-height:1.66}
.post-foot {border-top-color:var(--linked-border)}
.sample-tag {color:#d2d8e2}
.sample:not([hidden]) {animation:sample-enter-v3 .48s var(--easing) both}
@keyframes sample-enter-v3 {from{opacity:.28;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
/* Accordion motion: body expands over 440ms, no instant native details snap. */
.faq-list {border-top:1px solid var(--stroke)}
.faq-item{border-bottom:1px solid rgba(218,232,255,.18)}
.faq-trigger {
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:25px 0;min-height:72px;
  cursor:pointer;text-align:left;border:0;background:transparent;color:#f7faff;
  font-size:16px;font-weight:710;line-height:1.4;
  transition:color .26s ease, padding .4s var(--easing);
}
.faq-trigger span {font-size:24px;font-weight:400;color:var(--gold);line-height:1;flex:0 0 24px;text-align:center;transform-origin:center;transition:transform .4s var(--easing)}
.faq-item.is-open .faq-trigger span{transform:rotate(45deg)}
.faq-item.is-open .faq-trigger{padding-bottom:17px}
.faq-trigger:hover{color:#ffe5aa}
.faq-answer { display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .47s var(--easing),opacity .4s ease; }
.faq-item.is-open .faq-answer{grid-template-rows:1fr;opacity:1}
.faq-answer-inner{min-height:0;overflow:hidden}
.faq-answer-inner p {max-width:585px;margin:0;padding:0 0 23px;color:#c8d6eb;font-size:15px;line-height:1.72}
/* Preserve motion that feels alive without constantly distracting. */
.motion-item {opacity:1;transform:none}
/* Motion begins on page entry and stays interruptible on hover. */
.hero-copy h1{animation:hero-copy-enter .7s var(--easing) both}
.hero-lede{animation:hero-copy-enter .75s .08s var(--easing) both}
.hero-actions{animation:hero-copy-enter .75s .15s var(--easing) both}
@keyframes hero-copy-enter{from{opacity:.35;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:1050px) {
 .hero-art{margin:0;height:410px}
 .hero-art img{width:min(100%,535px);right:0;top:50%}
}
@media (max-width:780px) {
 .hero{grid-template-columns:1fr;}
 .hero-art{order:2;margin:0;width:100%;height:clamp(235px,60vw,410px);min-height:235px}
 .hero-art img{width:min(100%,580px);right:0;top:50%}
 .overview{grid-template-columns:1fr}
 .navigation .nav-pill{width:100%;justify-content:center}
}
@media (max-width:530px) {
 .hero-art{height:64vw;min-height:210px;max-height:285px;}
 .hero-art img{right:0;width:100%;top:50%}
 .faq-trigger{padding:22px 0;min-height:68px;font-size:15px}
 .faq-answer-inner p{font-size:14px}
 .price-card:hover,.overview-item:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
 .js-motion-ready .motion-item:not(.motion-entered){opacity:1;transform:none}
 .faq-answer{transition:none}
}