/* BrounStack homepage finishing layer */
:root{--focus:#80d8ff;--glass:rgba(7,15,30,.72)}

/* smoother premium interactions */
a,button,.content-card,.float-card,.search-box,.top-nav{transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease,opacity .25s ease,filter .25s ease}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.site-hero{isolation:isolate}
.site-hero:before{opacity:.23;background-size:72px 72px}
.site-hero:after{opacity:.28}

.top-nav{position:sticky;top:0;height:82px;background:linear-gradient(180deg,rgba(3,8,18,.94),rgba(3,8,18,.72));border-bottom-color:rgba(118,147,212,.13);box-shadow:0 12px 35px rgba(0,0,0,.12);backdrop-filter:blur(24px) saturate(130%)}
.brand{gap:12px;font-size:1.35rem;letter-spacing:-.035em}
.brand-logo{width:46px;height:46px}
.brand:hover{transform:translateY(-1px)}
.nav-links a{font-weight:650;color:#c9d2e1}
.nav-links a:hover{color:#91b5ff}
.search-box{background:rgba(7,16,31,.82);border-color:#2d4162;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.search-box:focus-within{border-color:#536fff;box-shadow:0 0 0 3px rgba(91,92,255,.13),0 10px 28px rgba(0,0,0,.16)}
.sign-in:hover{transform:translateY(-2px);border-color:#6079a0;background:rgba(18,31,53,.88)}
.get-started:hover{box-shadow:0 14px 34px rgba(69,65,255,.35)}

.hero-shell{min-height:calc(100vh - 82px);gap:42px;padding-top:42px}
.hero-copy{animation:heroCopyIn .75s cubic-bezier(.2,.75,.25,1) both}
.eyebrow{margin-bottom:24px}
.hero-copy h1{text-wrap:balance;text-shadow:0 8px 38px rgba(0,0,0,.2)}
.hero-description{line-height:1.78;color:#bdc7d6}
.primary-btn,.secondary-btn{position:relative;overflow:hidden;min-height:60px}
.primary-btn:before{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transition:transform .55s ease}
.primary-btn:hover:before{transform:translateX(120%)}
.primary-btn:hover{box-shadow:0 18px 42px rgba(53,68,255,.38)}
.secondary-btn:hover{border-color:#6284b5;background:rgba(15,31,54,.86);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.hero-stats{margin-top:88px}
.hero-stats strong{letter-spacing:-.03em}

.hero-visual{animation:heroVisualIn .9s .08s cubic-bezier(.2,.75,.25,1) both}
.hero-visual>img{right:-1%;bottom:0;width:100%;height:91%;border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.22)}
.float-card{box-shadow:0 20px 48px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.07)}
.float-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 24px 58px rgba(0,0,0,.44),0 0 30px rgba(74,99,255,.10)}
.card-web{animation:floatA 6s ease-in-out infinite}
.card-programming{animation:floatB 7s ease-in-out infinite}
.card-notes{animation:floatB 6.5s .5s ease-in-out infinite}
.card-books{animation:floatA 7.5s .3s ease-in-out infinite}
.hand-note{opacity:.85}
.scroll-cue span{animation:scrollNudge 1.6s ease-in-out infinite}

main{padding-top:76px}
main section{border-color:rgba(122,151,205,.16);box-shadow:0 24px 75px rgba(0,0,0,.19)}
main section:hover{border-color:rgba(113,131,255,.22)}
.content-grid{gap:19px}
.content-card{position:relative;overflow:hidden;min-height:205px}
.content-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(86,77,255,.09),transparent 34%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.content-card:hover:before{opacity:1}
.content-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.content-card a:hover,.social-row a:hover{color:#a9d8ff}
.tag-row span,.social-row a{backdrop-filter:blur(10px)}
.social-row a:hover{transform:translateY(-2px);border-color:rgba(106,129,255,.5);background:rgba(88,76,255,.12)}
.form-group input:focus,.form-group textarea:focus{border-color:#526dff;box-shadow:0 0 0 3px rgba(76,91,255,.12)}
.form-submit:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 14px 30px rgba(70,61,255,.24)}

@keyframes heroCopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroVisualIn{from{opacity:0;transform:translateX(24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes floatA{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes floatB{0%,100%{translate:0 0}50%{translate:0 7px}}
@keyframes scrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media(max-width:1240px){
  .hero-shell{gap:22px}
  .hero-stats{margin-top:62px}
}

@media(max-width:980px){
  .top-nav{height:74px;padding-inline:18px;grid-template-columns:auto 1fr}
  .nav-links{top:74px;left:14px;right:14px;padding:8px;border-radius:16px;background:rgba(4,11,23,.97);box-shadow:0 24px 65px rgba(0,0,0,.5);backdrop-filter:blur(22px)}
  .nav-links a{padding:13px 15px;border-radius:9px}
  .nav-links a:hover{background:rgba(91,88,255,.1)}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .menu-toggle span{transition:transform .2s ease,opacity .2s ease}
  .hero-shell{padding-top:48px;gap:22px}
  .hero-copy{max-width:790px}
  .hero-visual{margin-top:8px}
}

@media(max-width:680px){
  .top-nav{padding-inline:14px}
  .brand{font-size:1.06rem;gap:9px}
  .brand-logo{width:38px;height:38px}
  .hero-shell{width:calc(100% - 28px);padding:42px 0 84px}
  .eyebrow{gap:10px;margin-bottom:18px;font-size:.62rem;letter-spacing:.18em}
  .eyebrow i{width:34px}
  .hero-copy h1{font-size:clamp(3.1rem,15vw,4.55rem);line-height:.96;margin-bottom:19px}
  .hero-topics{font-size:.94rem;line-height:1.8}
  .hero-topics b{padding:0 4px}
  .hero-description{font-size:.96rem;margin-bottom:24px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:11px}
  .primary-btn,.secondary-btn{width:100%;min-height:54px;padding-inline:20px}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:42px}
  .hero-stats div{min-width:0;padding:0 10px;text-align:center}
  .hero-stats div+div{padding-left:10px}
  .hero-stats strong{font-size:1.15rem}
  .hero-stats span{font-size:.64rem;line-height:1.35}
  .hero-visual{height:430px;min-height:430px;margin-top:10px}
  .hero-visual>img{height:87%;width:108%;right:-4%;border-radius:18px}
  .float-card{min-width:165px;max-width:178px;padding:11px 10px;gap:8px;border-radius:12px}
  .float-card strong{font-size:.72rem}.float-card small{font-size:.58rem}.float-card i{display:none}.card-icon{font-size:1.35rem}
  .card-web{left:0;top:8%}.card-programming{left:0;top:46%}.card-notes{right:0;top:27%}.card-books{right:0;top:58%}
  .hand-note{display:none}
  .hero-mantra,.hero-tagline{display:none}
  .scroll-cue{bottom:13px;font-size:.55rem}
  main{width:calc(100% - 22px);padding-top:38px}
  main section{padding:28px 20px;border-radius:18px}
  .content-grid{grid-template-columns:1fr}
  .content-card{min-height:0}
  .form-grid{grid-template-columns:1fr}
}

@media(max-width:430px){
  .brand span{max-width:118px;overflow:hidden;text-overflow:ellipsis}
  .hero-copy h1{font-size:3rem}
  .hero-stats{gap:0}
  .hero-stats div{padding-inline:6px}.hero-stats div+div{padding-left:6px}
  .hero-visual{height:390px;min-height:390px}
  .float-card{min-width:145px;max-width:155px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}

/* Fixed desktop navigation geometry */
@media(min-width:901px){
  .top-nav{height:82px!important;min-height:82px!important;padding:0 24px!important;grid-template-columns:225px minmax(0,1fr) 225px!important;gap:0!important}
  .brand{justify-self:start!important;gap:12px!important;font-size:1.18rem!important;line-height:1!important;transform:none!important}
  .brand-logo{width:44px!important;height:44px!important}
  .nav-links{justify-self:center!important;gap:28px!important}
  .nav-links a{display:inline-flex!important;align-items:center!important;min-height:82px!important;padding:0!important;font-size:.9rem!important;line-height:1!important;font-weight:650!important}
  .nav-links a.active:after{display:none!important}
  .nav-tools{justify-self:end!important;max-width:225px!important;gap:10px!important}
  .search-box,.get-started{display:none!important}
  .sign-in{display:inline-flex!important;height:40px!important;padding:0 15px!important;font-size:.82rem!important}
}