/* The source stylesheet is copied verbatim from TallerManager.razor.css.
   These additions only connect its assets, SSR lifecycle and responsive layout. */
@font-face {
    font-family: Inter;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}
:root { --font: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.tm-page { color: #e0e6f0; overflow: clip; }
.tm-hero-bg { background-image: url('/images/home/hero-network.webp'); }
.tm-hero-title { font-size: clamp(2.6rem, 7vw, 5rem); }
.tm-hero-title strong { font-weight: inherit; }
.tm-hero-badge { line-height: 1.5; }
.tm-inner, .tm-feature-grid { min-width: 0; }
.tm-bento-card, .tm-feature-content { min-width: 0; }
.tm-bento-card .tm-bento-icon { margin: 0; }
.tm-trust-item img { object-fit: contain; }
.tm-feature-media { margin: 0; }
.tm-feature-media img { display: block; }
.tm-feature-media .tm-card-glow { pointer-events: none; }
.tm-hero [data-reveal] { animation: tmHeroEnter .9s cubic-bezier(.16,1,.3,1) both; }
.tm-hero-badge[data-reveal] { animation-delay: .1s; }
.tm-hero-title[data-reveal] { animation-delay: .25s; }
.tm-hero-sub[data-reveal] { animation-delay: .4s; }
.tm-hero-btns[data-reveal] { animation-delay: .55s; }
.tm-hero-micro[data-reveal] { animation-delay: .7s; }
@keyframes tmHeroEnter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.tm-reveal { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s; }
.tm-reveal.is-pending { opacity: 0; transform: translateY(34px); }
.tm-reveal.is-visible { opacity: 1; transform: none; }
.tm-tilt, [data-tilt] {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s;
}
/* Follow the pointer directly; animate transform only when returning to rest.
   Extra specificity also covers the story/resource card transition rules. */
.tm-tilt.tm-tilting, [data-tilt].tm-tilting {
    transition: opacity .8s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
    will-change: transform;
}
.tm-tilt > .tm-card-glow { position: absolute; inset: 0; z-index: 0; }
.tm-tilt:hover > .tm-card-glow, .tm-tilt.tm-tilting > .tm-card-glow { opacity: 1; }
/* Keep the same hover appearance while the pointer is in the resting card.
   The transformed surface's :hover can otherwise flicker at its edges. */
.tm-bento-card.tm-tilting, .story-card.tm-tilting, .resource-card.tm-tilting {
    border-color: rgba(255,140,0,.25);
    box-shadow: 0 24px 78px rgba(255,100,0,.14);
}
.tm-bento-card--wide.tm-tilting .tm-bento-visual img { transform: scale(1.05); opacity: .75; }
.tm-feature-media.tm-tilting img { transform: scale(1.035); opacity: .88; }
.resource-card.tm-tilting img { transform: scale(1.05); filter: brightness(.9); }
.resource-card.tm-tilting .resource-photo img { filter: brightness(1); }
.tm-tilt > :not(.tm-card-glow):not(img):not(.tm-feature-media-shade):not(.tm-bento-visual-overlay) { position: relative; z-index: 1; }
.tm-bento-card > .tm-bento-icon { position: absolute !important; }
.price-card, .assistant-plan, .contact-panel, .whatsapp-panel {
    border-radius: 22px;
    background-color: rgba(255,255,255,.015);
    box-shadow: none;
}
.price-card, .assistant-plan { overflow: visible; }
.price-card:hover, .contact-panel:hover {
    border-color: rgba(255,140,0,.25);
    box-shadow: 0 24px 78px rgba(255,100,0,.14);
}
.price-featured { border-color: rgba(255,140,0,.4); background: radial-gradient(ellipse at 50% 0,rgba(255,140,0,.09),transparent 65%),rgba(255,255,255,.015); }
.price-card .plan-highlight { position: absolute !important; }
.button:not(.button-green):not(.button-ghost):not(.button-outline) {
    background: linear-gradient(135deg,#ff6600,#ff8c00);
    color: #fff;
    box-shadow: 0 8px 28px rgba(255,120,0,.35);
    border-radius: 10px;
}
.button:not(.button-green):not(.button-ghost):not(.button-outline):hover {
    box-shadow: 0 12px 36px rgba(255,120,0,.45);
    transform: translateY(-2px) scale(1.02);
}
.button:not(.button-ghost):not(.button-outline)::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    transform: skewX(-20deg); transition: left .6s; pointer-events: none;
}
.button:hover::after { left: 140%; }
.tm-tunnel-overlay.tm-tunnel-fade { opacity: 0; transition: opacity .95s ease; pointer-events: none; }
.tm-tunnel-skip {
    position: absolute; right: 24px; bottom: 24px; z-index: 1;
    border: 1px solid #ff8c0066; border-radius: 10px; padding: 12px 20px;
    background: #030812dd; color: #ffbf6d; cursor: pointer; font: 600 13px Inter,sans-serif;
}
@media (max-width: 1100px) {
    .tm-bento-card--wide { grid-row: auto; }
    .tm-trust-item { flex: 0 1 auto; }
}
@media (max-width: 900px) {
    .tm-feature-grid, .tm-feature-grid--reverse { grid-template-columns: minmax(0,1fr); }
    .tm-feature-section--ai .tm-feature-content { grid-row: 1; }
}
@media (max-width: 768px) {
    .tm-bento-card--wide { padding: 0; gap: 18px; }
    .tm-bento-card--wide .tm-bento-visual { min-height: 220px; }
    .tm-feature-media { padding: 0; }
    .tm-hero-bg { background-image: url('/images/home/hero-network-mobile.webp'); }
    .tm-hero-badge { top: 0; margin-bottom: 28px; }
    .tm-hero { min-height: calc(100svh - 84px); padding: 70px 24px 105px; }
    .tm-trust-label { white-space: normal; }
}
@media (max-width: 540px) {
    .tm-hero { min-height: calc(100svh - 72px); padding: 52px 18px 95px; }
    .tm-hero-title { font-size: clamp(2rem,8.6vw,2.6rem); }
    .tm-hero-sub { font-size: .95rem; line-height: 1.75; }
    .tm-hero-micro { font-size: .75rem; line-height: 1.8; }
    .tm-hero-btns { width: 100%; }
    .tm-hero-btns .tm-btn { justify-content: center; width: min(100%,320px); min-height: 49px; }
    .tm-hero-content { width: 100%; }
    .tm-trust { padding: 35px 14px; }
    .tm-trust-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
    .tm-trust-item { padding: 9px 4px; gap: 9px; min-width: 0; }
    .tm-trust-item:last-child { grid-column: span 2; justify-content: center; }
    .tm-trust-icon { width: 36px; height: 36px; }
    .tm-trust-item img { width: 31px; height: 31px; }
    .tm-trust-label { font-size: .72rem; }
    .tm-section { padding: 66px 18px; }
    .tm-feature-section { padding: 46px 18px; }
    .tm-bento-head { margin-bottom: 35px; }
    .tm-block-tag { font-size: .62rem; letter-spacing: .13em; }
    .tm-block-title { font-size: 1.9rem; }
    .tm-block-desc { font-size: .95rem; }
    .tm-bento-card { padding: 24px; }
    .tm-bento-card--wide { padding: 0; }
    .tm-bento-card--wide .tm-bento-copy { padding: 26px 24px 0; }
    .tm-bento-card--wide h3 { font-size: 1.55rem; }
    .tm-bento-card p { font-size: .9rem; }
    .tm-feature-media { padding: 0; min-height: 285px; }
    .tm-feature-title { font-size: 1.95rem; }
    .tm-chip { font-size: .76rem; }
    .tm-cursor-glow { display: none; }
    .tm-connected-panel { padding: 30px 24px; }
}
@media (hover: none), (pointer: coarse) {
    .tm-cursor-glow { display: none; }
    .tm-tilt, [data-tilt] { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .tm-tilt, [data-tilt] { transform: none !important; }
    .tm-hero [data-reveal] { animation: none; }
    .tm-reveal.is-pending { opacity: 1; transform: none; }
    .tm-tunnel-overlay, .tm-canvas, .tm-cursor-glow { display: none !important; }
}

.button { overflow: hidden; }