/*
Theme Name: OneCodeStudio
Theme URI: https://onecodestudio.com
Author: OneCodeStudio
Description: A responsive AI tools, templates, learning, strategy, and services theme based on the OneCodeStudio homepage concept.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: onecodestudio
*/

:root {
  --ocs-navy: #030817;
  --ocs-navy-2: #07112a;
  --ocs-ink: #090d1b;
  --ocs-muted: #687086;
  --ocs-line: #e8ebf4;
  --ocs-blue: #2479ff;
  --ocs-cyan: #36c7ff;
  --ocs-purple: #9b4dff;
  --ocs-green: #31b97a;
  --ocs-orange: #ff9b4a;
  --ocs-white: #fff;
  --ocs-bg: #f7f9fd;
  --ocs-radius: 18px;
  --ocs-shadow: 0 18px 45px rgba(28, 42, 86, .09);
  --ocs-wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ocs-ink);
  background: var(--ocs-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ocs-wrap { width: min(calc(100% - 42px), var(--ocs-wrap)); margin-inline: auto; }

.site-header {
  position: absolute;
  z-index: 50;
  inset: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.admin-bar .site-header { top: 32px; }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 34px; }
.site-branding { flex: 0 0 auto; }
.ocs-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.ocs-logo-mark { color: var(--ocs-blue); font: 800 25px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ocs-logo-purple { color: var(--ocs-purple); }
.main-navigation { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 14px; font-weight: 600; }
.main-navigation ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.main-navigation a { color: rgba(255,255,255,.9); transition: color .2s; }
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: #75a7ff; }
.ocs-header-cta { padding: 12px 24px; border-radius: 10px; background: linear-gradient(110deg,var(--ocs-blue),var(--ocs-purple)); box-shadow: 0 8px 25px rgba(68,88,255,.32); }
.ocs-menu-toggle { display: none; margin-left: auto; padding: 8px; border: 0; color: #fff; background: transparent; font-size: 27px; cursor: pointer; }

.ocs-hero {
  position: relative;
  overflow: hidden;
  min-height: 710px;
  padding: 150px 0 62px;
  color: #fff;
  background:
    radial-gradient(circle at 74% 46%, rgba(36,121,255,.24), transparent 28%),
    radial-gradient(circle at 84% 58%, rgba(155,77,255,.19), transparent 28%),
    linear-gradient(115deg,#020715 5%,#06112d 52%,#08051d);
}
.ocs-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 130px; background: linear-gradient(transparent,rgba(1,4,15,.52)); pointer-events: none; }
.ocs-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 50px; }
.ocs-kicker { margin: 0 0 16px; color: #69a6ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ocs-kicker .purple { color: #bd6dff; }
.ocs-hero h1 { max-width: 650px; margin: 0 0 22px; font-size: clamp(48px,5.2vw,70px); line-height: .99; letter-spacing: -3px; }
.ocs-gradient-text { color: transparent; background: linear-gradient(90deg,#1f85ff,#ad59ff); background-clip: text; -webkit-background-clip: text; }
.ocs-hero-copy { max-width: 555px; margin: 0 0 28px; color: #c4c9d7; font-size: 18px; }
.ocs-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.ocs-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 50px; padding: 0 27px; border: 1px solid transparent; border-radius: 12px; color: #fff; background: linear-gradient(110deg,var(--ocs-blue),var(--ocs-purple)); font-weight: 750; box-shadow: 0 12px 25px rgba(46,84,255,.23); transition: transform .2s, box-shadow .2s; }
.ocs-button:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(46,84,255,.35); }
.ocs-button-outline { border-color: #5360a6; background: rgba(4,9,27,.3); box-shadow: none; }
.ocs-button-small { min-height: 46px; padding-inline: 22px; border-radius: 9px; }
.ocs-proof { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 48px; }
.ocs-proof-item { display: flex; align-items: center; gap: 11px; color: #aeb5c9; font-size: 13px; line-height: 1.35; }
.ocs-proof-item strong { display: block; color: #fff; font-size: 14px; }
.ocs-proof-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #7081ff; background: #0d1433; border: 1px solid rgba(86,106,255,.28); font-size: 18px; }

.ocs-visual { position: relative; min-height: 500px; }
.ocs-visual-glow { position: absolute; inset: 18% 12% 6%; border-radius: 50%; background: #265cff; opacity: .16; filter: blur(48px); }
.ocs-code-platform { position: absolute; left: 26%; top: 33%; width: 49%; padding: 56px 30px 38px; border: 1px solid #4e63ff; border-radius: 27px; background: linear-gradient(145deg,rgba(25,93,255,.9),rgba(123,48,242,.82)); box-shadow: 0 30px 60px rgba(20,54,214,.38), inset 0 1px 3px rgba(255,255,255,.55); transform: perspective(700px) rotateX(14deg) rotateZ(0deg); text-align: center; }
.ocs-code-platform::before { content: ""; position: absolute; inset: 13px 18px 18px; border-radius: 18px; background: linear-gradient(145deg,#1266e9,#7440ee); box-shadow: inset 0 0 30px rgba(85,218,255,.38); }
.ocs-code-symbol { position: relative; z-index: 2; color: #8deaff; font: 800 72px/1 ui-monospace, monospace; text-shadow: 0 0 26px #62c8ff; }
.ocs-orbit { position: absolute; inset: 19% 5% 7%; border: 1px solid rgba(83,105,255,.16); border-radius: 48%; transform: rotate(-5deg); }
.ocs-float-card { position: absolute; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; width: 142px; height: 120px; padding: 18px; border: 1px solid rgba(86,108,255,.7); border-radius: 15px; color: #fff; background: linear-gradient(145deg,rgba(12,33,91,.92),rgba(31,14,71,.78)); box-shadow: 0 15px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); font-weight: 700; }
.ocs-float-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: #c9ddff; background: linear-gradient(135deg,#2984ff,#9b4dff); font-size: 24px; }
.card-tools { left: 18%; top: 1%; }.card-prompts { right: 10%; top: 3%; }.card-templates { left: 2%; top: 28%; }.card-strategy { right: -1%; top: 31%; }.card-learn { left: 46%; bottom: 0; }
.ocs-connector { position: absolute; height: 1px; background: linear-gradient(90deg,#246dff,#8046ed); opacity: .75; transform-origin: left; }
.connector-one { width: 185px; left: 27%; top: 24%; transform: rotate(26deg); }.connector-two { width: 170px; right: 20%; top: 24%; transform: rotate(154deg); }.connector-three { width: 180px; left: 17%; top: 53%; }.connector-four { width: 175px; right: 9%; top: 53%; }

.ocs-featured { position: relative; z-index: 5; color: #929bb0; background: linear-gradient(90deg,#0b1225,#10172b,#0a1020); border-top: 1px solid rgba(255,255,255,.04); }
.ocs-featured-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; font-size: 14px; font-weight: 750; }
.ocs-featured-label { letter-spacing: .15em; font-size: 12px; }
.ocs-featured-name { opacity: .88; white-space: nowrap; }

.ocs-resources { padding: 62px 0 35px; background: linear-gradient(110deg,#fbfcff,#f4f7ff); }
.ocs-section-head { max-width: 710px; margin: 0 auto 38px; text-align: center; }
.ocs-eyebrow { margin: 0 0 10px; color: var(--ocs-blue); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ocs-section-head h2 { margin: 0 0 8px; font-size: clamp(32px,4vw,43px); line-height: 1.08; letter-spacing: -1.5px; }
.ocs-section-head p { margin: 0; color: var(--ocs-muted); }
.ocs-card-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.ocs-resource-card { display: flex; flex-direction: column; align-items: center; min-height: 255px; padding: 29px 18px 22px; border: 1px solid #eef0f6; border-radius: 16px; background: #fff; box-shadow: var(--ocs-shadow); text-align: center; transition: transform .2s, box-shadow .2s; }
.ocs-resource-card:hover { transform: translateY(-5px); box-shadow: 0 23px 50px rgba(28,42,86,.14); }
.ocs-card-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--card-a),var(--card-b)); font-size: 25px; box-shadow: 0 12px 25px color-mix(in srgb,var(--card-a) 28%,transparent); }
.ocs-resource-card h3 { margin: 0 0 9px; font-size: 16px; line-height: 1.25; }
.ocs-resource-card p { margin: 0 0 17px; color: var(--ocs-muted); font-size: 13px; line-height: 1.6; }
.ocs-card-link { margin-top: auto; color: var(--card-a); font-size: 13px; font-weight: 800; }

.ocs-roadmap { padding: 10px 0 30px; background: linear-gradient(110deg,#fbfcff,#f4f7ff); }
.ocs-roadmap-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; min-height: 325px; padding: 48px 64px; border-radius: 18px; color: #fff; background: radial-gradient(circle at 65% 120%,rgba(107,48,255,.45),transparent 44%),linear-gradient(120deg,#061027,#060a19); }
.ocs-roadmap-panel::before { content:""; position:absolute; inset:-50% auto auto 47%; width:420px; height:420px; background:#274aff; opacity:.12; filter:blur(60px); border-radius:50%; }
.ocs-roadmap-copy { position: relative; z-index: 2; }
.ocs-roadmap-copy h2 { margin: 0 0 14px; font-size: clamp(32px,3.6vw,45px); line-height: 1; letter-spacing: -1.5px; }
.ocs-roadmap-copy p:not(.ocs-eyebrow) { max-width: 480px; margin: 0 0 22px; color: #c7cce0; font-size: 15px; }
.ocs-books { position: relative; min-height: 250px; }
.ocs-book { position: absolute; top: 14px; left: 12%; width: 165px; height: 225px; padding: 50px 20px 20px; border: 1px solid #2c427b; background: linear-gradient(145deg,#06112e,#030714); box-shadow: -15px 22px 35px rgba(0,0,0,.4); transform: rotate(-5deg); text-align: center; }
.ocs-book::before { content: "THE 30 DAY"; display: block; color: #4a8eff; font-weight: 800; }
.ocs-book strong { display: block; margin-top: 4px; font-size: 24px; line-height: 1.05; }
.ocs-pages { position: absolute; top: 16px; right: 2%; display: grid; grid-template-columns: 1fr 1fr; width: 380px; height: 225px; border-radius: 6px 20px 20px 6px; color: #10142a; background: #fbfcff; box-shadow: 0 20px 40px rgba(0,0,0,.35); transform: rotate(2deg); }
.ocs-page { padding: 34px 22px 20px; border-right: 1px solid #dfe3ef; }
.ocs-page small { color: #4966c9; font-weight: 850; }.ocs-page h4 { margin: 5px 0 18px; font-size: 18px; line-height: 1.1; }.ocs-page span { display: block; margin: 9px 0; color: #777e97; font-size: 8px; }

.ocs-newsletter { padding: 0 0 28px; background: linear-gradient(110deg,#fbfcff,#f4f7ff); }
.ocs-newsletter-panel { display: grid; grid-template-columns: auto 1fr 1.4fr; align-items: center; gap: 26px; min-height: 112px; padding: 24px 60px; border: 1px solid #f0f1f7; border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: 0 12px 40px rgba(33,50,100,.05); }
.ocs-mail-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#376dff,#a149f1); font-size: 29px; box-shadow: 0 12px 24px rgba(75,73,255,.22); }
.ocs-newsletter-copy h3 { margin: 0; font-size: 18px; }.ocs-newsletter-copy p { margin: 0; color: var(--ocs-muted); font-size: 13px; }
.ocs-form { display: flex; gap: 12px; }
.ocs-form input[type=email] { min-width: 0; flex: 1; min-height: 48px; padding: 0 18px; border: 1px solid #e7e9f1; border-radius: 8px; background: #fff; font: inherit; outline: none; }
.ocs-form input[type=email]:focus { border-color: #788fff; box-shadow: 0 0 0 3px rgba(75,112,255,.12); }

.site-footer { padding: 42px 0 34px; color: #c3c9d8; background: #030817; }
.ocs-footer-grid { display: grid; grid-template-columns: 1.8fr repeat(4,1fr); gap: 48px; }
.ocs-footer-brand p { max-width: 310px; color: #a9b0c2; font-size: 14px; }
.ocs-footer-col h4 { margin: 3px 0 14px; color: #fff; font-size: 14px; }.ocs-footer-col a { display: block; margin: 7px 0; color: #aeb5c7; font-size: 13px; }.ocs-footer-col a:hover { color: #6e9fff; }
.ocs-social { display: flex; gap: 17px; margin-top: 14px; font-weight: 800; }
.ocs-copyright { margin-top: 34px; color: #7e879d; font-size: 12px; text-align: right; }

.ocs-content { min-height: 65vh; padding: 130px 0 80px; background: #fff; }
.ocs-content article { max-width: 820px; margin: auto; }
.entry-title { font-size: clamp(36px,5vw,58px); line-height: 1.05; }
.entry-content a { color: var(--ocs-blue); text-decoration: underline; }
.entry-content img { border-radius: 12px; }

@media (max-width: 1080px) {
  .main-navigation { gap: 16px; }.main-navigation ul { gap: 16px; }.main-navigation { font-size: 13px; }
  .ocs-card-grid { grid-template-columns: repeat(3,1fr); }
  .ocs-footer-grid { grid-template-columns: 1.6fr repeat(2,1fr); }
  .ocs-pages { width: 330px; }.ocs-book { left: 2%; }
}
@media (max-width: 820px) {
  .admin-bar .site-header { top: 46px; }
  .ocs-menu-toggle { display: block; }
  .main-navigation { position: absolute; display: none; top: 76px; left: 0; right: 0; padding: 20px; background: rgba(3,8,23,.98); }
  .main-navigation.is-open { display: block; }.main-navigation ul { flex-direction: column; align-items: stretch; gap: 0; }.main-navigation li a { display: block; padding: 11px 2px; }
  .ocs-header-cta { margin-left: 8px; padding: 10px 16px; }
  .ocs-hero { padding-top: 130px; }.ocs-hero-grid { grid-template-columns: 1fr; }.ocs-visual { min-height: 430px; }
  .ocs-featured-inner { overflow-x: auto; justify-content: flex-start; }
  .ocs-roadmap-panel { grid-template-columns: 1fr; padding: 42px; }.ocs-books { margin-top: 25px; }
  .ocs-newsletter-panel { grid-template-columns: auto 1fr; padding: 25px; }.ocs-form { grid-column: 1/-1; }
}
@media (max-width: 580px) {
  .ocs-wrap { width: min(calc(100% - 28px),var(--ocs-wrap)); }
  .ocs-logo { font-size: 18px; }.ocs-logo-mark { font-size: 20px; }.ocs-header-cta { display: none; }
  .ocs-hero h1 { font-size: 45px; letter-spacing: -2px; }.ocs-hero-copy { font-size: 16px; }
  .ocs-actions .ocs-button { width: 100%; }
  .ocs-proof { gap: 16px; }.ocs-proof-item { width: calc(50% - 8px); }
  .ocs-visual { min-height: 370px; margin-inline: -12px; }.ocs-code-platform { top: 35%; }.ocs-code-symbol { font-size: 53px; }
  .ocs-float-card { width: 104px; height: 92px; padding: 11px; font-size: 11px; }.ocs-float-icon { width: 32px; height: 32px; font-size: 17px; }
  .card-tools{left:12%}.card-prompts{right:5%}.card-templates{left:0}.card-strategy{right:0}.card-learn{left:42%}
  .ocs-card-grid { grid-template-columns: 1fr 1fr; }.ocs-resource-card { min-height: 240px; padding-inline: 13px; }
  .ocs-roadmap-panel { padding: 32px 24px; }.ocs-books { min-height: 225px; margin-inline: -15px; }.ocs-book { width: 120px; height: 180px; padding: 37px 10px 10px; }.ocs-book strong { font-size: 17px; }.ocs-pages { width: 255px; height: 180px; }.ocs-page { padding: 24px 12px; }.ocs-page h4 { font-size: 13px; }.ocs-page span { margin: 6px 0; }
  .ocs-newsletter-panel { grid-template-columns: 1fr; text-align: center; }.ocs-mail-icon { margin: auto; }.ocs-form { flex-direction: column; }.ocs-form .ocs-button { width: 100%; }
  .ocs-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }.ocs-footer-brand { grid-column: 1/-1; }.ocs-copyright { text-align: left; }
}