/*
Theme Name: OC3 Robotics
Theme URI: https://oc3robotics.com/
Author: OC3 Robotics
Author URI: https://oc3robotics.com/
Description: A responsive engineering-company WordPress theme for robotics, computer vision, autonomous systems and technical portfolios.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: oc3-robotics
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, portfolio
*/

:root{
  --oc3-navy:#031426;
  --oc3-navy-2:#071d33;
  --oc3-navy-3:#0b2744;
  --oc3-blue:#1497ff;
  --oc3-blue-2:#48b8ff;
  --oc3-ink:#0b1728;
  --oc3-muted:#5e6a78;
  --oc3-line:#d9e0e8;
  --oc3-paper:#f7f9fb;
  --oc3-white:#fff;
  --oc3-max:1180px;
  --oc3-shadow:0 18px 55px rgba(2,20,38,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--oc3-ink);background:var(--oc3-paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.oc3-container{width:min(calc(100% - 40px),var(--oc3-max));margin-inline:auto}
.oc3-eyebrow{margin:0 0 12px;color:var(--oc3-blue);font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.oc3-section{padding:78px 0}
.oc3-section--white{background:#fff}
.oc3-section--soft{background:#eef3f7}
.oc3-section--dark{background:var(--oc3-navy);color:#fff}
.oc3-section-head{display:flex;justify-content:space-between;gap:36px;align-items:end;margin-bottom:34px}
.oc3-section-title{margin:0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.045em}
.oc3-section-copy{max-width:650px;color:var(--oc3-muted);font-size:1.02rem}
.oc3-section--dark .oc3-section-copy{color:#b9ccdc}

/* Header */
.oc3-site-header{
  position:relative;z-index:30;background:var(--oc3-navy);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.home .oc3-site-header{position:absolute;top:0;left:0;width:100%;background:transparent}
.oc3-nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.oc3-brand{display:inline-flex;flex-direction:column;color:#fff;line-height:.88}
.oc3-brand strong{font-size:1.9rem;letter-spacing:.08em}
.oc3-brand small{margin-top:7px;font-size:.6rem;font-weight:800;letter-spacing:.32em}
.custom-logo{max-height:48px;width:auto}
.oc3-menu{display:flex;align-items:center;gap:30px;color:#d9e9f9;font-size:.92rem}
.oc3-menu ul{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.oc3-menu a{position:relative;display:block;padding:28px 0}
.oc3-menu a::after{content:"";position:absolute;left:0;bottom:17px;width:0;height:2px;background:var(--oc3-blue);transition:.2s}
.oc3-menu a:hover::after,.oc3-menu .current-menu-item>a::after{width:100%}
.oc3-menu-toggle{display:none;border:0;background:none;color:#fff;font-size:1.55rem;cursor:pointer}

/* Hero */
.oc3-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 78% 46%,rgba(20,151,255,.14),transparent 28%),
  linear-gradient(120deg,#021120,#03182d 54%,#041629);
  padding:155px 0 72px;min-height:680px;
}
.oc3-hero::before,.oc3-project-hero::before{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:linear-gradient(rgba(73,184,255,.22) 1px,transparent 1px),
  linear-gradient(90deg,rgba(73,184,255,.22) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to left,#000 38%,transparent 78%);
}
.oc3-hero-grid{position:relative;display:grid;grid-template-columns:.9fr 1.3fr;gap:42px;align-items:center}
.oc3-hero h1,.oc3-project-hero h1{margin:0 0 22px;font-size:clamp(3rem,6vw,6rem);line-height:.94;letter-spacing:-.06em}
.oc3-hero-copy{max-width:560px;color:#d7e2ee;font-size:1.12rem}
.oc3-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.oc3-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 24px;
  border:1px solid rgba(255,255,255,.55);color:#fff;font-weight:700;transition:.22s;background:transparent;
}
.oc3-btn--primary{background:var(--oc3-blue);border-color:var(--oc3-blue)}
.oc3-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,151,255,.18)}
.oc3-hero-visual{
  position:relative;min-height:460px;border:1px solid rgba(72,184,255,.12);
  background:linear-gradient(180deg,rgba(8,39,68,.28),rgba(2,17,32,.18));overflow:hidden;
}
.oc3-hero-visual::after{
  content:"";position:absolute;inset:auto 0 0;height:46%;
  background:linear-gradient(15deg,transparent 49.5%,rgba(72,184,255,.12) 50%,transparent 50.5%) 0 0/86px 42px,
  linear-gradient(165deg,transparent 49.5%,rgba(72,184,255,.12) 50%,transparent 50.5%) 0 0/86px 42px;
  opacity:.55;
}
.oc3-system-flow{position:absolute;z-index:2;left:6%;top:8%;display:flex;flex-direction:column;align-items:center;gap:9px;width:150px}
.oc3-flow-node{width:100%;padding:9px 10px;border:1px solid rgba(177,220,255,.64);color:#eef8ff;text-align:center;font-size:.72rem;background:rgba(3,20,38,.78)}
.oc3-flow-arrow{color:#92cfff;line-height:1}
.oc3-warehouse-svg{position:absolute;right:-3%;bottom:1%;width:80%;z-index:1}
.oc3-robot-svg{position:absolute;right:12%;bottom:3%;width:36%;z-index:3;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}

/* Technologies */
.oc3-tech-strip{background:#fff;border-bottom:1px solid var(--oc3-line)}
.oc3-tech-inner{padding:18px 0 22px}
.oc3-tech-list{display:grid;grid-template-columns:repeat(9,1fr);gap:12px;margin-top:14px}
.oc3-tech{display:flex;align-items:center;gap:10px;min-width:0;font-size:.86rem;white-space:nowrap}
.oc3-tech-icon{display:grid;place-items:center;width:25px;height:25px;border:1px solid #7890aa;border-radius:6px;font-weight:800;color:#123b62;font-size:.7rem}

/* Cards */
.oc3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oc3-service-card{position:relative;min-height:235px;padding:28px 26px 54px;border:1px solid var(--oc3-line);background:#fff;transition:.22s}
.oc3-service-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--oc3-blue);transform:scaleX(0);transform-origin:left;transition:.22s}
.oc3-service-card:hover{transform:translateY(-5px);box-shadow:var(--oc3-shadow)}
.oc3-service-card:hover::after{transform:scaleX(1)}
.oc3-service-card .oc3-icon{font-size:1.8rem;margin-bottom:35px}
.oc3-service-card h3{margin:0 0 10px;font-size:1.25rem}
.oc3-service-card p{margin:0;color:var(--oc3-muted)}
.oc3-project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.oc3-project-card{overflow:hidden;background:var(--oc3-navy);color:#fff;border:1px solid #143b5e;transition:.22s}
.oc3-project-card:hover{transform:translateY(-5px);box-shadow:var(--oc3-shadow)}
.oc3-project-image{aspect-ratio:16/9;position:relative;overflow:hidden;background:#061a2d}
.oc3-project-image img{width:100%;height:100%;object-fit:cover}
.oc3-project-body{padding:18px}
.oc3-project-body h3{margin:0 0 6px;font-size:1.05rem}
.oc3-project-body p{margin:0;color:#bed0df;font-size:.87rem}
.oc3-process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.oc3-step{position:relative;padding-top:16px;border-top:1px solid var(--oc3-line)}
.oc3-step:not(:last-child)::after{content:"→";position:absolute;top:19px;right:-13px;color:#7d8a97}
.oc3-step strong{font-size:.78rem;color:var(--oc3-blue);letter-spacing:.08em}
.oc3-step h3{font-size:1rem;margin:9px 0 6px}
.oc3-step p{font-size:.8rem;color:var(--oc3-muted);margin:0}

/* Project pages */
.oc3-project-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 80% 25%,rgba(20,151,255,.16),transparent 25%),
  linear-gradient(120deg,#021120,#03182d 55%,#041629);padding:84px 0 78px;
}
.oc3-project-hero-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.oc3-breadcrumb{display:inline-flex;gap:8px;color:#a9c6dd;font-size:.84rem;margin-bottom:24px}
.oc3-lead{max-width:620px;color:#d5e3ef;font-size:1.12rem}
.oc3-tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.oc3-tag{padding:7px 10px;border:1px solid rgba(255,255,255,.2);color:#cfe4f5;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.oc3-hero-art{min-height:390px;border:1px solid rgba(72,184,255,.14);background:linear-gradient(180deg,rgba(8,39,68,.28),rgba(2,17,32,.12));display:grid;place-items:center;overflow:hidden}
.oc3-overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px}
.oc3-prose h2,.oc3-prose h3{line-height:1.15;letter-spacing:-.025em}
.oc3-prose p{color:var(--oc3-muted);font-size:1.02rem}
.oc3-fact-panel{border:1px solid var(--oc3-line);background:#fff;padding:26px}
.oc3-fact{padding:16px 0;border-bottom:1px solid var(--oc3-line)}
.oc3-fact:first-child{padding-top:0}.oc3-fact:last-child{border-bottom:0;padding-bottom:0}
.oc3-fact strong{display:block;margin-bottom:4px;font-size:.76rem;color:var(--oc3-blue);letter-spacing:.1em;text-transform:uppercase}
.oc3-video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.oc3-video-card{background:#fff;border:1px solid var(--oc3-line);overflow:hidden}
.oc3-video-frame{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#071d33,#0d3455);display:grid;place-items:center;color:#d9e9f9;overflow:hidden}
.oc3-video-frame iframe,.oc3-video-frame video{width:100%;height:100%;border:0}
.oc3-video-frame::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(72,184,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(72,184,255,.12) 1px,transparent 1px);background-size:32px 32px}
.oc3-play{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.65);display:grid;place-items:center;background:rgba(3,20,38,.65);font-size:1.45rem}
.oc3-video-body{padding:24px}
.oc3-video-body h3{margin:0 0 8px;font-size:1.3rem}.oc3-video-body p{margin:0;color:var(--oc3-muted)}
.oc3-architecture{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
.oc3-arch-box{min-height:120px;padding:20px 14px;border:1px solid rgba(72,184,255,.28);background:rgba(5,29,51,.78);display:flex;flex-direction:column;justify-content:center;text-align:center}
.oc3-arch-box strong{font-size:.98rem}.oc3-arch-box span{margin-top:6px;color:#a7c5d9;font-size:.78rem}
.oc3-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oc3-feature{padding:26px;border:1px solid var(--oc3-line);background:#fff}
.oc3-feature h3{margin:0 0 9px;font-size:1.18rem}.oc3-feature p{margin:0;color:var(--oc3-muted)}

/* Articles */
.oc3-page-hero{padding:78px 0;background:var(--oc3-navy);color:#fff}
.oc3-page-hero h1{margin:0;font-size:clamp(2.8rem,5vw,5rem);line-height:1;letter-spacing:-.05em}
.oc3-content-wrap{width:min(calc(100% - 40px),820px);margin-inline:auto;padding:72px 0}
.oc3-article-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--oc3-muted);font-size:.9rem;margin:16px 0 30px}
.entry-content{font-size:1.05rem}
.entry-content h2,.entry-content h3{line-height:1.2;letter-spacing:-.025em;margin-top:2em}
.entry-content p,.entry-content li{color:#394657}
.entry-content a{color:var(--oc3-blue);text-decoration:underline}
.entry-content pre,.entry-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.entry-content pre{overflow:auto;padding:20px;background:#071d33;color:#d8ebfa}
.entry-content blockquote{margin:2em 0;padding:8px 0 8px 24px;border-left:3px solid var(--oc3-blue);font-size:1.2rem}
.oc3-post-nav{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--oc3-line);margin-top:50px;padding-top:26px}

/* Contact */
.oc3-contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.oc3-contact-panel{padding:30px;border:1px solid var(--oc3-line);background:#fff}
.oc3-contact-list{list-style:none;margin:24px 0 0;padding:0}
.oc3-contact-list li{padding:14px 0;border-bottom:1px solid var(--oc3-line)}
.oc3-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.oc3-field{margin-bottom:18px}
.oc3-field label{display:block;margin-bottom:7px;font-weight:700}
.oc3-field input,.oc3-field textarea,.oc3-field select{width:100%;padding:13px 14px;border:1px solid #c9d3dd;background:#fff;color:var(--oc3-ink)}
.oc3-field textarea{min-height:170px;resize:vertical}
.oc3-submit{border:0;cursor:pointer}
.oc3-notice{padding:14px 16px;margin-bottom:20px;border:1px solid #8ecb9c;background:#edf9f0;color:#205b2f}
.oc3-error{border-color:#e3a3a3;background:#fff1f1;color:#8d2b2b}
.oc3-hp{position:absolute!important;left:-9999px!important}

/* Footer */
.oc3-cta{padding:72px 0;background:#031426;color:#fff}
.oc3-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:28px}
.oc3-cta h2{margin:0;font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.05em}
.oc3-footer{background:#020e19;color:#93a9bb;padding:28px 0}
.oc3-footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
.oc3-footer-links{display:flex;gap:18px}

/* WordPress */
.alignwide{width:min(1100px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)}
.alignfull{width:100vw;margin-left:50%;transform:translateX(-50%)}
.wp-caption{max-width:100%}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive */
@media(max-width:980px){
  .oc3-menu-toggle{display:block}
  .oc3-menu{position:absolute;z-index:40;top:78px;left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:14px 20px;background:#071d33;border:1px solid rgba(255,255,255,.12)}
  .oc3-menu.open{display:flex}.oc3-menu ul{display:block}.oc3-menu a{padding:12px 0}.oc3-menu a::after{bottom:5px}
  .oc3-hero-grid,.oc3-project-hero-grid,.oc3-overview-grid,.oc3-contact-grid{grid-template-columns:1fr}
  .oc3-hero{padding-top:130px}.oc3-hero-visual{min-height:410px}
  .oc3-tech-list{grid-template-columns:repeat(3,1fr)}
  .oc3-cards{grid-template-columns:repeat(2,1fr)}
  .oc3-project-grid{grid-template-columns:repeat(2,1fr)}
  .oc3-process-grid{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .oc3-step:nth-child(3)::after{display:none}
  .oc3-video-grid{grid-template-columns:1fr}
  .oc3-architecture{grid-template-columns:1fr}
  .oc3-feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .oc3-container,.oc3-content-wrap{width:min(calc(100% - 28px),var(--oc3-max))}
  .oc3-nav{min-height:72px}.oc3-brand strong{font-size:1.6rem}
  .oc3-hero{min-height:auto;padding:112px 0 0}.oc3-hero-grid{gap:28px}.oc3-hero h1,.oc3-project-hero h1{font-size:3.2rem}
  .oc3-actions{display:grid;grid-template-columns:1fr 1fr}.oc3-btn{padding:0 14px}
  .oc3-hero-visual{margin:8px -14px 0;min-height:360px;border-inline:0}
  .oc3-system-flow{left:5%;top:8%;width:118px}.oc3-flow-node{font-size:.6rem;padding:7px}
  .oc3-warehouse-svg{width:92%;right:-15%;bottom:2%}.oc3-robot-svg{width:46%;right:4%}
  .oc3-tech-list{grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--oc3-line)}
  .oc3-tech{padding:13px 10px;border-right:1px solid var(--oc3-line);border-bottom:1px solid var(--oc3-line);font-size:.72rem}
  .oc3-section{padding:56px 0}.oc3-section-head{display:block}.oc3-cards,.oc3-project-grid,.oc3-process-grid,.oc3-feature-grid{grid-template-columns:1fr}
  .oc3-service-card{min-height:0;padding:24px}.oc3-service-card .oc3-icon{margin-bottom:18px}.oc3-step::after{display:none}
  .oc3-project-hero{padding:62px 0 54px}.oc3-hero-art{min-height:300px}
  .oc3-form-row{grid-template-columns:1fr}
  .oc3-cta-inner,.oc3-footer-inner{flex-direction:column;align-items:flex-start}
}