/* ============================================================
   CanaryInsider — Stylesheet
   Zero frameworks, zero build tools, pure CSS
   ============================================================ */

/* ===== Reset ===== */
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;line-height:inherit}
a{color:inherit;text-decoration:inherit}
img,svg{display:block;vertical-align:middle;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
[hidden]{display:none}
::selection{background-color:#00bcd4;color:#fff}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00bcd4,#ff9800);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0097a7,#f57c00)}

/* ===== Theme Colors ===== */
:root{
--ocean-50:#e0f7fa;--ocean-100:#b2ebf2;--ocean-200:#80deea;--ocean-300:#4dd0e1;--ocean-400:#26c6da;
--ocean-500:#00bcd4;--ocean-600:#00acc1;--ocean-700:#0097a7;--ocean-800:#00838f;--ocean-900:#006064;
--sunset-50:#fff3e0;--sunset-100:#ffe0b2;--sunset-200:#ffcc80;--sunset-300:#ffb74d;--sunset-400:#ffa726;
--sunset-500:#ff9800;--sunset-600:#fb8c00;--sunset-700:#f57c00;--sunset-800:#ef6c00;--sunset-900:#e65100;
--sand-50:#fefce8;--sand-100:#fef9c3;--sand-200:#fef08a;--sand-300:#fde047;
--palm-500:#2e7d32;--palm-600:#1b5e20;
}

/* ===== Position / Display / Flex / Grid ===== */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}.bottom-8{bottom:2rem}
.top-20{top:5rem}.left-10{left:2.5rem}.right-10{right:2.5rem}.bottom-20{bottom:5rem}
.left-1\/2{left:50%}.top-1\/2{top:50%}
.z-10{z-index:10}.z-50{z-index:50}
.-top-10{top:-2.5rem}.-left-10{left:-2.5rem}.-bottom-10{bottom:-2.5rem}.-right-10{right:-2.5rem}
.flex{display:flex}.inline-flex{display:inline-flex}.inline-block{display:inline-block}.block{display:block}
.hidden{display:none}.grid{display:grid}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}

/* ===== Spacing ===== */
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-0{padding-top:0;padding-bottom:0}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.p-8{padding:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}
.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.mr-2{margin-right:.5rem}
.-translate-x-1\/2{transform:translateX(-50%)}
.-translate-y-1\/2{transform:translateY(-50%)}

/* ===== Sizing ===== */
.w-4{width:1rem}.w-5{width:1.25rem}.w-10{width:2.5rem}.w-20{width:5rem}
.w-72{width:18rem}.w-80{width:20rem}.w-96{width:24rem}.w-auto{width:auto}
.w-full{width:100%}.w-\[500px\]{width:500px}
.h-1{height:.25rem}.h-4{height:1rem}.h-5{height:1.25rem}
.h-8{height:2rem}.h-10{height:2.5rem}
.h-72{height:18rem}.h-80{height:20rem}.h-96{height:24rem}.h-\[500px\]{height:500px}
.min-h-screen{min-height:100vh}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}
.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}
.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}

/* ===== Overflow ===== */
.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}

/* ===== Border Radius ===== */
.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:.75rem}
.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}

/* ===== Borders ===== */
.border{border-width:1px}.border-2{border-width:2px}
.border-gray-100{border-color:#f3f4f6}.border-gray-200{border-color:#e5e7eb}
.border-transparent{border-color:transparent}.border-white\/20{border-color:rgba(255,255,255,.2)}

/* ===== Backgrounds ===== */
.bg-white{background-color:#fff}.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-gray-50{background-color:#f9fafb}.bg-gray-200{background-color:#e5e7eb}
.bg-gray-900{background-color:#111827}.bg-transparent{background-color:transparent}
.bg-ocean-100{background-color:var(--ocean-100)}.bg-ocean-200{background-color:var(--ocean-200)}
.bg-ocean-500{background-color:var(--ocean-500)}.bg-ocean-600{background-color:var(--ocean-600)}
.bg-ocean-700{background-color:var(--ocean-700)}.bg-ocean-800{background-color:var(--ocean-800)}
.bg-ocean-900{background-color:var(--ocean-900)}
.bg-ocean-300\/10{background-color:rgba(77,208,225,.1)}
.bg-ocean-300\/15{background-color:rgba(77,208,225,.15)}
.bg-sunset-400{background-color:var(--sunset-400)}
.bg-sunset-400\/20{background-color:rgba(255,167,38,.2)}
.bg-sunset-500{background-color:var(--sunset-500)}.bg-sunset-600{background-color:var(--sunset-600)}
.bg-sunset-700{background-color:var(--sunset-700)}
.bg-sunset-500\/10{background-color:rgba(255,152,0,.1)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.bg-green-500\/20{background-color:rgba(34,197,94,.2)}
.bg-red-500\/10{background-color:rgba(239,68,68,.1)}

/* ===== Gradients ===== */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-grad-stops,transparent))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-grad-stops,transparent))}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-grad-stops,transparent))}
.from-ocean-500{--tw-grad-from:var(--ocean-500);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-to,transparent)}
.from-ocean-700{--tw-grad-from:var(--ocean-700);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-to,transparent)}
.from-sunset-700{--tw-grad-from:var(--sunset-700);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-to,transparent)}
.from-gray-50{--tw-grad-from:#f9fafb;--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-to,transparent)}
.from-white{--tw-grad-from:#fff;--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-to,transparent)}
.via-ocean-600{--tw-grad-stops:var(--tw-grad-from),var(--ocean-600),var(--tw-grad-to,transparent)}
.via-sunset-600{--tw-grad-stops:var(--tw-grad-from),var(--sunset-600),var(--tw-grad-to,transparent)}
.to-ocean-900{--tw-grad-to:var(--ocean-900)}.to-sunset-500{--tw-grad-to:var(--sunset-500)}
.to-sunset-300{--tw-grad-to:var(--sunset-300)}.to-white{--tw-grad-to:#fff}

/* ===== Typography ===== */
.text-center{text-align:center}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}
.uppercase{text-transform:uppercase}
.text-white{color:#fff}.text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/50{color:rgba(255,255,255,.5)}.text-white\/70{color:rgba(255,255,255,.7)}
.text-white\/80{color:rgba(255,255,255,.8)}.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}
.text-gray-900{color:#111827}.text-ocean-700{color:var(--ocean-700)}.text-ocean-800{color:var(--ocean-800)}
.text-red-300{color:#fca5a5}.text-green-100{color:#dcfce7}.text-transparent{color:transparent}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.placeholder-gray-400::placeholder{color:#9ca3af}

/* ===== Shadows & Effects ===== */
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-ocean-500\/30{box-shadow:0 10px 15px -3px rgba(0,188,212,.3)}
.opacity-60{opacity:.6}.opacity-25{opacity:.25}.opacity-75{opacity:.75}
.blur-3xl{filter:blur(64px)}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ===== Transitions ===== */
.transition-all{transition:all .15s ease}
.transition-colors{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.transition-transform{transition:transform .15s ease}
.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}
.duration-500{transition-duration:.5s}

/* ===== Transforms ===== */
.transform{transform:translateY(var(--tw-y,0)) translateX(var(--tw-x,0)) scale(var(--tw-scale,1))}
.hover\:-translate-y-1:hover{transform:translateY(-.25rem)}
.hover\:-translate-y-2:hover{transform:translateY(-.5rem)}
.hover\:-translate-y-0\.5:hover{transform:translateY(-.125rem)}
.hover\:scale-105:hover{transform:scale(1.05)}
.active\:scale-95:active{transform:scale(.95)}
.scale-x-0{transform:scaleX(0)}.origin-left{transform-origin:left}

/* ===== Interactive States ===== */
.hover\:bg-ocean-100:hover{background-color:var(--ocean-100)}
.hover\:bg-sunset-600:hover{background-color:var(--sunset-600)}
.hover\:bg-white\/30:hover{background-color:rgba(255,255,255,.3)}
.hover\:text-white:hover{color:#fff}.hover\:text-gray-300:hover{color:#d1d5db}
.hover\:text-ocean-700:hover{color:var(--ocean-700)}
.hover\:border-ocean-200:hover{border-color:#80deea}.hover\:border-ocean-300:hover{border-color:var(--ocean-300)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.hover\:shadow-2xl:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.focus\:border-sunset-400:focus{border-color:var(--sunset-400)}
.focus\:ring-4:focus{box-shadow:0 0 0 4px var(--sunset-400) / .2}
.disabled\:opacity-50:disabled{opacity:.5}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
.disabled\:bg-sunset-400:disabled{background-color:var(--sunset-400)}

/* Group hover */
.group:hover .group-hover\:scale-110{transform:scale(1.1)}
.group:hover .group-hover\:scale-x-100{transform:scaleX(1)}
.group:hover .group-hover\:text-ocean-700{color:var(--ocean-700)}

/* ===== Misc ===== */
.outline-none{outline:2px solid transparent;outline-offset:2px}
.pointer-events-none{pointer-events:none}.whitespace-nowrap{white-space:nowrap}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ===== Animations ===== */
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes pulseSlow{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes slideInLeft{0%{opacity:0;transform:translateX(-40px)}100%{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{0%{opacity:0;transform:translateX(40px)}100%{opacity:1;transform:translateX(0)}}
@keyframes bounceSubtle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(255,152,0,.7)}50%{box-shadow:0 0 0 12px rgba(255,152,0,0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{100%{transform:rotate(360deg)}}

.animate-fade-in{animation:fadeIn .6s ease-out forwards}
.animate-fade-in-up{animation:fadeInUp .7s ease-out forwards}
.animate-fade-in-down{animation:fadeInDown .6s ease-out forwards}
.animate-float{animation:float 6s ease-in-out infinite}
.animate-pulse-slow{animation:pulseSlow 4s ease-in-out infinite}
.animate-slide-in-left{animation:slideInLeft .7s ease-out forwards}
.animate-slide-in-right{animation:slideInRight .7s ease-out forwards}
.animate-bounce-subtle{animation:bounceSubtle 2s ease-in-out infinite}
.animate-spin{animation:spin 1s linear infinite}

/* ===== Hero — Mesh Gradient Background ===== */
.mesh-gradient {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0,188,212,.15) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(255,152,0,.1) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(0,137,123,.12) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 70%, rgba(255,167,38,.08) 0%, transparent 50%);
    animation: gradientShift 20s ease-in-out infinite;
}
@keyframes gradientShift {
    0%,100% { opacity: 1; }
    25% { opacity: .85; }
    50% { opacity: 1; }
    75% { opacity: .9; }
}

/* ===== Hero — Ocean Particles ===== */
.ocean-particles {
    overflow: hidden;
}
.particle {
    position: absolute;
    bottom: -8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    animation: rise linear infinite;
}
@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: .6;
    }
    90% {
        opacity: .2;
    }
    100% {
        transform: translateY(-110vh) scale(.4);
        opacity: 0;
    }
}
.particle:nth-child(3n) {
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,.15);
}
.particle:nth-child(5n+1) {
    width: 5px;
    height: 5px;
    background: rgba(255,152,0,.18);
}
.particle:nth-child(7n+2) {
    width: 2px;
    height: 2px;
    background: rgba(0,188,212,.25);
}

/* ===== Hero — Floating Feature Drift Pills ===== */
.feature-drift-item {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    font-size: .75rem;
    line-height: 1.25rem;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9999px;
    white-space: nowrap;
    animation: driftOrbit ease-in-out infinite;
}
@keyframes driftOrbit {
    0%,100% { transform: translate(0, 0) rotate(0deg); }
    25%     { transform: translate(6px, -8px) rotate(2deg); }
    50%     { transform: translate(-4px, -14px) rotate(-1deg); }
    75%     { transform: translate(-8px, -4px) rotate(1deg); }
}
/* Mobile: hide feature pills to keep hero clean on small screens */
@media (max-width: 640px) {
    .feature-drift-item {
        display: none;
    }
}

/* ===== Custom Components ===== */
.fade-in-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .7s ease-out,transform .7s ease-out}
.fade-in-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.feature-card{opacity:0;transform:translateY(40px);transition:opacity .6s ease-out,transform .6s ease-out,border-color .3s,box-shadow .3s}
.feature-card.is-visible{opacity:1;transform:translateY(0)}
.text-gradient-ocean{background:linear-gradient(135deg,#00bcd4,#0097a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-sunset{background:linear-gradient(135deg,#ff9800,#f57c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pulse-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#ff9800;animation:pulse-dot 2s infinite}
.glass-hover:hover{background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.skeleton{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}

/* ===== Responsive ===== */
@media(min-width:640px){
.sm\:flex-row{flex-direction:row}
.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-8xl{font-size:6rem;line-height:1}
.sm\:gap-3{gap:.75rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
}
@media(min-width:768px){
.md\:flex-row{flex-direction:row}.md\:block{display:block}.md\:hidden{display:none}
.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}
}
@media(min-width:1024px){
.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-7xl{font-size:4.5rem;line-height:1}
.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}
}
@media(max-width:640px){
.feature-card{opacity:1;transform:none}
.fade-in-on-scroll{opacity:.6;transform:translateY(10px)}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}