/* HowYouCreate Studio Showcase 2026: visually enhanced, motion-conscious, native CSS. */
html { scroll-padding-top:95px; }
body .site-header {height:76px;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(18,33,48,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:box-shadow .25s,background .25s;}
body .site-header.scrolled {background:rgba(255,255,255,.985);box-shadow:0 12px 45px rgba(5,17,31,.09);}
body .site-header .header-inner {height:76px;max-width:1390px;gap:22px;}
body .site-header .site-logo img {max-width:235px;height:43px;object-fit:contain;}
body .site-header .main-nav {gap:23px;}
body .site-header .main-nav>a,body .site-header .nav-dropdown>a {color:#263346;font-size:14px;font-weight:650;letter-spacing:-.013em;position:relative;transition:color .2s;}
body .site-header .main-nav>a::after,body .site-header .nav-dropdown>a::after {content:"";position:absolute;height:2px;background:#0eaf7b;bottom:1px;left:0;right:100%;transition:right .24s;}
body .site-header .main-nav>a:hover,body .site-header .nav-dropdown>a:hover {color:#02865e;}
body .site-header .main-nav>a:hover::after,body .site-header .nav-dropdown:hover>a::after,body .site-header .main-nav>a.current::after {right:0;}
body .site-header .nav-dropdown-menu {border:1px solid #e2eee8;border-radius:15px;padding:10px;box-shadow:0 24px 52px rgba(9,35,28,.14);min-width:226px;transform:translateY(8px);transition:opacity .2s,visibility .2s,transform .2s;}
body .site-header .nav-dropdown:hover .nav-dropdown-menu,body .site-header .nav-dropdown:focus-within .nav-dropdown-menu {opacity:1;visibility:visible;transform:translateY(0);}
body .site-header .nav-dropdown-menu a {padding:11px 13px;color:#233a38;font-weight:560;}
body .site-header .nav-dropdown-menu a:hover {background:#edfaf3;color:#067858;}
body .site-header .header-cta .btn--primary {background:#0b7756;color:#fff;border:1px solid #0b7756;border-radius:100px;box-shadow:0 7px 20px rgba(8,126,91,.18);padding:12px 21px;font-weight:750;transition:transform .2s,box-shadow .2s,background .2s;}
body .site-header .header-cta .btn--primary:hover {background:#075a43;transform:translateY(-1px);box-shadow:0 12px 24px rgba(8,126,91,.22);}
body .hyc-home-hero.hero {min-height:740px;padding:155px 0 105px;background:radial-gradient(ellipse 38% 50% at 88% 48%,rgba(17,182,131,.17),transparent 100%),radial-gradient(ellipse 52% 60% at 7% 95%,rgba(89,119,180,.17),transparent 100%),linear-gradient(125deg,#0b1423 0%,#122438 57%,#102e30 100%);}
body .hyc-home-hero .container {max-width:1390px;}
body .hyc-home-hero .hero__bg {opacity:.44;}
body .hyc-home-layout.niche-hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,1.04fr);align-items:center;gap:42px;}
body .hyc-home-layout .hero__content {min-width:0;max-width:650px;}
body .hyc-home-hero .hero__badge {background:rgba(173,244,107,.09);border:1px solid rgba(173,244,107,.32);color:#baf884;letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:750;margin-bottom:25px;}
body .hyc-home-hero .hero__badge svg {width:15px;height:15px;}
body .hyc-home-hero .hero__title {font-size:clamp(42px,4.1vw,68px);line-height:1.055;letter-spacing:-.06em;margin:0 0 23px;font-weight:800;max-width:750px;}
body .hyc-home-hero .hyc-accent {color:#b9f77c;}
body .hyc-home-hero .hero__subtitle {font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:#cad8df;max-width:560px;margin-bottom:30px;}
body .hyc-home-hero .btn {border-radius:99px;font-weight:750;min-height:55px;font-size:15px;}
body .hyc-home-hero .btn--primary {background:#b6f676;border-color:#b6f676;color:#12211c;box-shadow:0 14px 32px rgba(169,239,104,.17);}
body .hyc-home-hero .btn--primary:hover {background:#d3ffa0;border-color:#d3ffa0;}
body .hyc-home-hero .btn--white {background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;}
body .hyc-home-hero .btn--white:hover {background:rgba(255,255,255,.1);}
body .hyc-home-hero .niche-benefits {margin-top:31px!important;gap:13px 23px;}
body .hyc-home-hero .niche-benefit {font-size:12px;font-weight:600;}
body .hyc-home-hero .niche-benefit__icon {color:#b6f676;}
body .hyc-home-hero .niche-benefit__icon svg {width:17px;height:17px;}
body .hyc-home-hero .hero__image.hyc-hero-showcase {display:block!important;position:relative;min-width:0;padding:24px 0 16px 4px;}
body .hyc-hero-showcase::before {content:"";position:absolute;inset:4% -4% 0 4%;border-radius:50%;background:radial-gradient(circle,rgba(85,204,167,.24),transparent 62%);filter:blur(32px);pointer-events:none;}
body .hyc-browser {position:relative;border-radius:19px;background:#fff;border:1px solid rgba(255,255,255,.55);overflow:hidden;box-shadow:0 46px 90px rgba(2,10,21,.5),0 0 0 9px rgba(255,255,255,.055);transform:rotate(1.6deg);transition:transform .4s,box-shadow .4s;}
body .hyc-browser:hover {transform:rotate(.25deg) translateY(-4px);box-shadow:0 54px 92px rgba(2,10,21,.54),0 0 0 9px rgba(255,255,255,.07);}
body .hyc-browser-bar {height:42px;display:flex;align-items:center;gap:13px;background:#edf3f4;border-bottom:1px solid #dce5e7;padding:0 15px;}
body .hyc-browser-dots {display:flex;gap:5px;}
body .hyc-browser-dots b {width:8px;height:8px;border-radius:50%;background:#c0cbcd;}
body .hyc-browser-dots b:first-child {background:#ed837b;}
body .hyc-browser-dots b:nth-child(2) {background:#eac764;}
body .hyc-browser-dots b:last-child {background:#71bf9a;}
body .hyc-browser-address {flex:1;background:#fff;border:1px solid #dfe8e9;border-radius:7px;max-width:290px;margin:auto;text-align:center;font:600 11px/24px 'Inter',sans-serif;color:#58716a;}
body .hyc-browser-viewport {position:relative;height:365px;overflow:hidden;background:linear-gradient(145deg,#ecf6f2,#eef4f7);}
body .hyc-browser-viewport iframe {position:absolute;top:0;left:0;width:200%;height:730px;transform:scale(.5);transform-origin:top left;border:0;background:#fff;pointer-events:none;}
body .hyc-browser-bottom {display:flex;align-items:center;justify-content:space-between;padding:13px 17px;background:#fff;gap:12px;}
body .hyc-browser-bottom strong {font-size:13px;letter-spacing:-.01em;color:#20343a;}
body .hyc-browser-bottom a {color:#057d59;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap;}
body .hyc-preview-eyebrow {color:#a8dfc4;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px 10px;}
body .hyc-float-card {position:absolute;z-index:2;border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 35px rgba(0,15,25,.18);background:#fff;border-radius:14px;padding:12px 15px;}
body .hyc-float-card--top {right:-22px;top:38px;animation:hycFloat 5.5s ease-in-out infinite;}
body .hyc-float-card--bottom {left:-38px;bottom:60px;animation:hycFloat 6s ease-in-out -2s infinite;}
body .hyc-float-card strong {font-size:13px;color:#17272c;display:block;}
body .hyc-float-card span {font-size:11px;color:#607375;}
body .hyc-float-card--top::before {content:"●";color:#10b981;font-size:13px;float:left;margin-right:9px;}
body .hyc-preview-switcher {display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0 5px;}
body .hyc-preview-switcher button {background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.23);color:#d3e4e7;border-radius:100px;padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;}
body .hyc-preview-switcher button:hover,body .hyc-preview-switcher button[aria-pressed="true"] {background:#b6f676;color:#123022;border-color:#b6f676;}
body .hyc-home-hero .hyc-hero-showcase,body .hyc-home-hero .hero__content {animation:hycHeroReveal .8s ease both;}
body .hyc-home-hero .hyc-hero-showcase {animation-delay:.16s;}
@keyframes hycHeroReveal {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes hycFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
body .section-header h2 {letter-spacing:-.043em;}
body .section-header p {line-height:1.75;}
body .features-grid .feature {border-radius:20px;transition:transform .3s,box-shadow .3s;}
body .features-grid .feature:hover {transform:translateY(-5px);box-shadow:0 24px 50px rgba(6,38,29,.09);}
body .pricing-card {border-radius:22px;border-color:#e3ede9;box-shadow:0 10px 33px rgba(24,46,45,.035);transition:transform .26s,box-shadow .26s;}
body .pricing-card:hover {transform:translateY(-8px);box-shadow:0 28px 54px rgba(11,72,51,.13);}
body .pricing-card--featured {border:2px solid #0fa777;box-shadow:0 20px 48px rgba(16,185,129,.13);}
body .industry-card {border-radius:16px;border-color:#e3ebe9;}
body .industry-card:hover {box-shadow:0 19px 40px rgba(8,66,48,.12);}
body .cta-box {background:linear-gradient(120deg,#086d54,#139d79 55%,#104c53);border-radius:26px;box-shadow:0 28px 54px rgba(6,102,78,.2);}
@media (max-width:1180px) {
  body .hyc-home-layout.niche-hero {grid-template-columns:minmax(0,1fr) minmax(370px,.97fr);gap:25px;}
  body .hyc-home-hero .hero__title {font-size:clamp(37px,4.3vw,54px);}
  body .hyc-float-card--top {right:-5px;}
  body .hyc-float-card--bottom {left:-10px;}
}
@media (max-width:1024px) {
  body .site-header .main-nav.active {top:76px;background:rgba(255,255,255,.99);box-shadow:0 20px 40px rgba(13,35,27,.12);padding:17px 25px;}
  body .site-header .main-nav {gap:0;}
  body .site-header .nav-dropdown-menu {box-shadow:none;transform:none;border:none;padding:4px 0 10px 12px;}
  body .site-header .nav-dropdown:hover .nav-dropdown-menu {display:none;}
  body .site-header .nav-dropdown.active .nav-dropdown-menu {display:block;}
  body .hyc-home-layout.niche-hero {grid-template-columns:1fr;gap:36px;}
  body .hyc-home-hero.hero {padding:130px 0 95px;}
  body .hyc-home-layout .hero__content {max-width:760px;}
  body .hyc-home-hero .hero__title {font-size:clamp(45px,7vw,67px);}
  body .hyc-hero-showcase {max-width:680px;margin:0 auto;}
}
@media (max-width:650px) {
  body .hyc-home-hero.hero {padding:117px 0 75px;}
  body .hyc-home-hero .hero__title {font-size:clamp(38px,9.6vw,50px);}
  body .hyc-home-hero .hero__actions {gap:10px;}
  body .hyc-home-hero .hero__actions .btn {width:100%;justify-content:center;}
  body .hyc-home-hero .hero__image.hyc-hero-showcase {padding:15px 0 10px;}
  body .hyc-float-card {display:none;}
  body .hyc-browser-viewport {height:270px;}
  body .hyc-browser-viewport iframe {height:540px;}
  body .hyc-browser-bottom {padding:11px;}
  body .hyc-browser-bottom strong {font-size:11px;}
  body .hyc-preview-switcher {justify-content:center;}
}
@media (prefers-reduced-motion:reduce) {
  body .hyc-home-hero .hyc-hero-showcase,body .hyc-home-hero .hero__content,body .hyc-float-card,
  body .pricing-card,body .industry-card,body .features-grid .feature {animation:none!important;transition:none!important;transform:none!important;}
  html {scroll-behavior:auto!important;}
}
@media(max-width:768px){body .hyc-home-hero .hero__title{font-size:clamp(38px,8vw,54px)!important;}body .hyc-home-hero .hero__actions{flex-direction:column;} }
@media(max-width:480px){body .hyc-home-hero .hero__title{font-size:clamp(35px,9vw,43px)!important;}}

/* Touch-friendly menu expanders; parent links stay navigable. */
body .site-header .nav-dropdown{display:flex;align-items:center;}
body .site-header .hyc-nav-expander{display:none;}
@media(max-width:1024px){
 body .site-header .nav-dropdown{position:relative;display:flex;flex-wrap:wrap;align-items:center;}
 body .site-header .nav-dropdown>a{flex:1;}
 body .site-header .hyc-nav-expander{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid #d8e8de;border-radius:10px;background:#edf8f1;color:#0d7653;font-size:21px;font-weight:700;cursor:pointer;}
 body .site-header .nav-dropdown .nav-chevron{display:none;}
 body .site-header .nav-dropdown-menu{width:100%;order:3;}
}