/* Octacore additions on top of the OptimAI "ai-agency" template CSS (assets/main.css). Only what the template has no class for. */

/* brand: Octacore mark + wordmark in place of the template logo */
.oc-brand { gap: 10px; color: #fff; text-decoration: none; }
.oc-brand-mark { width: 40px; height: 40px; object-fit: contain; }
.oc-brand-text { font-family: var(--font-sora, sans-serif); font-weight: 600; font-size: 17px; letter-spacing: .24em; color: rgba(255,255,255,.92); white-space: nowrap; }
.oc-brand-text span { margin-left: 8px; font-weight: 300; color: rgba(255,255,255,.45); }
@media (max-width: 1279px) and (min-width: 1024px) { header nav .oc-brand-text { display: none; } }

/* language switch */
.oc-lang { display: flex; gap: 10px; align-items: center; }
.oc-lang a { color: rgba(255,255,255,.45); transition: color .3s; letter-spacing: 1.68px; }
.oc-lang a.is-on, .oc-lang a:hover { color: #fff; }

/* secondary (outlined) version of the template's magnetic button */
.oc-btn-ghost > div > div { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.22); }
.oc-btn-ghost > div > div > span:first-child { color: rgba(255,255,255,.92) !important; }
.oc-btn-ghost svg path { stroke: #fff; }

/* hero: label on the featured plugin's interface */
.oc-hero-tag { position: absolute; z-index: 4; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: rgba(13,16,23,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); }
@media (min-width: 1024px) { .oc-hero-tag { left: 28px; top: 28px; } }

/* plugin screenshots keep the top of the interface in view */
.oc-portfolio-shot img { object-position: top center; }

/* buy cards: centred whatever the number of plugins */
@media (min-width: 1024px) {
  .oc-pricing[data-count="1"] > article { grid-column: 5 / span 4; }
  .oc-pricing[data-count="2"] > article:first-child { grid-column: 3 / span 4; }
}

/* small badge next to a heading */
.oc-inline-badge { margin-left: 8px; vertical-align: middle; display: inline-block; }

/* half-width plugin cards: keep the interface's own proportions instead of a tall crop with an empty band */
.oc-portfolio-shot img { height: 100%; }
@media (min-width: 1024px) { .oc-portfolio-shot--half { aspect-ratio: 16 / 10; height: auto; min-height: 420px; } }

/* announcement strip on top of the fixed header */
.oc-announce { margin: -16px -8px 12px; padding: 7px 16px; text-align: center; letter-spacing: 1.2px; color: #0d1017; background: linear-gradient(90deg, #dbe2e6, #fff 70%); }
.oc-announce a { color: inherit; }
@media (min-width: 1024px) { .oc-announce { margin: 0 -8px; } }

/* current page in the header */
.oc-nav-on span { color: #fff !important; }

/* native selects on the dark template */
.oc-select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23ffffffaa' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.oc-select option { background: #0d1017; color: #fff; }
input:disabled { opacity: .55; cursor: not-allowed; }

/* status / error messages in forms */
.oc-alert { border-radius: 8px; padding: 12px 16px; border: 1px solid rgba(67,211,255,.35); background: rgba(67,211,255,.08); color: rgba(255,255,255,.9); }
.oc-alert.is-error { border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.1); }

/* spam trap of the contact form */
.oc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* pages under the fixed header */
.oc-page-top { padding-top: 150px; }
@media (min-width: 1024px) { .oc-page-top { padding-top: 180px; } }

/* account library */
.oc-pill-red { background: rgba(255,93,108,.16); color: #ff8a95; border: 1px solid rgba(255,93,108,.4); }
.oc-key { word-break: break-all; }

/* product page: embedded video keeps 16:9 */
.oc-video { aspect-ratio: 16 / 9; }
.oc-video iframe { width: 100%; height: 100%; border: 0; }

/* in-page anchors land below the fixed header */
.oc-anchor { scroll-margin-top: 120px; }

/* first paragraph of a story reads brighter */
.details-page-content p.oc-lead { color: rgba(255,255,255,.9); }

/* Align landing: interactive simulations (drawn by js/site.js) in the template's colours and type */
.sim-canvas { display: block; width: 100%; height: 320px; border-radius: 8px; background: #080b10; border: 1px solid rgba(255,255,255,.06); }
.mini-sim { display: block; width: 100%; height: 120px; margin-top: 18px; border-radius: 8px; background: #080b10; border: 1px solid rgba(255,255,255,.06); }
.sim-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.sim-bar:last-child { margin: 14px 0 0; }
.seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seg-label { font-family: var(--font-ibm-plex-mono, monospace); font-size: 12px; letter-spacing: 1.68px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-right: 6px; }
.seg button, .sim-pause { font-family: var(--font-ibm-plex-mono, monospace); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6);
  background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color .3s, background .3s, border-color .3s; }
.seg button:hover, .sim-pause:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.seg button.on { color: #0d1017; border-color: transparent; background: linear-gradient(90deg, #dbe2e6, #fff 72%); }
.seg button.on.violet, .seg [data-align].on { color: #fff; background: rgba(166,123,255,.35); border-color: rgba(166,123,255,.7); }
@media (max-width: 767px) { .sim-canvas { height: 240px; } }

/* hero label used inline (not over an image) */
.oc-hero-tag.oc-hero-tag-static { position: relative; left: auto; top: auto; }

/* Align landing: buy bar that follows the page after the hero */
.sticky-buy { position: fixed; left: 50%; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 20px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(13,16,23,.82); backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,.6); transform: translate(-50%, 160%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sticky-buy.show { transform: translate(-50%, 0); }
@media (max-width: 640px) { .sticky-buy { width: calc(100% - 24px); justify-content: space-between; } }

/* violet glow behind the Align phase section */
.oc-glow { position: absolute; top: 25%; left: 50%; width: 420px; height: 420px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: #5a9fff; opacity: .2; filter: blur(140px); }

/* Tailwind utilities the template's purged build does not include (same names and values as Tailwind 4) */
.uppercase { text-transform: uppercase; }
.leading-none { line-height: 1; }
.self-center { align-self: center; }
.gap-5 { gap: 1.25rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-12 { row-gap: 3rem; }
.py-5 { padding-block: 1.25rem; }
.h-\[260px\] { height: 260px; }
.text-\[40px\] { font-size: 40px; }
.text-white\/70 { color: rgba(255,255,255,.7); }
@media (hover: hover) { .hover\:border-stroke-1\/70:hover { border-color: rgba(148,174,207,.7); } }
@media not all and (min-width: 64rem) { .max-lg\:order-2 { order: 2; } }
@media (min-width: 48rem) {
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:items-end { align-items: flex-end; }
  .md\:p-6 { padding: 1.5rem; }
}