:root{--navy:#0f172a;--slate:#334155;--muted:#64748b;--line:#dbeafe;--blue:#2563eb;--cyan:#06b6d4;--violet:#7c3aed;--bg:#f7fbff;--white:#fff;--shadow:0 20px 60px rgba(30,64,175,.10)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--navy);font-family:Inter,system-ui,sans-serif}body{overscroll-behavior:none}.app-shell{width:100vw;height:100dvh;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f7fbff 100%)}
.topbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 8vw;background:#12213f;color:#f8fbff;font-size:12px;white-space:nowrap}.topbar-message{font-weight:600}.topbar-stats{display:flex;gap:24px;opacity:.92}
.navbar{height:72px;display:flex;align-items:center;gap:34px;padding:0 8vw;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #e2e8f0;box-shadow:0 3px 18px rgba(15,23,42,.04);position:relative;z-index:20}.brand{display:block;width:250px;min-width:190px}.brand img{width:100%;height:54px;object-fit:contain;object-position:left center;display:block}.desktop-nav{display:flex;align-items:center;justify-content:center;gap:30px;flex:1}.desktop-nav a,.mobile-nav a{color:var(--navy);text-decoration:none;font-weight:600;font-size:14px}.nav-actions{display:flex;align-items:center;gap:12px}.icon-button,.menu-button{border:0;background:transparent;color:var(--navy);font-size:25px;cursor:pointer}.outline-button,.primary-button,.demo-button{border-radius:14px;padding:12px 18px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.outline-button{background:#fff;border:1px solid #cbd5e1;color:#1e3a8a}.primary-button{border:0;color:#fff;background:linear-gradient(110deg,#06b6d4,#2563eb 50%,#7c3aed);box-shadow:0 12px 30px rgba(37,99,235,.22)}.primary-button:hover,.outline-button:hover,.demo-button:hover{transform:translateY(-1px)}.primary-button span:last-child{margin-left:7px}.menu-button{display:none}.mobile-nav{display:none}
.viewport{position:absolute;left:0;right:0;top:106px;bottom:0;overflow:hidden}.track{display:flex;height:100%;width:max-content;transform:translate3d(0,0,0);will-change:transform;transition:transform .95s cubic-bezier(.22,.61,.36,1)}.panel{width:100vw;height:100%;flex:0 0 100vw;position:relative;overflow:hidden}.home-panel{background:radial-gradient(circle at 50% 44%,rgba(37,99,235,.10),transparent 35%),linear-gradient(180deg,#fbfdff,#f2f8ff)}
.ambient{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;pointer-events:none}.ambient-one{width:38vw;height:22vw;background:#bae6fd;top:20%;left:-10%}.ambient-two{width:34vw;height:24vw;background:#ddd6fe;top:12%;right:-8%}
.side-caption{position:absolute;z-index:4;color:#2b65cb;letter-spacing:5px;font-size:10px;line-height:1.7;font-weight:700}.side-caption span{display:block;letter-spacing:5px;line-height:2.1}.left-caption{top:12%;left:8%}.right-caption{top:14%;right:8%;text-align:right;font-size:15px;letter-spacing:2px;font-style:italic}
.integration-card{position:absolute;z-index:5;display:flex;gap:13px;align-items:center;padding:14px 18px;border:1px solid rgba(147,197,253,.45);background:rgba(255,255,255,.75);backdrop-filter:blur(13px);border-radius:18px;box-shadow:0 18px 40px rgba(30,64,175,.08);min-width:190px}.integration-card b{display:block;font-size:15px}.integration-card small{display:block;margin-top:5px;line-height:1.35;color:#64748b;font-size:10px}.meta-card{left:5%;top:8%;animation:floatA 4.8s ease-in-out infinite;}
.google-card{left:3%;top:25%;animation:floatB 5.4s ease-in-out infinite 0.6s;}
.cloudflare-card{left:5%;top:42%;animation:floatC 5s ease-in-out infinite 1.2s;}
.models-card{right:5%;top:8%;animation:floatB 5.2s ease-in-out infinite 0.3s;}
.whatsapp-card{right:3%;top:25%;animation:floatA 4.6s ease-in-out infinite 0.9s;}
.mcp-card{right:5%;top:42%;animation:floatC 5.6s ease-in-out infinite 1.5s;}.brand-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:22px}.meta{color:#1877f2}.google{color:#4285f4}.cloud{color:#f59e0b}.model{color:#111827}.wa{color:#16a34a}.mcp{color:#2563eb}
.globe-wrap{position:absolute;z-index:3;top:1%;left:50%;width:min(320px,28vw);height:min(320px,28vw);transform:translateX(-50%);display:grid;place-items:center}.globe{width:min(295px,26vw);height:min(295px,26vw);object-fit:contain;filter:drop-shadow(0 20px 45px rgba(37,99,235,.32));transform-origin:50% 50%;will-change:transform;animation:globeBreathe 4s ease-in-out infinite alternate;}.globe-wrap.spin .globe{animation:globeSpin 1.15s cubic-bezier(.2,.7,.2,1) both}.orbit{position:absolute;border:1px solid rgba(14,165,233,.35);border-radius:50%;inset:30px;transform:rotate(17deg)}.orbit-b{inset:54px;transform:rotate(-34deg);border-color:rgba(124,58,237,.25)}@keyframes globeSpin{to{transform:rotateY(360deg) rotateX(8deg)}}
.hero-copy{position:absolute;z-index:8;left:50%;top:56%;transform:translate(-50%,-50%);width:min(880px,90vw);text-align:center}.eyebrow{font-size:11px;letter-spacing:4px;color:#2563eb;font-weight:800}.hero-copy h1{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(44px,5vw,78px);line-height:.98;margin:12px 0 12px;font-weight:700;letter-spacing:-2.8px}.hero-copy h1 span,.section-heading h2 span,.page-copy h2 span,.about-layout h2 span{background:linear-gradient(100deg,#06b6d4,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy p{font-size:17px;color:#46618a;letter-spacing:5px;text-transform:uppercase;margin:0 0 25px}.hero-actions{display:flex;justify-content:center;gap:14px;align-items:center}.large{padding:15px 22px;border-radius:16px}.paypal-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#1d4ed8;font-size:12px;margin-right:4px}.demo-button{background:#fff;border:1px solid #cbd5e1;color:var(--navy);box-shadow:0 10px 28px rgba(15,23,42,.07)}.play{display:inline-grid;place-items:center;border:1px solid #94a3b8;width:24px;height:24px;border-radius:50%;font-size:9px;margin-right:7px}.trust-row{display:flex;justify-content:center;gap:34px;color:#34517b;font-size:12px;margin-top:17px}.feature-rail{position:absolute;z-index:9;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);border:1px solid #cfe8ff;border-radius:18px;box-shadow:0 20px 40px rgba(30,64,175,.10);backdrop-filter:blur(15px);overflow:hidden}.feature-rail div{padding:16px 28px;border-right:1px solid #e2e8f0;color:#1d4ed8;font-size:18px;text-align:center}.feature-rail div:last-child{border-right:0}.feature-rail span{display:block;color:#334155;font-size:11px;margin-top:3px}.floating-stat{position:absolute;z-index:9;bottom:7%;display:flex;flex-direction:column;gap:4px;padding:15px 17px;background:rgba(255,255,255,.83);backdrop-filter:blur(12px);border:1px solid #dbeafe;border-radius:17px;box-shadow:var(--shadow)}.floating-stat b{font-size:16px}.floating-stat span{font-size:10px;color:#64748b;line-height:1.35}.users-stat{left:3%}.status-stat{right:3%}.scroll-hint{display:none !important;position:absolute;z-index:9;bottom:1.5%;left:50%;transform:translateX(-50%);color:#315c99;font-size:20px;text-align:center}.scroll-hint span{display:block;font-size:11px;margin-top:2px}
.inner-panel{background:linear-gradient(180deg,#fbfdff,#f4f8ff);padding:6vh 8vw 5vh;display:flex;align-items:center}.page-grid,.about-layout{width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}.page-copy h2,.section-heading h2,.about-layout h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(44px,5vw,72px);line-height:1.02;margin:15px 0 20px;letter-spacing:-2.7px}.page-copy p,.section-heading p,.about-layout p{max-width:680px;color:#526a8d;font-size:17px;line-height:1.7}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.pill-row span{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #dbeafe;color:#335b93;font-size:12px;font-weight:700}.product-orbit-card{height:70vh;position:relative;display:grid;place-items:center}.hub-ring{width:min(52vh,420px);aspect-ratio:1;border-radius:50%;border:1px solid #93c5fd;box-shadow:0 0 80px rgba(37,99,235,.15),inset 0 0 55px rgba(6,182,212,.12);background:radial-gradient(circle,rgba(255,255,255,.9),rgba(224,242,254,.2) 45%,transparent 70%)}.hub-core{position:absolute;width:210px;height:210px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#172554,#0f172a 70%);box-shadow:0 20px 50px rgba(15,23,42,.25),0 0 40px rgba(37,99,235,.28);padding:28px}.hub-core img{width:100%;height:auto;filter:drop-shadow(0 0 16px rgba(14,165,233,.5))}.orbit-node{position:absolute;padding:10px 15px;border-radius:999px;background:#fff;border:1px solid #cfe8ff;box-shadow:0 12px 25px rgba(30,64,175,.10);font-weight:700;color:#1e3a8a;font-size:12px}.n1{top:10%;left:43%}.n2{top:22%;right:7%}.n3{bottom:19%;right:11%}.n4{bottom:5%;left:43%}.n5{bottom:22%;left:7%}.n6{top:22%;left:7%}
.section-heading{max-width:820px;margin-bottom:4vh}.agent-grid{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.agent-grid article,.integration-grid article,.resource-grid article{background:rgba(255,255,255,.86);border:1px solid #dbeafe;border-radius:18px;padding:18px;box-shadow:0 12px 35px rgba(30,64,175,.06);min-height:115px}.agent-grid b,.integration-grid b,.resource-grid b{display:block;font-size:14px}.agent-grid span,.integration-grid span,.resource-grid span{display:block;color:#64748b;font-size:11px;line-height:1.5;margin-top:8px}.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}.integration-grid article{min-height:150px}.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%}.resource-grid article{min-height:160px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;align-items:stretch}.price-card{position:relative;background:#fff;border:1px solid #dbeafe;border-radius:22px;padding:24px;box-shadow:0 18px 45px rgba(30,64,175,.08)}.price-card.featured{border-color:#818cf8;box-shadow:0 20px 55px rgba(99,102,241,.17);transform:translateY(-8px)}.popular{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#4f46e5;color:#fff;padding:5px 12px;border-radius:999px;font-size:10px;font-weight:800}.price-card>span{font-size:11px;letter-spacing:3px;color:#2563eb;font-weight:800}.price-card h3{font-size:40px;margin:8px 0}.price-card h3 small{font-size:12px;color:#64748b;font-weight:600}.price-card p{color:#64748b;font-size:12px}.price-card ul{padding-left:18px;color:#334155;font-size:12px;line-height:2;margin:15px 0 20px}.full{width:100%}
.about-layout{grid-template-columns:1.3fr .7fr}.about-card{background:linear-gradient(145deg,#0f172a,#182c55);color:#fff;padding:35px;border-radius:28px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 30px 70px rgba(15,23,42,.18)}.about-card img{width:190px;filter:drop-shadow(0 0 22px rgba(59,130,246,.55))}.about-card span{font-size:11px;color:#b6c7ec}.about-metrics{display:flex;gap:30px;margin-top:30px}.about-metrics div{display:flex;flex-direction:column}.about-metrics b{font-size:30px;color:#1d4ed8}.about-metrics span{font-size:11px;color:#64748b}.signin-card{width:min(440px,95%);margin:auto;background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:34px;box-shadow:0 25px 60px rgba(30,64,175,.10);display:flex;flex-direction:column;gap:12px}.signin-card h2{font:700 44px/1 "Space Grotesk",Inter,sans-serif;margin:8px 0}.signin-card p{color:#64748b}.signin-card input{border:1px solid #cbd5e1;border-radius:13px;padding:14px;font:inherit;outline:none}.signin-card input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.signin-card small{font-size:10px;color:#94a3b8}
.slide-cover{position:fixed;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95));transform:translateX(100%);pointer-events:none;z-index:100;transition:transform .9s cubic-bezier(.22,.61,.36,1)}.slide-cover.active{transform:translateX(0)}
@media (max-width:1100px){.navbar{padding:0 4vw}.desktop-nav{gap:17px}.brand{width:210px}.topbar{padding:0 4vw}.meta-card{left:20%}.google-card{left:18%}.cloudflare-card{left:21%}.models-card{right:20%}.whatsapp-card{right:18%}.mcp-card{right:21%}.agent-grid{grid-template-columns:repeat(3,1fr)}.resource-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.topbar{height:30px;padding:0 4vw;font-size:9px}.topbar-stats{display:none}.navbar{height:62px;padding:0 4vw;gap:10px}.brand{width:165px;min-width:130px}.desktop-nav,.outline-button,.icon-button{display:none}.nav-actions{margin-left:auto}.primary-button{padding:10px 13px;font-size:11px}.menu-button{display:block;font-size:22px}.mobile-nav{position:fixed;top:92px;right:12px;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border:1px solid #dbeafe;border-radius:16px;padding:10px;display:none;flex-direction:column;gap:2px;box-shadow:0 20px 40px rgba(15,23,42,.12)}.mobile-nav.open{display:flex}.mobile-nav a{padding:10px 12px;font-size:13px}.viewport{top:92px}.side-caption{display:none}.integration-card{min-width:138px;padding:9px 11px;gap:8px;border-radius:13px}.integration-card b{font-size:11px}.integration-card small{font-size:8px}.brand-icon{width:25px;height:25px;font-size:16px;border-radius:8px}.meta-card{left:3%;top:10%}.google-card{left:2%;top:28%}.cloudflare-card{left:4%;top:47%}.models-card{right:3%;top:10%}.whatsapp-card{right:2%;top:28%}.mcp-card{right:4%;top:47%}.globe-wrap{top:7%;width:300px;height:300px}.globe{width:285px;height:285px}.hero-copy{top:55%;left:5%;right:5%}.hero-copy h1{font-size:clamp(38px,10vw,58px);letter-spacing:-1.8px}.hero-copy p{font-size:12px;letter-spacing:3px}.hero-actions{flex-direction:column;gap:9px}.hero-actions .large,.demo-button{width:min(290px,90vw)}.trust-row{flex-direction:column;gap:7px;font-size:10px}.feature-rail{bottom:7%;width:94%;overflow-x:auto;justify-content:flex-start}.feature-rail div{min-width:95px;padding:11px 12px;font-size:14px}.feature-rail span{font-size:9px}.floating-stat{padding:9px 10px;bottom:2.5%}.users-stat{left:2%}.status-stat{right:2%}.floating-stat span{display:none}.floating-stat b{font-size:10px}.scroll-hint{display:none !important;display:none}.inner-panel{padding:4vh 5vw}.page-grid,.about-layout{grid-template-columns:1fr;gap:20px}.page-copy h2,.section-heading h2,.about-layout h2{font-size:clamp(38px,9vw,54px);letter-spacing:-1.8px}.page-copy p,.section-heading p,.about-layout p{font-size:14px;line-height:1.55}.product-orbit-card{height:39vh}.hub-ring{width:min(45vh,310px)}.hub-core{width:155px;height:155px;padding:20px}.orbit-node{font-size:9px;padding:7px 10px}.n1{top:0}.n2{right:4%}.n3{right:4%;bottom:11%}.n4{bottom:0}.n5{left:4%;bottom:11%}.n6{left:4%}.agent-grid{grid-template-columns:repeat(3,1fr);gap:9px}.agent-grid article{min-height:92px;padding:12px}.agent-grid b{font-size:11px}.agent-grid span{font-size:9px}.integration-grid{grid-template-columns:repeat(2,1fr);gap:9px}.integration-grid article{min-height:112px;padding:13px}.resource-grid{grid-template-columns:repeat(2,1fr);gap:9px}.resource-grid article{min-height:105px;padding:13px}.pricing-grid{grid-template-columns:repeat(3,1fr);gap:9px}.price-card{padding:13px;border-radius:16px;min-width:0}.price-card h3{font-size:24px}.price-card p,.price-card ul{font-size:9px}.price-card ul{padding-left:14px;line-height:1.7}.popular{font-size:8px;padding:4px 7px;top:-11px}.about-layout{align-items:start}.about-card{padding:18px}.about-card img{width:130px}.about-metrics{gap:18px}.about-metrics b{font-size:24px}.about-metrics span{font-size:9px}.signin-card{padding:23px}.signin-card h2{font-size:36px}}

/* Enhanced vertical flow for inner-panel on constrained viewports */
.inner-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.inner-panel::-webkit-scrollbar {
  width: 6px;
}
.inner-panel::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.2);
  border-radius: 999px;
}

/* ========================================================================
   Advanced 3D Floating, Orbits & Bottom Dock Styles
   ======================================================================== */

/* Individual Floating Motion */
@keyframes floatA {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(0.8deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-0.8deg); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-0.6deg); }
}
@keyframes globeBreathe {
  from { filter: drop-shadow(0 18px 36px rgba(37,99,235,.25)); transform: scale(1); }
  to   { filter: drop-shadow(0 26px 58px rgba(37,99,235,.40)); transform: scale(1.025); }
}
@keyframes orbitSpinA {
  from { transform: rotate(17deg); }
  to   { transform: rotate(377deg); }
}
@keyframes orbitSpinB {
  from { transform: rotate(-34deg); }
  to   { transform: rotate(-394deg); }
}
@keyframes textShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Orbit continuous slow spin */
.orbit-a { animation: orbitSpinA 32s linear infinite; }
.orbit-b { animation: orbitSpinB 44s linear infinite; }

/* 3D Card Hover Effects */
.integration-card {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease !important;
  cursor: pointer;
}
.integration-card:hover {
  transform: translateY(-8px) scale(1.05) perspective(600px) rotateX(4deg) !important;
  box-shadow: 0 25px 50px rgba(30,64,175,.16), 0 0 25px rgba(6,182,212,.18) !important;
  border-color: rgba(37,99,235,.65) !important;
}

/* Animated gradient heading */
.hero-copy h1 span {
  background: linear-gradient(100deg, #06b6d4 0%, #2563eb 35%, #7c3aed 70%, #06b6d4 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: textShimmer 6s ease infinite !important;
}

/* Bottom Navigation Dock (Mirrors Top Navigation) */
.bottom-nav-rail {
  bottom: 4% !important;
  padding: 4px !important;
  gap: 0px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
  box-shadow: 0 16px 45px rgba(30, 64, 175, 0.12) !important;
}
.bottom-nav-item {
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
  border-radius: 14px !important;
  text-align: center !important;
  border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
}
.bottom-nav-item:last-child {
  border-right: 0 !important;
}
.bottom-nav-item:hover {
  background: #eff6ff !important;
  transform: translateY(-2px) !important;
}
.bottom-nav-item b {
  display: block !important;
  color: #1e3a8a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.bottom-nav-item span {
  display: block !important;
  color: #64748b !important;
  font-size: 9.5px !important;
  margin-top: 2px !important;
  font-weight: 500 !important;
}

/* Mobile responsive fixes for bottom dock & cards */
@media (max-width: 760px) {
  .hero-copy {
    top: 54% !important;
    width: 94vw !important;
  }
  .bottom-nav-rail {
    bottom: 2% !important;
    width: 96% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }
  .bottom-nav-item {
    min-width: 82px !important;
    padding: 8px 10px !important;
  }
  .bottom-nav-item b { font-size: 11px !important; }
  .bottom-nav-item span { font-size: 8px !important; }
}

/* ========================================================================
   3D Flip-Book Product Engine
   ======================================================================== */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  margin-top: 24px;
}
@media (max-width: 1100px) {
  .flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .flip-grid { grid-template-columns: 1fr; }
}

.flip-book-wrap {
  perspective: 1400px;
  min-height: 380px;
  height: 100%;
  cursor: pointer;
}

.flip-book-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
  border-radius: 20px;
}

.flip-book-card.flipped {
  transform: rotateY(-180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(30, 64, 175, 0.08);
  border: 1px solid #dbeafe;
}

/* Front Cover */
.flip-front {
  background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
  justify-content: space-between;
}
.flip-front:hover {
  box-shadow: 0 24px 50px rgba(37, 99, 235, 0.16);
  border-color: #93c5fd;
}
.book-spine-accent {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #06b6d4, #2563eb 50%, #7c3aed);
}

.flip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}
.flip-badge.cyan { background: #ecfeff; color: #0891b2; border: 1px solid #a5f3fc; }
.flip-badge.indigo { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.flip-badge.emerald { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.flip-badge.amber { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }

.flip-icon {
  font-size: 38px;
  margin: 12px 0 6px;
}
.flip-front h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.2;
}
.flip-front p {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 12px;
}
.flip-cta-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
}

/* Back Dossier Page */
.flip-back {
  background: linear-gradient(145deg, #0f172a 0%, #172554 100%);
  color: #f8fafc;
  transform: rotateY(180deg);
  overflow-y: auto;
  justify-content: space-between;
  border-color: #3b82f6;
  box-shadow: 0 25px 55px rgba(15, 23, 42, 0.28);
}
.flip-back h4 {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.flip-back-sub {
  font-size: 11px;
  color: #93c5fd;
  margin-bottom: 10px;
}
.flip-tool-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.flip-tool-list li {
  font-size: 11px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flip-tool-list li span {
  color: #38bdf8;
  font-weight: 700;
}
.flip-back-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.flip-back-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.flip-back-btn:hover {
  background: rgba(255,255,255,0.22);
}
.flip-endpoint-pill {
  font-family: monospace;
  font-size: 9.5px;
  color: #34d399;
  background: rgba(6,78,59,0.5);
  padding: 3px 8px;
  border-radius: 6px;
}