/* Protutor site styles: shared by blog, how-to and other content pages.
   Matches the homepage design. */
:root{
  --navy:#212A4F; --navy-2:#2B3563; --navy-3:#161C38;
  --orange:#E08A45; --orange-d:#C96F2E; --orange-t:#D97B34;
  --cream:#FFF4E6; --cream-2:#FDF6EE; --peach:#FBE7D3;
  --gold:#F2B84B; --teal:#2BB3A3;
  --ink:#1B2240; --text:#4A5270; --mute:#7A8199; --line:#EDE6DD;
  --radius:20px; --shadow:0 1px 2px rgba(33,42,79,.05),0 12px 32px -12px rgba(33,42,79,.16);
  --shadow-lg:0 30px 60px -24px rgba(33,42,79,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:#fff;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;letter-spacing:-.02em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
section{position:relative;scroll-margin-top:84px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:13px 22px;border-radius:14px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;white-space:nowrap;cursor:pointer;border:0;font-family:inherit}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--orange-t);color:#fff;box-shadow:0 10px 24px -10px rgba(217,123,52,.8)}
.btn-primary:hover{transform:translateY(-2px);background:#CF7129}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:var(--navy-2)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px);background:var(--cream)}
.btn-outline-light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn-outline-light:hover{box-shadow:inset 0 0 0 1.5px #fff;transform:translateY(-2px)}

/* Eyebrow pills: the owl perches on these */
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-t);background:var(--cream);padding:8px 16px;border-radius:999px;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.owl-here{box-shadow:0 0 0 6px rgba(242,184,75,.18),0 10px 24px -12px rgba(217,123,52,.7)!important;animation:branch-dip .6s var(--ease)}
.eyebrow.owl-here{background:var(--peach)}
@keyframes branch-dip{0%{transform:translateY(0)}35%{transform:translateY(4px)}70%{transform:translateY(-1px)}100%{transform:none}}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s,box-shadow .35s}
.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 rgba(33,42,79,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:25px;letter-spacing:-.04em;color:var(--navy)}
.brand b{font-weight:800}.brand i{font-style:normal;font-weight:600;color:var(--orange-t)}
.nav-owl{width:44px;height:44px;transition:opacity .2s}
.nav-owl.away{opacity:0}
.nav-links{display:flex;gap:6px}
.nav-links a{font-size:15px;font-weight:600;color:var(--text);padding:9px 14px;border-radius:10px;position:relative;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--navy);background:rgba(33,42,79,.05)}
.nav-links a[aria-current="page"]{color:var(--navy)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--orange-t)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .login{font-weight:700;color:var(--navy);padding:10px 14px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:0;background:rgba(33,42,79,.06);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s var(--ease)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-panel{display:none}

/* Page hero */
.page-hero{padding:150px 0 70px;background:radial-gradient(900px 480px at 88% 0%,var(--peach),transparent 60%),radial-gradient(700px 420px at 0% 100%,#EEF0FA,transparent 60%),var(--cream-2);overflow:hidden;text-align:center}
.page-hero h1{font-size:clamp(38px,5.6vw,64px);font-weight:800;letter-spacing:-.045em;margin:20px auto 18px;max-width:820px}
.page-hero h1 .line{display:block;overflow:hidden}
.page-hero h1 .line span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease) forwards}
.page-hero h1 .line:nth-child(2) span{animation-delay:.12s;color:var(--orange-t)}
@keyframes rise{to{transform:none}}
.page-hero .lead{font-size:19px;max-width:620px;margin:0 auto}
.hero-deco{position:absolute;border-radius:50%;pointer-events:none}
.hero-deco.d1{width:220px;height:220px;border:2px dashed rgba(33,42,79,.1);top:110px;left:-60px;animation:spin 50s linear infinite}
.hero-deco.d2{width:14px;height:14px;background:var(--gold);top:210px;right:14%;animation:bob 5s ease-in-out infinite}
.hero-deco.d3{width:10px;height:10px;background:var(--orange);bottom:70px;left:18%;animation:bob 6s -2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.section-head h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;margin-top:14px}
.section-head h2 span{color:var(--orange-t)}
.section-head p{max-width:520px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* CTA band */
.cta{padding:100px 0}
.cta-box{background:linear-gradient(135deg,var(--orange-t),#E99A55 60%,var(--gold));border-radius:32px;padding:68px 40px 60px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-box::before,.cta-box::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14)}
.cta-box::before{width:340px;height:340px;top:-140px;left:-100px}
.cta-box::after{width:260px;height:260px;bottom:-120px;right:-60px}
.cta .eyebrow{background:rgba(255,255,255,.22);color:#fff}
.cta .eyebrow.owl-here{background:rgba(255,255,255,.34)}
.cta h2{color:#fff;font-size:clamp(30px,4.2vw,48px);font-weight:800;margin:20px auto 14px;max-width:720px}
.cta p{color:rgba(255,255,255,.92);font-size:18px;max-width:560px;margin:0 auto 32px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* Footer */
footer{background:var(--navy-3);color:#A9AFC8;padding:80px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
footer .brand{color:#fff;margin-bottom:16px}
footer .brand i{color:#F4A765}
footer p{font-size:15px;max-width:320px}
footer h4{color:#fff;font-size:15px;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer li a{font-size:15px;transition:color .2s}
footer li a:hover{color:var(--gold)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Owl guide */
#owl-guide{position:fixed;left:0;top:0;width:60px;height:60px;z-index:60;pointer-events:none;will-change:transform;opacity:0;transition:opacity .2s}
#owl-guide.visible{opacity:1}
#owl-guide .owl-rot,#owl-guide .owl-squash{width:100%;height:100%}
#owl-guide .owl-rot{transform-origin:50% 60%}
#owl-guide .owl-squash{transform-origin:50% 100%}
#owl-guide svg{width:100%;height:100%;overflow:visible;display:block}
#owl-guide .shadow{position:absolute;left:18%;right:18%;bottom:-3px;height:6px;border-radius:50%;background:rgba(33,42,79,.25);filter:blur(2px);opacity:0;transition:opacity .3s}
#owl-guide.perched .shadow{opacity:1}
.ow-wing{transform-box:view-box;opacity:0;transition:opacity .15s}
.ow-wing-l{transform-origin:19px 35px}.ow-wing-r{transform-origin:45px 35px}
.ow-folded{transition:opacity .15s}
#owl-guide.flying .ow-wing{opacity:1}
#owl-guide.flying .ow-folded{opacity:0}
#owl-guide.flying .ow-wing-l{animation:flap-l .24s ease-in-out infinite alternate}
#owl-guide.flying .ow-wing-r{animation:flap-r .24s ease-in-out infinite alternate}
#owl-guide.flaring .ow-wing-l,#owl-guide.flaring .ow-wing-r{animation-duration:.14s}
@keyframes flap-l{from{transform:rotate(-38deg) scaleY(.9)}to{transform:rotate(22deg) scaleY(1.05)}}
@keyframes flap-r{from{transform:rotate(38deg) scaleY(.9)}to{transform:rotate(-22deg) scaleY(1.05)}}
#owl-guide.landed .owl-squash{animation:land .55s var(--ease)}
@keyframes land{0%{transform:scale(1.08,.86)}40%{transform:scale(.95,1.07)}70%{transform:scale(1.02,.98)}100%{transform:none}}
#owl-guide.perched .ow-body{animation:idle 3.6s ease-in-out infinite;transform-box:view-box;transform-origin:32px 58px}
@keyframes idle{0%,100%{transform:none}50%{transform:rotate(-3deg)}}
.ow-lids{transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
#owl-guide.perched .ow-lids{animation:blink 4.5s 1s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.ow-tassel{transform-box:view-box;transform-origin:44px 12px}
#owl-guide.flying .ow-tassel{animation:sway .3s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-12deg)}to{transform:rotate(18deg)}}
.trail{position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:59;opacity:0}
.feather{position:fixed;left:0;top:0;width:10px;height:5px;border-radius:50% 50% 50% 50%/100% 100% 0 0;pointer-events:none;z-index:59}

/* Responsive */
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .mobile-panel{display:block;position:absolute;top:76px;left:12px;right:12px;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:14px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav.open .mobile-panel{opacity:1;transform:none;pointer-events:auto}
  .nav.open{background:rgba(255,255,255,.95)}
  .mobile-panel a{display:block;padding:12px 14px;border-radius:12px;font-weight:600;color:var(--navy)}
  .mobile-panel a:hover{background:var(--cream-2)}
  .mobile-panel .btn{margin-top:8px;width:100%;color:#fff}
  .page-hero{padding:120px 0 56px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .cta{padding:70px 0}
  .cta-box{padding:52px 20px 44px;border-radius:24px}
  .foot-grid{grid-template-columns:1fr}
  #owl-guide{width:46px;height:46px}
  .hero-deco{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .page-hero h1 .line span{transform:none}
}

/* ---- Protutor site additions ---- */
/* Logo owl blinks and the tassel sways on hover (matches the homepage) */
.brand:hover .ow-lids{animation:brand-blink .45s ease-in-out}
.brand:hover .ow-tassel{animation:brand-sway .9s ease-in-out}
@keyframes brand-blink{0%,100%{transform:scaleY(0)}45%,55%{transform:scaleY(1)}}
@keyframes brand-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(14deg)}65%{transform:rotate(-8deg)}}